diff --git a/.eslintrc.js b/.eslintrc.js
index 2441c77348e49..edf84561498b6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -119,7 +119,7 @@ module.exports = {
                     },
                     {
                         name: 'antd',
-                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip'],
+                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip', 'Progress'],
                         message: 'please use the Lemon equivalent instead',
                     },
                 ],
@@ -169,6 +169,10 @@ module.exports = {
                         element: 'LemonButtonWithDropdown',
                         message: 'use <LemonMenu> with a <LemonButton> child instead',
                     },
+                    {
+                        element: 'Progress',
+                        message: 'use <LemonProgress> instead',
+                    },
                 ],
             },
         ],
@@ -204,6 +208,10 @@ module.exports = {
                         element: 'Collapse',
                         message: 'use <LemonCollapse> instead',
                     },
+                    {
+                        element: 'Slider',
+                        message: 'use <LemonSlider> instead',
+                    },
                     {
                         element: 'Checkbox',
                         message: 'use <LemonCheckbox> instead',
@@ -245,6 +253,7 @@ module.exports = {
         'no-constant-condition': 'off',
         'no-prototype-builtins': 'off',
         'no-irregular-whitespace': 'off',
+        'no-useless-rename': 'error',
         'import/no-restricted-paths': [
             'error',
             {
diff --git a/.run/Celery.run.xml b/.run/Celery.run.xml
index 9c1dd88226146..40853a2208f03 100644
--- a/.run/Celery.run.xml
+++ b/.run/Celery.run.xml
@@ -19,7 +19,7 @@
     <option name="ADD_SOURCE_ROOTS" value="true" />
     <EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
     <option name="SCRIPT_NAME" value="$PROJECT_DIR$/env/bin/celery" />
-    <option name="PARAMETERS" value="-A posthog worker -B --scheduler redbeat.RedBeatScheduler --without-heartbeat --without-gossip --without-mingle --loglevel=DEBUG" />
+    <option name="PARAMETERS" value="-A posthog worker -B --scheduler redbeat.RedBeatScheduler --without-heartbeat --without-mingle --loglevel=DEBUG" />
     <option name="SHOW_COMMAND_LINE" value="false" />
     <option name="EMULATE_TERMINAL" value="false" />
     <option name="MODULE_MODE" value="false" />
diff --git a/cypress/e2e/auth-password-reset.cy.ts b/cypress/e2e/auth-password-reset.cy.ts
index 8f8f60c79b26f..2307c4a3401a0 100644
--- a/cypress/e2e/auth-password-reset.cy.ts
+++ b/cypress/e2e/auth-password-reset.cy.ts
@@ -24,7 +24,7 @@ describe('Password Reset', () => {
     it('Shows validation error if passwords do not match', () => {
         cy.visit('/reset/e2e_test_user/e2e_test_token')
         cy.get('[data-attr="password"]').type('12345678')
-        cy.get('.ant-progress-bg').should('be.visible')
+        cy.get('.LemonProgress__track').should('be.visible')
         cy.get('[data-attr="password-confirm"]').type('1234567A')
         cy.get('button[type=submit]').click()
         cy.get('.text-danger').should('contain', 'Passwords do not match')
diff --git a/cypress/e2e/experiments.cy.ts b/cypress/e2e/experiments.cy.ts
new file mode 100644
index 0000000000000..5c168ffa0c34e
--- /dev/null
+++ b/cypress/e2e/experiments.cy.ts
@@ -0,0 +1,79 @@
+describe('Experiments', () => {
+    let randomNum
+    let experimentName
+    let featureFlagKey
+
+    beforeEach(() => {
+        cy.intercept('/api/users/@me/', {
+            fixture: 'api/experiments/user',
+        })
+
+        cy.intercept('/api/projects/1/experiments?limit=1000', {
+            fixture: 'api/experiments/experiments',
+        })
+
+        cy.intercept('/api/projects/1/experiments/1234/', {
+            fixture: 'api/experiments/new-experiment',
+        })
+
+        cy.intercept('POST', '/api/projects/1/experiments/', (req) => {
+            req.reply({ fixture: 'api/experiments/new-experiment' })
+        })
+
+        randomNum = Math.floor(Math.random() * 10000000)
+        experimentName = `Experiment ${randomNum}`
+        featureFlagKey = `experiment-${randomNum}`
+        cy.visit('/experiments')
+    })
+
+    it('create experiment', () => {
+        cy.get('[data-attr=top-bar-name]').should('contain', 'A/B testing')
+
+        // Name, flag key, description
+        cy.get('[data-attr=create-experiment]').first().click()
+        cy.get('[data-attr=experiment-name]').click().type(`${experimentName}`).should('have.value', experimentName)
+        cy.get('[data-attr=experiment-feature-flag-key]')
+            .click()
+            .type(`${featureFlagKey}`)
+            .should('have.value', featureFlagKey)
+        cy.get('[data-attr=experiment-description]')
+            .click()
+            .type('This is the description of the experiment')
+            .should('have.value', 'This is the description of the experiment')
+
+        // Edit variants
+        cy.get('[data-attr="add-test-variant"]').click()
+        cy.get('input[data-attr="experiment-variant-key"][data-key-index="1"]')
+            .clear()
+            .type('test-variant-1')
+            .should('have.value', 'test-variant-1')
+        cy.get('input[data-attr="experiment-variant-key"][data-key-index="2"]')
+            .clear()
+            .type('test-variant-2')
+            .should('have.value', 'test-variant-2')
+
+        // Select goal type
+        cy.get('[data-attr="experiment-goal-type-select"]').click()
+        cy.contains('Trend').should('be.visible')
+        cy.contains('Conversion funnel').should('be.visible')
+
+        // Add secondary metric
+        const secondaryMetricName = `Secondary metric ${Math.floor(Math.random() * 10000000)}`
+        cy.get('[data-attr="add-secondary-metric-btn"]').click()
+        cy.get('[data-attr=secondary-metric-name]')
+            .click()
+            .type(secondaryMetricName)
+            .should('have.value', secondaryMetricName)
+        cy.get('[data-attr="metrics-selector"]').click()
+        cy.contains('Trends').should('be.visible')
+        cy.contains('Funnels').should('be.visible')
+        cy.get('[data-attr="create-annotation-submit"]').click()
+        cy.contains(secondaryMetricName).should('exist')
+
+        // Edit minimum acceptable improvement
+        cy.get('input[data-attr="min-acceptable-improvement"]').type('{selectall}20').should('have.value', '20')
+
+        // Save experiment
+        cy.get('[data-attr="save-experiment"]').first().click()
+    })
+})
diff --git a/cypress/e2e/invites.cy.ts b/cypress/e2e/invites.cy.ts
index 07c437b3bebf6..71627202e8896 100644
--- a/cypress/e2e/invites.cy.ts
+++ b/cypress/e2e/invites.cy.ts
@@ -53,7 +53,7 @@ describe('Invite Signup', () => {
         cy.get('.BridgePage__left').should('contain', "You've been invited to join")
         cy.get('input[type="email"]').should('have.value', target_email)
         cy.get('[data-attr="password"]').type('12345678')
-        cy.get('.ant-progress-bg').should('not.have.css', 'width', '0px') // Password strength indicator is working
+        cy.get('.LemonProgress__track').should('not.have.css', 'width', '0px') // Password strength indicator is working
         cy.get('[data-attr="first_name"]').type(randomString('Bob'))
         cy.get('[data-attr=signup-role-at-organization]').click()
         cy.get('.Popover li:first-child').click()
diff --git a/cypress/e2e/surveys.cy.ts b/cypress/e2e/surveys.cy.ts
index 9a75337b67356..5c22e0655e0d1 100644
--- a/cypress/e2e/surveys.cy.ts
+++ b/cypress/e2e/surveys.cy.ts
@@ -96,7 +96,7 @@ describe('Surveys', () => {
         cy.get('[data-attr=prop-val] .ant-select-selector').click({ force: true })
         cy.get('[data-attr=prop-val-0]').click({ force: true })
 
-        cy.get('[data-attr="rollout-percentage"]').type('{backspace}')
+        cy.get('[data-attr="rollout-percentage"]').type('100')
 
         // save
         cy.get('[data-attr="save-survey"]').click()
diff --git a/cypress/fixtures/api/experiments/experiments.json b/cypress/fixtures/api/experiments/experiments.json
new file mode 100644
index 0000000000000..4645de95998b2
--- /dev/null
+++ b/cypress/fixtures/api/experiments/experiments.json
@@ -0,0 +1,6 @@
+{
+    "count": 1,
+    "next": null,
+    "previous": null,
+    "results": []
+}
diff --git a/cypress/fixtures/api/experiments/new-experiment.json b/cypress/fixtures/api/experiments/new-experiment.json
new file mode 100644
index 0000000000000..8b59e7ead650f
--- /dev/null
+++ b/cypress/fixtures/api/experiments/new-experiment.json
@@ -0,0 +1,90 @@
+{
+    "id": 1234,
+    "name": "Test experiment 1",
+    "description": "This is the description of Test experiment 1",
+    "start_date": null,
+    "end_date": null,
+    "feature_flag_key": "test-experiment-1",
+    "feature_flag": {
+        "id": 28367,
+        "team_id": 38354,
+        "name": "Feature Flag for Experiment Test experiment 1",
+        "key": "test-experiment-1",
+        "filters": {
+            "groups": [
+                {
+                    "properties": [],
+                    "rollout_percentage": null
+                }
+            ],
+            "multivariate": {
+                "variants": [
+                    {
+                        "key": "control",
+                        "rollout_percentage": 33
+                    },
+                    {
+                        "key": "test-variant-1",
+                        "rollout_percentage": 33
+                    },
+                    {
+                        "key": "test-variant-2",
+                        "rollout_percentage": 34
+                    }
+                ]
+            },
+            "aggregation_group_type_index": null
+        },
+        "deleted": false,
+        "active": false,
+        "ensure_experience_continuity": false
+    },
+    "parameters": {
+        "feature_flag_variants": [
+            {
+                "key": "control",
+                "rollout_percentage": 33
+            },
+            {
+                "key": "test-variant-1",
+                "rollout_percentage": 33
+            },
+            {
+                "key": "test-variant-2",
+                "rollout_percentage": 34
+            }
+        ],
+        "recommended_sample_size": 0,
+        "recommended_running_time": 191.3
+    },
+    "secondary_metrics": [],
+    "filters": {
+        "events": [
+            {
+                "id": "$pageview",
+                "math": "total",
+                "name": "$pageview",
+                "type": "events",
+                "order": 0
+            }
+        ],
+        "date_to": "2024-01-23T23:59",
+        "display": "ActionsLineGraph",
+        "insight": "TRENDS",
+        "interval": "day",
+        "date_from": "2024-01-09T09:00",
+        "entity_type": "events"
+    },
+    "archived": false,
+    "created_by": {
+        "id": 50136,
+        "uuid": "018a8e2f-f329-0000-7594-0cbb2cb03ed5",
+        "distinct_id": "3z5U5MNGsfbeqBKOwGs6dvlG0UFbiU78MfJYxyD1ahg",
+        "first_name": "Jane",
+        "last_name": "Doe",
+        "email": "jane@test.com",
+        "is_email_verified": true
+    },
+    "created_at": "2024-01-23T08:01:20.564210Z",
+    "updated_at": "2024-01-23T08:01:20.564590Z"
+}
diff --git a/cypress/fixtures/api/experiments/user.json b/cypress/fixtures/api/experiments/user.json
new file mode 100644
index 0000000000000..b50a157e72afa
--- /dev/null
+++ b/cypress/fixtures/api/experiments/user.json
@@ -0,0 +1,56 @@
+{
+    "id": "01788ed8-6d2d-0000-ccdb-d8e17589b1ea",
+    "distinct_id": "kOyAmTq2McfCD5XvqwjKf8m6GVecm9uN0L0ypEoRN50",
+    "first_name": "Jane",
+    "email": "test@posthog.com",
+    "email_opt_in": true,
+    "anonymize_data": false,
+    "toolbar_mode": "toolbar",
+    "has_password": true,
+    "is_staff": false,
+    "is_impersonated": false,
+    "team": {
+        "id": 1,
+        "uuid": "01787e47-55d7-0000-6976-b893a03aaba8",
+        "organization": "01787e47-5558-0000-bae1-6bc513b42abe",
+        "api_token": "dtrwW0uEC7LwVx64RmZmqog_XjU0nXWuEK1d1ZpjteQ",
+        "name": "Hogflix Demo App",
+        "completed_snippet_onboarding": true,
+        "ingested_event": true,
+        "is_demo": true,
+        "timezone": "UTC"
+    },
+    "organization": {
+        "id": "01787e47-5558-0000-bae1-6bc513b42abe",
+        "name": "Hogflix Movies",
+        "created_at": "2021-03-29T13:58:27.416616Z",
+        "updated_at": "2021-03-29T13:58:57.067131Z",
+        "membership_level": 15,
+        "plugins_access_level": 9,
+        "teams": [
+            {
+                "id": 1,
+                "uuid": "01787e47-55d7-0000-6976-b893a03aaba8",
+                "organization": "01787e47-5558-0000-bae1-6bc513b42abe",
+                "api_token": "dtrwW0uEC7LwVx64RmZmqog_XjU0nXWuEK1d1ZpjteQ",
+                "name": "Hogflix Demo App",
+                "completed_snippet_onboarding": true,
+                "ingested_event": true,
+                "is_demo": true,
+                "timezone": "UTC"
+            }
+        ],
+        "available_features": [],
+        "available_product_features": [
+            {
+                "key": "experimentation",
+                "name": "A/B testing",
+                "note": null,
+                "unit": null,
+                "limit": null,
+                "description": "Test changes to your product and evaluate the impacts those changes make."
+            }
+        ]
+    },
+    "organizations": [{ "id": "01787e47-5558-0000-bae1-6bc513b42abe", "name": "Hogflix Movies" }]
+}
diff --git a/ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json b/ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json
new file mode 100644
index 0000000000000..c17efc6d9e246
--- /dev/null
+++ b/ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json
@@ -0,0 +1,210 @@
+{
+    "data": {
+        "adds": [
+            {
+                "parentId": 183891344,
+                "wireframe": {
+                    "childWireframes": [
+                        {
+                            "childWireframes": [
+                                {
+                                    "disabled": false,
+                                    "height": 19,
+                                    "id": 52129787,
+                                    "style": {
+                                        "color": "#000000",
+                                        "fontFamily": "sans-serif",
+                                        "fontSize": 14,
+                                        "horizontalAlign": "left",
+                                        "paddingBottom": 0,
+                                        "paddingLeft": 0,
+                                        "paddingRight": 0,
+                                        "paddingTop": 0,
+                                        "verticalAlign": "top"
+                                    },
+                                    "text": "PostHog/posthog-ios",
+                                    "type": "text",
+                                    "width": 368,
+                                    "x": 66,
+                                    "y": 556
+                                },
+                                {
+                                    "disabled": false,
+                                    "height": 19,
+                                    "id": 99571736,
+                                    "style": {
+                                        "color": "#000000",
+                                        "fontFamily": "sans-serif",
+                                        "fontSize": 14,
+                                        "horizontalAlign": "left",
+                                        "paddingBottom": 0,
+                                        "paddingLeft": 0,
+                                        "paddingRight": 0,
+                                        "paddingTop": 0,
+                                        "verticalAlign": "top"
+                                    },
+                                    "text": "PostHog iOS integration",
+                                    "type": "text",
+                                    "width": 150,
+                                    "x": 10,
+                                    "y": 584
+                                },
+                                {
+                                    "disabled": false,
+                                    "height": 32,
+                                    "id": 240124529,
+                                    "style": {
+                                        "color": "#000000",
+                                        "fontFamily": "sans-serif",
+                                        "fontSize": 14,
+                                        "horizontalAlign": "center",
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 32,
+                                        "paddingRight": 0,
+                                        "paddingTop": 6,
+                                        "verticalAlign": "center"
+                                    },
+                                    "text": "20",
+                                    "type": "text",
+                                    "width": 48,
+                                    "x": 10,
+                                    "y": 548
+                                }
+                            ],
+                            "disabled": false,
+                            "height": 62,
+                            "id": 209272202,
+                            "style": {},
+                            "width": 406,
+                            "x": 2,
+                            "y": 540
+                        }
+                    ],
+                    "disabled": false,
+                    "height": 70,
+                    "id": 142908405,
+                    "style": {
+                        "backgroundImage": "iVBORw0KGgoAAAANSUhEUgAABDgAAAC5CAYAAADNs4/hAAAAAXNSR0IArs4c6QAAAARzQklUCAgI\nCHwIZIgAAAWeSURBVHic7dyxqh1lGIbR77cIBuzTWKUShDSChVh7ITaWFoH0Emsr78D7sBVCBFOZ\nQMo0XoAEEshvZeeZ8cR9PDywVjsfm7d+mNkzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAADA7Vn/5mjv/fHMfDszX83MgxtdBAAAADDzbGZ+npkf1lqvzo5PA8fe++uZ+XFm\n7v73bQAAAADX8npmvllr/XR0dBg49t73Z+b3mblzwWEAAAAA1/FmZj5da7286uCDkx94POIGAAAA\ncLvuzMx3RwdngeOzy20BAAAAeG+HjeLKT1T23h/OzJ9zHkEAAAAAbtq7mflorfX6nx6e/QfHvpFJ\nAAAAANe01rqyY3g7AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT\nOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA\nPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA\nAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA\nAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyB\nAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADI\nEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAA\ngDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMA\nAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4\nAAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8\ngQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAA\nyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAA\nAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIED\nAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT\nOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA\nPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA\nAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA\nAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIOwscL/6XFQAAAADHDhvFWeD47YJD\nAAAAAN7XYaNYRw/33p/PzC/jUxYAAADg9rydmS/WWk+vOjgMF2utJzPz+NKrAAAAAK7h0VHcmDl5\ng+Nve+8vZ+b7mflkZu5dYBgAAADAkT9m5vnMPFxr/XrbYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAAAAAAAAAAAAgCN/AW0xMqHnNQceAAAAAElFTkSuQmCC\n"
+                    },
+                    "width": 411,
+                    "x": 0,
+                    "y": 536
+                }
+            },
+            {
+                "parentId": 142908405,
+                "wireframe": {
+                    "childWireframes": [
+                        {
+                            "disabled": false,
+                            "height": 19,
+                            "id": 52129787,
+                            "style": {
+                                "color": "#000000",
+                                "fontFamily": "sans-serif",
+                                "fontSize": 14,
+                                "horizontalAlign": "left",
+                                "paddingBottom": 0,
+                                "paddingLeft": 0,
+                                "paddingRight": 0,
+                                "paddingTop": 0,
+                                "verticalAlign": "top"
+                            },
+                            "text": "PostHog/posthog-ios",
+                            "type": "text",
+                            "width": 368,
+                            "x": 66,
+                            "y": 556
+                        },
+                        {
+                            "disabled": false,
+                            "height": 19,
+                            "id": 99571736,
+                            "style": {
+                                "color": "#000000",
+                                "fontFamily": "sans-serif",
+                                "fontSize": 14,
+                                "horizontalAlign": "left",
+                                "paddingBottom": 0,
+                                "paddingLeft": 0,
+                                "paddingRight": 0,
+                                "paddingTop": 0,
+                                "verticalAlign": "top"
+                            },
+                            "text": "PostHog iOS integration",
+                            "type": "text",
+                            "width": 150,
+                            "x": 10,
+                            "y": 584
+                        },
+                        {
+                            "disabled": false,
+                            "height": 32,
+                            "id": 240124529,
+                            "style": {
+                                "color": "#000000",
+                                "fontFamily": "sans-serif",
+                                "fontSize": 14,
+                                "horizontalAlign": "center",
+                                "paddingBottom": 6,
+                                "paddingLeft": 32,
+                                "paddingRight": 0,
+                                "paddingTop": 6,
+                                "verticalAlign": "center"
+                            },
+                            "text": "20",
+                            "type": "text",
+                            "width": 48,
+                            "x": 10,
+                            "y": 548
+                        }
+                    ],
+                    "disabled": false,
+                    "height": 62,
+                    "id": 209272202,
+                    "style": {},
+                    "width": 406,
+                    "x": 2,
+                    "y": 540
+                }
+            },
+            {
+                "parentId": 209272202,
+                "wireframe": {
+                    "disabled": false,
+                    "height": 19,
+                    "id": 52129787,
+                    "style": {
+                        "color": "#000000",
+                        "fontFamily": "sans-serif",
+                        "fontSize": 14,
+                        "horizontalAlign": "left",
+                        "paddingBottom": 0,
+                        "paddingLeft": 0,
+                        "paddingRight": 0,
+                        "paddingTop": 0,
+                        "verticalAlign": "top"
+                    },
+                    "text": "PostHog/posthog-ios",
+                    "type": "text",
+                    "width": 368,
+                    "x": 66,
+                    "y": 556
+                }
+            }
+        ],
+        "removes": [
+            {
+                "id": 149659273,
+                "parentId": 47740111
+            },
+            {
+                "id": 151255663,
+                "parentId": 149659273
+            }
+        ],
+        "source": 0
+    },
+    "timestamp": 1706104140861,
+    "type": 3
+}
diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
index 95acab0a39868..ea4be158d8d05 100644
--- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
+++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
@@ -54,7 +54,7 @@ exports[`replay/transform transform can convert images 1`] = `
                     },
                     "childNodes": [
                       {
-                        "id": 101,
+                        "id": 100,
                         "textContent": "Ⱏ遲䩞㡛쓯잘ጫ䵤㥦鷁끞鈅毅┌빯湌Თ",
                         "type": 3,
                       },
@@ -239,7 +239,7 @@ exports[`replay/transform transform can convert rect with text 1`] = `
                     },
                     "childNodes": [
                       {
-                        "id": 102,
+                        "id": 100,
                         "textContent": "i am in the box",
                         "type": 3,
                       },
@@ -324,26 +324,26 @@ exports[`replay/transform transform can convert status bar 1`] = `
                     "childNodes": [
                       {
                         "attributes": {
-                          "data-rrweb-id": 109,
+                          "data-rrweb-id": 102,
                           "style": "width: 5px;",
                         },
                         "childNodes": [],
-                        "id": 109,
+                        "id": 102,
                         "tagName": "div",
                         "type": 2,
                       },
                       {
                         "attributes": {
-                          "data-rrweb-id": 107,
+                          "data-rrweb-id": 100,
                         },
                         "childNodes": [
                           {
-                            "id": 108,
+                            "id": 101,
                             "textContent": "12:00 AM",
                             "type": 3,
                           },
                         ],
-                        "id": 107,
+                        "id": 100,
                         "tagName": "div",
                         "type": 2,
                       },
@@ -360,26 +360,26 @@ exports[`replay/transform transform can convert status bar 1`] = `
                     "childNodes": [
                       {
                         "attributes": {
-                          "data-rrweb-id": 112,
+                          "data-rrweb-id": 105,
                           "style": "width: 5px;",
                         },
                         "childNodes": [],
-                        "id": 112,
+                        "id": 105,
                         "tagName": "div",
                         "type": 2,
                       },
                       {
                         "attributes": {
-                          "data-rrweb-id": 110,
+                          "data-rrweb-id": 103,
                         },
                         "childNodes": [
                           {
-                            "id": 111,
+                            "id": 104,
                             "textContent": "12:00 AM",
                             "type": 3,
                           },
                         ],
-                        "id": 110,
+                        "id": 103,
                         "tagName": "div",
                         "type": 2,
                       },
@@ -769,7 +769,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                             },
                             "childNodes": [
                               {
-                                "id": 103,
+                                "id": 100,
                                 "textContent": "first nested",
                                 "type": 3,
                               },
@@ -785,7 +785,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                             },
                             "childNodes": [
                               {
-                                "id": 104,
+                                "id": 101,
                                 "textContent": "second nested",
                                 "type": 3,
                               },
@@ -806,7 +806,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
                         },
                         "childNodes": [
                           {
-                            "id": 105,
+                            "id": 102,
                             "textContent": "third (different level) nested",
                             "type": 3,
                           },
@@ -841,6 +841,447 @@ exports[`replay/transform transform child wireframes are processed 1`] = `
 ]
 `;
 
+exports[`replay/transform transform incremental mutations de-duplicate the tree 1`] = `
+{
+  "data": {
+    "adds": [
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 142908405,
+            "style": "background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAC5CAYAAADNs4/hAAAAAXNSR0IArs4c6QAAAARzQklUCAgI
+CHwIZIgAAAWeSURBVHic7dyxqh1lGIbR77cIBuzTWKUShDSChVh7ITaWFoH0Emsr78D7sBVCBFOZ
+QMo0XoAEEshvZeeZ8cR9PDywVjsfm7d+mNkzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAADA7Vn/5mjv/fHMfDszX83MgxtdBAAAADDzbGZ+npkf1lqvzo5PA8fe++uZ+XFm
+7v73bQAAAADX8npmvllr/XR0dBg49t73Z+b3mblzwWEAAAAA1/FmZj5da7286uCDkx94POIGAAAA
+cLvuzMx3RwdngeOzy20BAAAAeG+HjeLKT1T23h/OzJ9zHkEAAAAAbtq7mflorfX6nx6e/QfHvpFJ
+AAAAANe01rqyY3g7AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT
+OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA
+PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA
+AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA
+AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyB
+AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADI
+EzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAA
+gDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMA
+AADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4
+AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8
+gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAA
+yBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAA
+AIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIED
+AAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT
+OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA
+PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA
+AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA
+AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIOwscL/6XFQAAAADHDhvFWeD47YJD
+AAAAAN7XYaNYRw/33p/PzC/jUxYAAADg9rydmS/WWk+vOjgMF2utJzPz+NKrAAAAAK7h0VHcmDl5
+g+Nve+8vZ+b7mflkZu5dYBgAAADAkT9m5vnMPFxr/XrbYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAgCN/AW0xMqHnNQceAAAAAElFTkSuQmCC
+);background-size: auto;background-repeat: no-repeatwidth: 411px;height: 70px;position: fixed;left: 0px;top: 536px;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 142908405,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 183891344,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 209272202,
+            "style": "width: 406px;height: 62px;position: fixed;left: 2px;top: 540px;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 209272202,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 142908405,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 209272202,
+            "style": "width: 406px;height: 62px;position: fixed;left: 2px;top: 540px;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 209272202,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 142908405,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 52129787,
+            "style": "color: #000000;width: 368px;height: 19px;position: fixed;left: 66px;top: 556px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 52129787,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 209272202,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 52129787,
+            "style": "color: #000000;width: 368px;height: 19px;position: fixed;left: 66px;top: 556px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 52129787,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 209272202,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "id": 103,
+          "textContent": "PostHog/posthog-ios",
+          "type": 3,
+        },
+        "parentId": 52129787,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 99571736,
+            "style": "color: #000000;width: 150px;height: 19px;position: fixed;left: 10px;top: 584px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 99571736,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 209272202,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 99571736,
+            "style": "color: #000000;width: 150px;height: 19px;position: fixed;left: 10px;top: 584px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 99571736,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 209272202,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "id": 104,
+          "textContent": "PostHog iOS integration",
+          "type": 3,
+        },
+        "parentId": 99571736,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 240124529,
+            "style": "color: #000000;width: 48px;height: 32px;position: fixed;left: 10px;top: 548px;align-items: center;justify-content: center;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 240124529,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 209272202,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "attributes": {
+            "data-rrweb-id": 240124529,
+            "style": "color: #000000;width: 48px;height: 32px;position: fixed;left: 10px;top: 548px;align-items: center;justify-content: center;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;",
+          },
+          "childNodes": [],
+          "id": 240124529,
+          "tagName": "div",
+          "type": 2,
+        },
+        "parentId": 209272202,
+      },
+      {
+        "nextId": null,
+        "node": {
+          "id": 105,
+          "textContent": "20",
+          "type": 3,
+        },
+        "parentId": 240124529,
+      },
+    ],
+    "attributes": [],
+    "removes": [
+      {
+        "id": 149659273,
+        "parentId": 47740111,
+      },
+      {
+        "id": 151255663,
+        "parentId": 149659273,
+      },
+    ],
+    "source": 0,
+    "texts": [],
+  },
+  "default": {
+    "data": {
+      "adds": [
+        {
+          "parentId": 183891344,
+          "wireframe": {
+            "childWireframes": [
+              {
+                "childWireframes": [
+                  {
+                    "disabled": false,
+                    "height": 19,
+                    "id": 52129787,
+                    "style": {
+                      "color": "#000000",
+                      "fontFamily": "sans-serif",
+                      "fontSize": 14,
+                      "horizontalAlign": "left",
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 0,
+                      "verticalAlign": "top",
+                    },
+                    "text": "PostHog/posthog-ios",
+                    "type": "text",
+                    "width": 368,
+                    "x": 66,
+                    "y": 556,
+                  },
+                  {
+                    "disabled": false,
+                    "height": 19,
+                    "id": 99571736,
+                    "style": {
+                      "color": "#000000",
+                      "fontFamily": "sans-serif",
+                      "fontSize": 14,
+                      "horizontalAlign": "left",
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 0,
+                      "verticalAlign": "top",
+                    },
+                    "text": "PostHog iOS integration",
+                    "type": "text",
+                    "width": 150,
+                    "x": 10,
+                    "y": 584,
+                  },
+                  {
+                    "disabled": false,
+                    "height": 32,
+                    "id": 240124529,
+                    "style": {
+                      "color": "#000000",
+                      "fontFamily": "sans-serif",
+                      "fontSize": 14,
+                      "horizontalAlign": "center",
+                      "paddingBottom": 6,
+                      "paddingLeft": 32,
+                      "paddingRight": 0,
+                      "paddingTop": 6,
+                      "verticalAlign": "center",
+                    },
+                    "text": "20",
+                    "type": "text",
+                    "width": 48,
+                    "x": 10,
+                    "y": 548,
+                  },
+                ],
+                "disabled": false,
+                "height": 62,
+                "id": 209272202,
+                "style": {},
+                "width": 406,
+                "x": 2,
+                "y": 540,
+              },
+            ],
+            "disabled": false,
+            "height": 70,
+            "id": 142908405,
+            "style": {
+              "backgroundImage": "iVBORw0KGgoAAAANSUhEUgAABDgAAAC5CAYAAADNs4/hAAAAAXNSR0IArs4c6QAAAARzQklUCAgI
+CHwIZIgAAAWeSURBVHic7dyxqh1lGIbR77cIBuzTWKUShDSChVh7ITaWFoH0Emsr78D7sBVCBFOZ
+QMo0XoAEEshvZeeZ8cR9PDywVjsfm7d+mNkzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAADA7Vn/5mjv/fHMfDszX83MgxtdBAAAADDzbGZ+npkf1lqvzo5PA8fe++uZ+XFm
+7v73bQAAAADX8npmvllr/XR0dBg49t73Z+b3mblzwWEAAAAA1/FmZj5da7286uCDkx94POIGAAAA
+cLvuzMx3RwdngeOzy20BAAAAeG+HjeLKT1T23h/OzJ9zHkEAAAAAbtq7mflorfX6nx6e/QfHvpFJ
+AAAAANe01rqyY3g7AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT
+OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA
+PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA
+AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA
+AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyB
+AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADI
+EzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAA
+gDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMA
+AADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4
+AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8
+gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAA
+yBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAA
+AIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIED
+AAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT
+OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA
+PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA
+AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA
+AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIOwscL/6XFQAAAADHDhvFWeD47YJD
+AAAAAN7XYaNYRw/33p/PzC/jUxYAAADg9rydmS/WWk+vOjgMF2utJzPz+NKrAAAAAK7h0VHcmDl5
+g+Nve+8vZ+b7mflkZu5dYBgAAADAkT9m5vnMPFxr/XrbYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAgCN/AW0xMqHnNQceAAAAAElFTkSuQmCC
+",
+            },
+            "width": 411,
+            "x": 0,
+            "y": 536,
+          },
+        },
+        {
+          "parentId": 142908405,
+          "wireframe": {
+            "childWireframes": [
+              {
+                "disabled": false,
+                "height": 19,
+                "id": 52129787,
+                "style": {
+                  "color": "#000000",
+                  "fontFamily": "sans-serif",
+                  "fontSize": 14,
+                  "horizontalAlign": "left",
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 0,
+                  "verticalAlign": "top",
+                },
+                "text": "PostHog/posthog-ios",
+                "type": "text",
+                "width": 368,
+                "x": 66,
+                "y": 556,
+              },
+              {
+                "disabled": false,
+                "height": 19,
+                "id": 99571736,
+                "style": {
+                  "color": "#000000",
+                  "fontFamily": "sans-serif",
+                  "fontSize": 14,
+                  "horizontalAlign": "left",
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 0,
+                  "verticalAlign": "top",
+                },
+                "text": "PostHog iOS integration",
+                "type": "text",
+                "width": 150,
+                "x": 10,
+                "y": 584,
+              },
+              {
+                "disabled": false,
+                "height": 32,
+                "id": 240124529,
+                "style": {
+                  "color": "#000000",
+                  "fontFamily": "sans-serif",
+                  "fontSize": 14,
+                  "horizontalAlign": "center",
+                  "paddingBottom": 6,
+                  "paddingLeft": 32,
+                  "paddingRight": 0,
+                  "paddingTop": 6,
+                  "verticalAlign": "center",
+                },
+                "text": "20",
+                "type": "text",
+                "width": 48,
+                "x": 10,
+                "y": 548,
+              },
+            ],
+            "disabled": false,
+            "height": 62,
+            "id": 209272202,
+            "style": {},
+            "width": 406,
+            "x": 2,
+            "y": 540,
+          },
+        },
+        {
+          "parentId": 209272202,
+          "wireframe": {
+            "disabled": false,
+            "height": 19,
+            "id": 52129787,
+            "style": {
+              "color": "#000000",
+              "fontFamily": "sans-serif",
+              "fontSize": 14,
+              "horizontalAlign": "left",
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 0,
+              "verticalAlign": "top",
+            },
+            "text": "PostHog/posthog-ios",
+            "type": "text",
+            "width": 368,
+            "x": 66,
+            "y": 556,
+          },
+        },
+      ],
+      "removes": [
+        {
+          "id": 149659273,
+          "parentId": 47740111,
+        },
+        {
+          "id": 151255663,
+          "parentId": 149659273,
+        },
+      ],
+      "source": 0,
+    },
+    "timestamp": 1706104140861,
+    "type": 3,
+  },
+  "timestamp": 1706104140861,
+  "type": 3,
+}
+`;
+
 exports[`replay/transform transform inputs buttons with nested elements 1`] = `
 {
   "data": {
@@ -897,7 +1338,7 @@ exports[`replay/transform transform inputs buttons with nested elements 1`] = `
                   },
                   "childNodes": [
                     {
-                      "id": 113,
+                      "id": 100,
                       "textContent": "click me",
                       "type": 3,
                     },
@@ -1046,7 +1487,7 @@ exports[`replay/transform transform inputs input - button - click me 1`] = `
                   },
                   "childNodes": [
                     {
-                      "id": 290,
+                      "id": 100,
                       "textContent": "click me",
                       "type": 3,
                     },
@@ -1114,7 +1555,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 267,
+                    "data-rrweb-id": 101,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
@@ -1131,12 +1572,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = `
                       "type": 2,
                     },
                     {
-                      "id": 266,
+                      "id": 100,
                       "textContent": "first",
                       "type": 3,
                     },
                   ],
-                  "id": 267,
+                  "id": 101,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -1199,7 +1640,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 269,
+                    "data-rrweb-id": 101,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
@@ -1215,12 +1656,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = `
                       "type": 2,
                     },
                     {
-                      "id": 268,
+                      "id": 100,
                       "textContent": "second",
                       "type": 3,
                     },
                   ],
-                  "id": 269,
+                  "id": 101,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -1283,7 +1724,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 271,
+                    "data-rrweb-id": 101,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
@@ -1301,12 +1742,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = `
                       "type": 2,
                     },
                     {
-                      "id": 270,
+                      "id": 100,
                       "textContent": "third",
                       "type": 3,
                     },
                   ],
-                  "id": 271,
+                  "id": 101,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -1651,7 +2092,7 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = `
                   "childNodes": [
                     {
                       "attributes": {
-                        "data-rrweb-id": 297,
+                        "data-rrweb-id": 102,
                         "style": "background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;border: 4px solid #35373e;border-radius: 50%;border-top: 4px solid #fff;animation: spin 2s linear infinite;",
                       },
                       "childNodes": [
@@ -1661,17 +2102,17 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = `
                           },
                           "childNodes": [
                             {
-                              "id": 296,
+                              "id": 101,
                               "textContent": "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }",
                               "type": 3,
                             },
                           ],
-                          "id": 295,
+                          "id": 100,
                           "tagName": "style",
                           "type": 2,
                         },
                       ],
-                      "id": 297,
+                      "id": 102,
                       "tagName": "div",
                       "type": 2,
                     },
@@ -2026,32 +2467,32 @@ exports[`replay/transform transform inputs input - select - hello 1`] = `
                   "childNodes": [
                     {
                       "attributes": {
-                        "data-rrweb-id": 291,
+                        "data-rrweb-id": 100,
                         "selected": true,
                       },
                       "childNodes": [
                         {
-                          "id": 292,
+                          "id": 101,
                           "textContent": "hello",
                           "type": 3,
                         },
                       ],
-                      "id": 291,
+                      "id": 100,
                       "tagName": "option",
                       "type": 2,
                     },
                     {
                       "attributes": {
-                        "data-rrweb-id": 293,
+                        "data-rrweb-id": 102,
                       },
                       "childNodes": [
                         {
-                          "id": 294,
+                          "id": 103,
                           "textContent": "world",
                           "type": 3,
                         },
                       ],
-                      "id": 293,
+                      "id": 102,
                       "tagName": "option",
                       "type": 2,
                     },
@@ -2465,12 +2906,12 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 276,
+                    "data-rrweb-id": 104,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
                     {
-                      "id": 275,
+                      "id": 103,
                       "textContent": "first",
                       "type": 3,
                     },
@@ -2482,34 +2923,34 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "data-rrweb-id": 272,
+                            "data-rrweb-id": 100,
                             "style": "position:relative;width:100%;height:100%;",
                           },
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 273,
+                                "data-rrweb-id": 101,
                                 "data-toggle-part": "slider",
                                 "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#1d4aff;opacity: 0.2;border-radius:7.5%;",
                               },
                               "childNodes": [],
-                              "id": 273,
+                              "id": 101,
                               "tagName": "div",
                               "type": 2,
                             },
                             {
                               "attributes": {
-                                "data-rrweb-id": 274,
+                                "data-rrweb-id": 102,
                                 "data-toggle-part": "handle",
                                 "style": "position:absolute;top:1.5%;right:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#1d4aff;border:2px solid #1d4aff;border-radius:50%;",
                               },
                               "childNodes": [],
-                              "id": 274,
+                              "id": 102,
                               "tagName": "div",
                               "type": 2,
                             },
                           ],
-                          "id": 272,
+                          "id": 100,
                           "tagName": "div",
                           "type": 2,
                         },
@@ -2519,7 +2960,7 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 276,
+                  "id": 104,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -2582,12 +3023,12 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 281,
+                    "data-rrweb-id": 104,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
                     {
-                      "id": 280,
+                      "id": 103,
                       "textContent": "second",
                       "type": 3,
                     },
@@ -2599,34 +3040,34 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "data-rrweb-id": 277,
+                            "data-rrweb-id": 100,
                             "style": "position:relative;width:100%;height:100%;",
                           },
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 278,
+                                "data-rrweb-id": 101,
                                 "data-toggle-part": "slider",
                                 "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#f3f4ef;opacity: 0.2;border-radius:7.5%;",
                               },
                               "childNodes": [],
-                              "id": 278,
+                              "id": 101,
                               "tagName": "div",
                               "type": 2,
                             },
                             {
                               "attributes": {
-                                "data-rrweb-id": 279,
+                                "data-rrweb-id": 102,
                                 "data-toggle-part": "handle",
                                 "style": "position:absolute;top:1.5%;left:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#f3f4ef;border:2px solid #f3f4ef;border-radius:50%;",
                               },
                               "childNodes": [],
-                              "id": 279,
+                              "id": 102,
                               "tagName": "div",
                               "type": 2,
                             },
                           ],
-                          "id": 277,
+                          "id": 100,
                           "tagName": "div",
                           "type": 2,
                         },
@@ -2636,7 +3077,7 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 281,
+                  "id": 104,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -2699,12 +3140,12 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 286,
+                    "data-rrweb-id": 104,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
                     {
-                      "id": 285,
+                      "id": 103,
                       "textContent": "third",
                       "type": 3,
                     },
@@ -2716,34 +3157,34 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
                       "childNodes": [
                         {
                           "attributes": {
-                            "data-rrweb-id": 282,
+                            "data-rrweb-id": 100,
                             "style": "position:relative;width:100%;height:100%;",
                           },
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 283,
+                                "data-rrweb-id": 101,
                                 "data-toggle-part": "slider",
                                 "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#1d4aff;opacity: 0.2;border-radius:7.5%;",
                               },
                               "childNodes": [],
-                              "id": 283,
+                              "id": 101,
                               "tagName": "div",
                               "type": 2,
                             },
                             {
                               "attributes": {
-                                "data-rrweb-id": 284,
+                                "data-rrweb-id": 102,
                                 "data-toggle-part": "handle",
                                 "style": "position:absolute;top:1.5%;right:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#1d4aff;border:2px solid #1d4aff;border-radius:50%;",
                               },
                               "childNodes": [],
-                              "id": 284,
+                              "id": 102,
                               "tagName": "div",
                               "type": 2,
                             },
                           ],
-                          "id": 282,
+                          "id": 100,
                           "tagName": "div",
                           "type": 2,
                         },
@@ -2753,7 +3194,7 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
                       "type": 2,
                     },
                   ],
-                  "id": 286,
+                  "id": 104,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -2822,34 +3263,34 @@ exports[`replay/transform transform inputs input - toggle - $value 4`] = `
                   "childNodes": [
                     {
                       "attributes": {
-                        "data-rrweb-id": 287,
+                        "data-rrweb-id": 100,
                         "style": "position:relative;width:100%;height:100%;",
                       },
                       "childNodes": [
                         {
                           "attributes": {
-                            "data-rrweb-id": 288,
+                            "data-rrweb-id": 101,
                             "data-toggle-part": "slider",
                             "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#1d4aff;opacity: 0.2;border-radius:7.5%;",
                           },
                           "childNodes": [],
-                          "id": 288,
+                          "id": 101,
                           "tagName": "div",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 289,
+                            "data-rrweb-id": 102,
                             "data-toggle-part": "handle",
                             "style": "position:absolute;top:1.5%;right:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#1d4aff;border:2px solid #1d4aff;border-radius:50%;",
                           },
                           "childNodes": [],
-                          "id": 289,
+                          "id": 102,
                           "tagName": "div",
                           "type": 2,
                         },
                       ],
-                      "id": 287,
+                      "id": 100,
                       "tagName": "div",
                       "type": 2,
                     },
@@ -2969,11 +3410,11 @@ exports[`replay/transform transform inputs isolated add mutation 1`] = `
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 216,
+            "data-rrweb-id": 199,
             "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;",
           },
           "childNodes": [],
-          "id": 216,
+          "id": 199,
           "tagName": "div",
           "type": 2,
         },
@@ -2983,11 +3424,11 @@ exports[`replay/transform transform inputs isolated add mutation 1`] = `
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 216,
+            "data-rrweb-id": 199,
             "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;",
           },
           "childNodes": [],
-          "id": 216,
+          "id": 199,
           "tagName": "div",
           "type": 2,
         },
@@ -2997,1213 +3438,1213 @@ exports[`replay/transform transform inputs isolated add mutation 1`] = `
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 168,
+            "data-rrweb-id": 151,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 168,
+          "id": 151,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 168,
+            "data-rrweb-id": 151,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 168,
+          "id": 151,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 169,
+            "data-rrweb-id": 152,
           },
           "childNodes": [],
-          "id": 169,
+          "id": 152,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 168,
+        "parentId": 151,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 169,
+            "data-rrweb-id": 152,
           },
           "childNodes": [],
-          "id": 169,
+          "id": 152,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 168,
+        "parentId": 151,
       },
       {
         "nextId": null,
         "node": {
-          "id": 171,
+          "id": 154,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 169,
+        "parentId": 152,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 170,
+            "data-rrweb-id": 153,
           },
           "childNodes": [],
-          "id": 170,
+          "id": 153,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 168,
+        "parentId": 151,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 170,
+            "data-rrweb-id": 153,
           },
           "childNodes": [],
-          "id": 170,
+          "id": 153,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 168,
+        "parentId": 151,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 172,
+            "data-rrweb-id": 155,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 172,
+          "id": 155,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 172,
+            "data-rrweb-id": 155,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 172,
+          "id": 155,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 173,
+            "data-rrweb-id": 156,
           },
           "childNodes": [],
-          "id": 173,
+          "id": 156,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 172,
+        "parentId": 155,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 173,
+            "data-rrweb-id": 156,
           },
           "childNodes": [],
-          "id": 173,
+          "id": 156,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 172,
+        "parentId": 155,
       },
       {
         "nextId": null,
         "node": {
-          "id": 175,
+          "id": 158,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 173,
+        "parentId": 156,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 174,
+            "data-rrweb-id": 157,
           },
           "childNodes": [],
-          "id": 174,
+          "id": 157,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 172,
+        "parentId": 155,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 174,
+            "data-rrweb-id": 157,
           },
           "childNodes": [],
-          "id": 174,
+          "id": 157,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 172,
+        "parentId": 155,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 176,
+            "data-rrweb-id": 159,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 176,
+          "id": 159,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 176,
+            "data-rrweb-id": 159,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 176,
+          "id": 159,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 177,
+            "data-rrweb-id": 160,
           },
           "childNodes": [],
-          "id": 177,
+          "id": 160,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 176,
+        "parentId": 159,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 177,
+            "data-rrweb-id": 160,
           },
           "childNodes": [],
-          "id": 177,
+          "id": 160,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 176,
+        "parentId": 159,
       },
       {
         "nextId": null,
         "node": {
-          "id": 179,
+          "id": 162,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 177,
+        "parentId": 160,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 178,
+            "data-rrweb-id": 161,
           },
           "childNodes": [],
-          "id": 178,
+          "id": 161,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 176,
+        "parentId": 159,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 178,
+            "data-rrweb-id": 161,
           },
           "childNodes": [],
-          "id": 178,
+          "id": 161,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 176,
+        "parentId": 159,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 180,
+            "data-rrweb-id": 163,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 180,
+          "id": 163,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 180,
+            "data-rrweb-id": 163,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 180,
+          "id": 163,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 181,
+            "data-rrweb-id": 164,
           },
           "childNodes": [],
-          "id": 181,
+          "id": 164,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 180,
+        "parentId": 163,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 181,
+            "data-rrweb-id": 164,
           },
           "childNodes": [],
-          "id": 181,
+          "id": 164,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 180,
+        "parentId": 163,
       },
       {
         "nextId": null,
         "node": {
-          "id": 183,
+          "id": 166,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 181,
+        "parentId": 164,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 182,
+            "data-rrweb-id": 165,
           },
           "childNodes": [],
-          "id": 182,
+          "id": 165,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 180,
+        "parentId": 163,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 182,
+            "data-rrweb-id": 165,
           },
           "childNodes": [],
-          "id": 182,
+          "id": 165,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 180,
+        "parentId": 163,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 184,
+            "data-rrweb-id": 167,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 184,
+          "id": 167,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 184,
+            "data-rrweb-id": 167,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 184,
+          "id": 167,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 185,
+            "data-rrweb-id": 168,
           },
           "childNodes": [],
-          "id": 185,
+          "id": 168,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 184,
+        "parentId": 167,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 185,
+            "data-rrweb-id": 168,
           },
           "childNodes": [],
-          "id": 185,
+          "id": 168,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 184,
+        "parentId": 167,
       },
       {
         "nextId": null,
         "node": {
-          "id": 187,
+          "id": 170,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 185,
+        "parentId": 168,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 186,
+            "data-rrweb-id": 169,
           },
           "childNodes": [],
-          "id": 186,
+          "id": 169,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 184,
+        "parentId": 167,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 186,
+            "data-rrweb-id": 169,
           },
           "childNodes": [],
-          "id": 186,
+          "id": 169,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 184,
+        "parentId": 167,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 188,
+            "data-rrweb-id": 171,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 188,
+          "id": 171,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 188,
+            "data-rrweb-id": 171,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 188,
+          "id": 171,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 189,
+            "data-rrweb-id": 172,
           },
           "childNodes": [],
-          "id": 189,
+          "id": 172,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 188,
+        "parentId": 171,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 189,
+            "data-rrweb-id": 172,
           },
           "childNodes": [],
-          "id": 189,
+          "id": 172,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 188,
+        "parentId": 171,
       },
       {
         "nextId": null,
         "node": {
-          "id": 191,
+          "id": 174,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 189,
+        "parentId": 172,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 190,
+            "data-rrweb-id": 173,
           },
           "childNodes": [],
-          "id": 190,
+          "id": 173,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 188,
+        "parentId": 171,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 190,
+            "data-rrweb-id": 173,
           },
           "childNodes": [],
-          "id": 190,
+          "id": 173,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 188,
+        "parentId": 171,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 192,
+            "data-rrweb-id": 175,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 192,
+          "id": 175,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 192,
+            "data-rrweb-id": 175,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 192,
+          "id": 175,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 193,
+            "data-rrweb-id": 176,
           },
           "childNodes": [],
-          "id": 193,
+          "id": 176,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 192,
+        "parentId": 175,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 193,
+            "data-rrweb-id": 176,
           },
           "childNodes": [],
-          "id": 193,
+          "id": 176,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 192,
+        "parentId": 175,
       },
       {
         "nextId": null,
         "node": {
-          "id": 195,
+          "id": 178,
           "textContent": "half-filled star",
           "type": 3,
         },
-        "parentId": 193,
+        "parentId": 176,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 194,
+            "data-rrweb-id": 177,
           },
           "childNodes": [],
-          "id": 194,
+          "id": 177,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 192,
+        "parentId": 175,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 194,
+            "data-rrweb-id": 177,
           },
           "childNodes": [],
-          "id": 194,
+          "id": 177,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 192,
+        "parentId": 175,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 196,
+            "data-rrweb-id": 179,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 196,
+          "id": 179,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 196,
+            "data-rrweb-id": 179,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 196,
+          "id": 179,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 197,
+            "data-rrweb-id": 180,
           },
           "childNodes": [],
-          "id": 197,
+          "id": 180,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 196,
+        "parentId": 179,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 197,
+            "data-rrweb-id": 180,
           },
           "childNodes": [],
-          "id": 197,
+          "id": 180,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 196,
+        "parentId": 179,
       },
       {
         "nextId": null,
         "node": {
-          "id": 199,
+          "id": 182,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 197,
+        "parentId": 180,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 198,
+            "data-rrweb-id": 181,
           },
           "childNodes": [],
-          "id": 198,
+          "id": 181,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 196,
+        "parentId": 179,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 198,
+            "data-rrweb-id": 181,
           },
           "childNodes": [],
-          "id": 198,
+          "id": 181,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 196,
+        "parentId": 179,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 200,
+            "data-rrweb-id": 183,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 200,
+          "id": 183,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 200,
+            "data-rrweb-id": 183,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 200,
+          "id": 183,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 201,
+            "data-rrweb-id": 184,
           },
           "childNodes": [],
-          "id": 201,
+          "id": 184,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 200,
+        "parentId": 183,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 201,
+            "data-rrweb-id": 184,
           },
           "childNodes": [],
-          "id": 201,
+          "id": 184,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 200,
+        "parentId": 183,
       },
       {
         "nextId": null,
         "node": {
-          "id": 203,
+          "id": 186,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 201,
+        "parentId": 184,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 202,
+            "data-rrweb-id": 185,
           },
           "childNodes": [],
-          "id": 202,
+          "id": 185,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 200,
+        "parentId": 183,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 202,
+            "data-rrweb-id": 185,
           },
           "childNodes": [],
-          "id": 202,
+          "id": 185,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 200,
+        "parentId": 183,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 204,
+            "data-rrweb-id": 187,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 204,
+          "id": 187,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 204,
+            "data-rrweb-id": 187,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 204,
+          "id": 187,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 205,
+            "data-rrweb-id": 188,
           },
           "childNodes": [],
-          "id": 205,
+          "id": 188,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 204,
+        "parentId": 187,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 205,
+            "data-rrweb-id": 188,
           },
           "childNodes": [],
-          "id": 205,
+          "id": 188,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 204,
+        "parentId": 187,
       },
       {
         "nextId": null,
         "node": {
-          "id": 207,
+          "id": 190,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 205,
+        "parentId": 188,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 206,
+            "data-rrweb-id": 189,
           },
           "childNodes": [],
-          "id": 206,
+          "id": 189,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 204,
+        "parentId": 187,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 206,
+            "data-rrweb-id": 189,
           },
           "childNodes": [],
-          "id": 206,
+          "id": 189,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 204,
+        "parentId": 187,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 208,
+            "data-rrweb-id": 191,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 208,
+          "id": 191,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 208,
+            "data-rrweb-id": 191,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 208,
+          "id": 191,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 209,
+            "data-rrweb-id": 192,
           },
           "childNodes": [],
-          "id": 209,
+          "id": 192,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 208,
+        "parentId": 191,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 209,
+            "data-rrweb-id": 192,
           },
           "childNodes": [],
-          "id": 209,
+          "id": 192,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 208,
+        "parentId": 191,
       },
       {
         "nextId": null,
         "node": {
-          "id": 211,
+          "id": 194,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 209,
+        "parentId": 192,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 210,
+            "data-rrweb-id": 193,
           },
           "childNodes": [],
-          "id": 210,
+          "id": 193,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 208,
+        "parentId": 191,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 210,
+            "data-rrweb-id": 193,
           },
           "childNodes": [],
-          "id": 210,
+          "id": 193,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 208,
+        "parentId": 191,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 212,
+            "data-rrweb-id": 195,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 212,
+          "id": 195,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 212,
+            "data-rrweb-id": 195,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 212,
+          "id": 195,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 216,
+        "parentId": 199,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 213,
+            "data-rrweb-id": 196,
           },
           "childNodes": [],
-          "id": 213,
+          "id": 196,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 212,
+        "parentId": 195,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 213,
+            "data-rrweb-id": 196,
           },
           "childNodes": [],
-          "id": 213,
+          "id": 196,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 212,
+        "parentId": 195,
       },
       {
         "nextId": null,
         "node": {
-          "id": 215,
+          "id": 198,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 213,
+        "parentId": 196,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 214,
+            "data-rrweb-id": 197,
           },
           "childNodes": [],
-          "id": 214,
+          "id": 197,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 212,
+        "parentId": 195,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 214,
+            "data-rrweb-id": 197,
           },
           "childNodes": [],
-          "id": 214,
+          "id": 197,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 212,
+        "parentId": 195,
       },
     ],
     "attributes": [],
@@ -4254,11 +4695,11 @@ exports[`replay/transform transform inputs isolated update mutation 1`] = `
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 265,
+            "data-rrweb-id": 248,
             "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;",
           },
           "childNodes": [],
-          "id": 265,
+          "id": 248,
           "tagName": "div",
           "type": 2,
         },
@@ -4268,11 +4709,11 @@ exports[`replay/transform transform inputs isolated update mutation 1`] = `
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 265,
+            "data-rrweb-id": 248,
             "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;",
           },
           "childNodes": [],
-          "id": 265,
+          "id": 248,
           "tagName": "div",
           "type": 2,
         },
@@ -4282,1213 +4723,1213 @@ exports[`replay/transform transform inputs isolated update mutation 1`] = `
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 217,
+            "data-rrweb-id": 200,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 217,
+          "id": 200,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 217,
+            "data-rrweb-id": 200,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 217,
+          "id": 200,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 218,
+            "data-rrweb-id": 201,
           },
           "childNodes": [],
-          "id": 218,
+          "id": 201,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 217,
+        "parentId": 200,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 218,
+            "data-rrweb-id": 201,
           },
           "childNodes": [],
-          "id": 218,
+          "id": 201,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 217,
+        "parentId": 200,
       },
       {
         "nextId": null,
         "node": {
-          "id": 220,
+          "id": 203,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 218,
+        "parentId": 201,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 219,
+            "data-rrweb-id": 202,
           },
           "childNodes": [],
-          "id": 219,
+          "id": 202,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 217,
+        "parentId": 200,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 219,
+            "data-rrweb-id": 202,
           },
           "childNodes": [],
-          "id": 219,
+          "id": 202,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 217,
+        "parentId": 200,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 221,
+            "data-rrweb-id": 204,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 221,
+          "id": 204,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 221,
+            "data-rrweb-id": 204,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 221,
+          "id": 204,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 222,
+            "data-rrweb-id": 205,
           },
           "childNodes": [],
-          "id": 222,
+          "id": 205,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 221,
+        "parentId": 204,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 222,
+            "data-rrweb-id": 205,
           },
           "childNodes": [],
-          "id": 222,
+          "id": 205,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 221,
+        "parentId": 204,
       },
       {
         "nextId": null,
         "node": {
-          "id": 224,
+          "id": 207,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 222,
+        "parentId": 205,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 223,
+            "data-rrweb-id": 206,
           },
           "childNodes": [],
-          "id": 223,
+          "id": 206,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 221,
+        "parentId": 204,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 223,
+            "data-rrweb-id": 206,
           },
           "childNodes": [],
-          "id": 223,
+          "id": 206,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 221,
+        "parentId": 204,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 225,
+            "data-rrweb-id": 208,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 225,
+          "id": 208,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 225,
+            "data-rrweb-id": 208,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 225,
+          "id": 208,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 226,
+            "data-rrweb-id": 209,
           },
           "childNodes": [],
-          "id": 226,
+          "id": 209,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 225,
+        "parentId": 208,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 226,
+            "data-rrweb-id": 209,
           },
           "childNodes": [],
-          "id": 226,
+          "id": 209,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 225,
+        "parentId": 208,
       },
       {
         "nextId": null,
         "node": {
-          "id": 228,
+          "id": 211,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 226,
+        "parentId": 209,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 227,
+            "data-rrweb-id": 210,
           },
           "childNodes": [],
-          "id": 227,
+          "id": 210,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 225,
+        "parentId": 208,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 227,
+            "data-rrweb-id": 210,
           },
           "childNodes": [],
-          "id": 227,
+          "id": 210,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 225,
+        "parentId": 208,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 229,
+            "data-rrweb-id": 212,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 229,
+          "id": 212,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 229,
+            "data-rrweb-id": 212,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 229,
+          "id": 212,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 230,
+            "data-rrweb-id": 213,
           },
           "childNodes": [],
-          "id": 230,
+          "id": 213,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 229,
+        "parentId": 212,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 230,
+            "data-rrweb-id": 213,
           },
           "childNodes": [],
-          "id": 230,
+          "id": 213,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 229,
+        "parentId": 212,
       },
       {
         "nextId": null,
         "node": {
-          "id": 232,
+          "id": 215,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 230,
+        "parentId": 213,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 231,
+            "data-rrweb-id": 214,
           },
           "childNodes": [],
-          "id": 231,
+          "id": 214,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 229,
+        "parentId": 212,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 231,
+            "data-rrweb-id": 214,
           },
           "childNodes": [],
-          "id": 231,
+          "id": 214,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 229,
+        "parentId": 212,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 233,
+            "data-rrweb-id": 216,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 233,
+          "id": 216,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 233,
+            "data-rrweb-id": 216,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 233,
+          "id": 216,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 234,
+            "data-rrweb-id": 217,
           },
           "childNodes": [],
-          "id": 234,
+          "id": 217,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 233,
+        "parentId": 216,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 234,
+            "data-rrweb-id": 217,
           },
           "childNodes": [],
-          "id": 234,
+          "id": 217,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 233,
+        "parentId": 216,
       },
       {
         "nextId": null,
         "node": {
-          "id": 236,
+          "id": 219,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 234,
+        "parentId": 217,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 235,
+            "data-rrweb-id": 218,
           },
           "childNodes": [],
-          "id": 235,
+          "id": 218,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 233,
+        "parentId": 216,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 235,
+            "data-rrweb-id": 218,
           },
           "childNodes": [],
-          "id": 235,
+          "id": 218,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 233,
+        "parentId": 216,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 237,
+            "data-rrweb-id": 220,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 237,
+          "id": 220,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 237,
+            "data-rrweb-id": 220,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 237,
+          "id": 220,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 238,
+            "data-rrweb-id": 221,
           },
           "childNodes": [],
-          "id": 238,
+          "id": 221,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 237,
+        "parentId": 220,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 238,
+            "data-rrweb-id": 221,
           },
           "childNodes": [],
-          "id": 238,
+          "id": 221,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 237,
+        "parentId": 220,
       },
       {
         "nextId": null,
         "node": {
-          "id": 240,
+          "id": 223,
           "textContent": "filled star",
           "type": 3,
         },
-        "parentId": 238,
+        "parentId": 221,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 239,
+            "data-rrweb-id": 222,
           },
           "childNodes": [],
-          "id": 239,
+          "id": 222,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 237,
+        "parentId": 220,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-            "data-rrweb-id": 239,
+            "data-rrweb-id": 222,
           },
           "childNodes": [],
-          "id": 239,
+          "id": 222,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 237,
+        "parentId": 220,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 241,
+            "data-rrweb-id": 224,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 241,
+          "id": 224,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 241,
+            "data-rrweb-id": 224,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 241,
+          "id": 224,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 242,
+            "data-rrweb-id": 225,
           },
           "childNodes": [],
-          "id": 242,
+          "id": 225,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 241,
+        "parentId": 224,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 242,
+            "data-rrweb-id": 225,
           },
           "childNodes": [],
-          "id": 242,
+          "id": 225,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 241,
+        "parentId": 224,
       },
       {
         "nextId": null,
         "node": {
-          "id": 244,
+          "id": 227,
           "textContent": "half-filled star",
           "type": 3,
         },
-        "parentId": 242,
+        "parentId": 225,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 243,
+            "data-rrweb-id": 226,
           },
           "childNodes": [],
-          "id": 243,
+          "id": 226,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 241,
+        "parentId": 224,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 243,
+            "data-rrweb-id": 226,
           },
           "childNodes": [],
-          "id": 243,
+          "id": 226,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 241,
+        "parentId": 224,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 245,
+            "data-rrweb-id": 228,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 245,
+          "id": 228,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 245,
+            "data-rrweb-id": 228,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 245,
+          "id": 228,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 246,
+            "data-rrweb-id": 229,
           },
           "childNodes": [],
-          "id": 246,
+          "id": 229,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 245,
+        "parentId": 228,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 246,
+            "data-rrweb-id": 229,
           },
           "childNodes": [],
-          "id": 246,
+          "id": 229,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 245,
+        "parentId": 228,
       },
       {
         "nextId": null,
         "node": {
-          "id": 248,
+          "id": 231,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 246,
+        "parentId": 229,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 247,
+            "data-rrweb-id": 230,
           },
           "childNodes": [],
-          "id": 247,
+          "id": 230,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 245,
+        "parentId": 228,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 247,
+            "data-rrweb-id": 230,
           },
           "childNodes": [],
-          "id": 247,
+          "id": 230,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 245,
+        "parentId": 228,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 249,
+            "data-rrweb-id": 232,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 249,
+          "id": 232,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 249,
+            "data-rrweb-id": 232,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 249,
+          "id": 232,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 250,
+            "data-rrweb-id": 233,
           },
           "childNodes": [],
-          "id": 250,
+          "id": 233,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 249,
+        "parentId": 232,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 250,
+            "data-rrweb-id": 233,
           },
           "childNodes": [],
-          "id": 250,
+          "id": 233,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 249,
+        "parentId": 232,
       },
       {
         "nextId": null,
         "node": {
-          "id": 252,
+          "id": 235,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 250,
+        "parentId": 233,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 251,
+            "data-rrweb-id": 234,
           },
           "childNodes": [],
-          "id": 251,
+          "id": 234,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 249,
+        "parentId": 232,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 251,
+            "data-rrweb-id": 234,
           },
           "childNodes": [],
-          "id": 251,
+          "id": 234,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 249,
+        "parentId": 232,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 253,
+            "data-rrweb-id": 236,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 253,
+          "id": 236,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 253,
+            "data-rrweb-id": 236,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 253,
+          "id": 236,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 254,
+            "data-rrweb-id": 237,
           },
           "childNodes": [],
-          "id": 254,
+          "id": 237,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 253,
+        "parentId": 236,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 254,
+            "data-rrweb-id": 237,
           },
           "childNodes": [],
-          "id": 254,
+          "id": 237,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 253,
+        "parentId": 236,
       },
       {
         "nextId": null,
         "node": {
-          "id": 256,
+          "id": 239,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 254,
+        "parentId": 237,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 255,
+            "data-rrweb-id": 238,
           },
           "childNodes": [],
-          "id": 255,
+          "id": 238,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 253,
+        "parentId": 236,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 255,
+            "data-rrweb-id": 238,
           },
           "childNodes": [],
-          "id": 255,
+          "id": 238,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 253,
+        "parentId": 236,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 257,
+            "data-rrweb-id": 240,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 257,
+          "id": 240,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 257,
+            "data-rrweb-id": 240,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 257,
+          "id": 240,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 258,
+            "data-rrweb-id": 241,
           },
           "childNodes": [],
-          "id": 258,
+          "id": 241,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 257,
+        "parentId": 240,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 258,
+            "data-rrweb-id": 241,
           },
           "childNodes": [],
-          "id": 258,
+          "id": 241,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 257,
+        "parentId": 240,
       },
       {
         "nextId": null,
         "node": {
-          "id": 260,
+          "id": 243,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 258,
+        "parentId": 241,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 259,
+            "data-rrweb-id": 242,
           },
           "childNodes": [],
-          "id": 259,
+          "id": 242,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 257,
+        "parentId": 240,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 259,
+            "data-rrweb-id": 242,
           },
           "childNodes": [],
-          "id": 259,
+          "id": 242,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 257,
+        "parentId": 240,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 261,
+            "data-rrweb-id": 244,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 261,
+          "id": 244,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 261,
+            "data-rrweb-id": 244,
             "fill": "currentColor",
             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
             "viewBox": "0 0 24 24",
           },
           "childNodes": [],
-          "id": 261,
+          "id": 244,
           "isSVG": true,
           "tagName": "svg",
           "type": 2,
         },
-        "parentId": 265,
+        "parentId": 248,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 262,
+            "data-rrweb-id": 245,
           },
           "childNodes": [],
-          "id": 262,
+          "id": 245,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 261,
+        "parentId": 244,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
-            "data-rrweb-id": 262,
+            "data-rrweb-id": 245,
           },
           "childNodes": [],
-          "id": 262,
+          "id": 245,
           "isSVG": true,
           "tagName": "title",
           "type": 2,
         },
-        "parentId": 261,
+        "parentId": 244,
       },
       {
         "nextId": null,
         "node": {
-          "id": 264,
+          "id": 247,
           "textContent": "empty star",
           "type": 3,
         },
-        "parentId": 262,
+        "parentId": 245,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 263,
+            "data-rrweb-id": 246,
           },
           "childNodes": [],
-          "id": 263,
+          "id": 246,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 261,
+        "parentId": 244,
       },
       {
         "nextId": null,
         "node": {
           "attributes": {
             "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-            "data-rrweb-id": 263,
+            "data-rrweb-id": 246,
           },
           "childNodes": [],
-          "id": 263,
+          "id": 246,
           "isSVG": true,
           "tagName": "path",
           "type": 2,
         },
-        "parentId": 261,
+        "parentId": 244,
       },
     ],
     "attributes": [],
@@ -5519,7 +5960,7 @@ exports[`replay/transform transform inputs open keyboard custom event 1`] = `
           },
           "childNodes": [
             {
-              "id": 166,
+              "id": 149,
               "textContent": "keyboard",
               "type": 3,
             },
@@ -5533,7 +5974,7 @@ exports[`replay/transform transform inputs open keyboard custom event 1`] = `
       {
         "nextId": null,
         "node": {
-          "id": 167,
+          "id": 150,
           "textContent": "keyboard",
           "type": 3,
         },
@@ -5594,7 +6035,7 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`]
                   },
                   "childNodes": [
                     {
-                      "id": 298,
+                      "id": 100,
                       "textContent": "hello",
                       "type": 3,
                     },
@@ -5668,13 +6109,13 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                   "childNodes": [
                     {
                       "attributes": {
-                        "data-rrweb-id": 165,
+                        "data-rrweb-id": 148,
                         "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;",
                       },
                       "childNodes": [
                         {
                           "attributes": {
-                            "data-rrweb-id": 117,
+                            "data-rrweb-id": 100,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5682,16 +6123,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 118,
+                                "data-rrweb-id": 101,
                               },
                               "childNodes": [
                                 {
-                                  "id": 120,
+                                  "id": 103,
                                   "textContent": "filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 118,
+                              "id": 101,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5699,23 +6140,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-                                "data-rrweb-id": 119,
+                                "data-rrweb-id": 102,
                               },
                               "childNodes": [],
-                              "id": 119,
+                              "id": 102,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 117,
+                          "id": 100,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 121,
+                            "data-rrweb-id": 104,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5723,16 +6164,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 122,
+                                "data-rrweb-id": 105,
                               },
                               "childNodes": [
                                 {
-                                  "id": 124,
+                                  "id": 107,
                                   "textContent": "filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 122,
+                              "id": 105,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5740,23 +6181,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-                                "data-rrweb-id": 123,
+                                "data-rrweb-id": 106,
                               },
                               "childNodes": [],
-                              "id": 123,
+                              "id": 106,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 121,
+                          "id": 104,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 125,
+                            "data-rrweb-id": 108,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5764,16 +6205,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 126,
+                                "data-rrweb-id": 109,
                               },
                               "childNodes": [
                                 {
-                                  "id": 128,
+                                  "id": 111,
                                   "textContent": "filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 126,
+                              "id": 109,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5781,23 +6222,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-                                "data-rrweb-id": 127,
+                                "data-rrweb-id": 110,
                               },
                               "childNodes": [],
-                              "id": 127,
+                              "id": 110,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 125,
+                          "id": 108,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 129,
+                            "data-rrweb-id": 112,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5805,16 +6246,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 130,
+                                "data-rrweb-id": 113,
                               },
                               "childNodes": [
                                 {
-                                  "id": 132,
+                                  "id": 115,
                                   "textContent": "filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 130,
+                              "id": 113,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5822,23 +6263,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-                                "data-rrweb-id": 131,
+                                "data-rrweb-id": 114,
                               },
                               "childNodes": [],
-                              "id": 131,
+                              "id": 114,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 129,
+                          "id": 112,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 133,
+                            "data-rrweb-id": 116,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5846,16 +6287,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 134,
+                                "data-rrweb-id": 117,
                               },
                               "childNodes": [
                                 {
-                                  "id": 136,
+                                  "id": 119,
                                   "textContent": "filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 134,
+                              "id": 117,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5863,23 +6304,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-                                "data-rrweb-id": 135,
+                                "data-rrweb-id": 118,
                               },
                               "childNodes": [],
-                              "id": 135,
+                              "id": 118,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 133,
+                          "id": 116,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 137,
+                            "data-rrweb-id": 120,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5887,16 +6328,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 138,
+                                "data-rrweb-id": 121,
                               },
                               "childNodes": [
                                 {
-                                  "id": 140,
+                                  "id": 123,
                                   "textContent": "filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 138,
+                              "id": 121,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5904,23 +6345,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z",
-                                "data-rrweb-id": 139,
+                                "data-rrweb-id": 122,
                               },
                               "childNodes": [],
-                              "id": 139,
+                              "id": 122,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 137,
+                          "id": 120,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 141,
+                            "data-rrweb-id": 124,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5928,16 +6369,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 142,
+                                "data-rrweb-id": 125,
                               },
                               "childNodes": [
                                 {
-                                  "id": 144,
+                                  "id": 127,
                                   "textContent": "half-filled star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 142,
+                              "id": 125,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5945,23 +6386,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-                                "data-rrweb-id": 143,
+                                "data-rrweb-id": 126,
                               },
                               "childNodes": [],
-                              "id": 143,
+                              "id": 126,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 141,
+                          "id": 124,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 145,
+                            "data-rrweb-id": 128,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -5969,16 +6410,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 146,
+                                "data-rrweb-id": 129,
                               },
                               "childNodes": [
                                 {
-                                  "id": 148,
+                                  "id": 131,
                                   "textContent": "empty star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 146,
+                              "id": 129,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -5986,23 +6427,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-                                "data-rrweb-id": 147,
+                                "data-rrweb-id": 130,
                               },
                               "childNodes": [],
-                              "id": 147,
+                              "id": 130,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 145,
+                          "id": 128,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 149,
+                            "data-rrweb-id": 132,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -6010,16 +6451,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 150,
+                                "data-rrweb-id": 133,
                               },
                               "childNodes": [
                                 {
-                                  "id": 152,
+                                  "id": 135,
                                   "textContent": "empty star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 150,
+                              "id": 133,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -6027,23 +6468,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-                                "data-rrweb-id": 151,
+                                "data-rrweb-id": 134,
                               },
                               "childNodes": [],
-                              "id": 151,
+                              "id": 134,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 149,
+                          "id": 132,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 153,
+                            "data-rrweb-id": 136,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -6051,16 +6492,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 154,
+                                "data-rrweb-id": 137,
                               },
                               "childNodes": [
                                 {
-                                  "id": 156,
+                                  "id": 139,
                                   "textContent": "empty star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 154,
+                              "id": 137,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -6068,23 +6509,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-                                "data-rrweb-id": 155,
+                                "data-rrweb-id": 138,
                               },
                               "childNodes": [],
-                              "id": 155,
+                              "id": 138,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 153,
+                          "id": 136,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 157,
+                            "data-rrweb-id": 140,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -6092,16 +6533,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 158,
+                                "data-rrweb-id": 141,
                               },
                               "childNodes": [
                                 {
-                                  "id": 160,
+                                  "id": 143,
                                   "textContent": "empty star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 158,
+                              "id": 141,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -6109,23 +6550,23 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-                                "data-rrweb-id": 159,
+                                "data-rrweb-id": 142,
                               },
                               "childNodes": [],
-                              "id": 159,
+                              "id": 142,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 157,
+                          "id": 140,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                         {
                           "attributes": {
-                            "data-rrweb-id": 161,
+                            "data-rrweb-id": 144,
                             "fill": "currentColor",
                             "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden",
                             "viewBox": "0 0 24 24",
@@ -6133,16 +6574,16 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                           "childNodes": [
                             {
                               "attributes": {
-                                "data-rrweb-id": 162,
+                                "data-rrweb-id": 145,
                               },
                               "childNodes": [
                                 {
-                                  "id": 164,
+                                  "id": 147,
                                   "textContent": "empty star",
                                   "type": 3,
                                 },
                               ],
-                              "id": 162,
+                              "id": 145,
                               "isSVG": true,
                               "tagName": "title",
                               "type": 2,
@@ -6150,22 +6591,22 @@ exports[`replay/transform transform inputs progress rating 1`] = `
                             {
                               "attributes": {
                                 "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z",
-                                "data-rrweb-id": 163,
+                                "data-rrweb-id": 146,
                               },
                               "childNodes": [],
-                              "id": 163,
+                              "id": 146,
                               "isSVG": true,
                               "tagName": "path",
                               "type": 2,
                             },
                           ],
-                          "id": 161,
+                          "id": 144,
                           "isSVG": true,
                           "tagName": "svg",
                           "type": 2,
                         },
                       ],
-                      "id": 165,
+                      "id": 148,
                       "tagName": "div",
                       "type": 2,
                     },
@@ -6428,7 +6869,7 @@ exports[`replay/transform transform inputs web_view - $inputType - $value 1`] =
                   },
                   "childNodes": [
                     {
-                      "id": 299,
+                      "id": 100,
                       "textContent": "web_view",
                       "type": 3,
                     },
@@ -6501,7 +6942,7 @@ exports[`replay/transform transform inputs web_view with URL 1`] = `
                   },
                   "childNodes": [
                     {
-                      "id": 116,
+                      "id": 100,
                       "textContent": "https://example.com",
                       "type": 3,
                     },
@@ -6569,7 +7010,7 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = `
               "childNodes": [
                 {
                   "attributes": {
-                    "data-rrweb-id": 115,
+                    "data-rrweb-id": 101,
                     "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                   },
                   "childNodes": [
@@ -6585,12 +7026,12 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = `
                       "type": 2,
                     },
                     {
-                      "id": 114,
+                      "id": 100,
                       "textContent": "i will wrap the checkbox",
                       "type": 3,
                     },
                   ],
-                  "id": 115,
+                  "id": 101,
                   "tagName": "label",
                   "type": 2,
                 },
@@ -6659,7 +7100,7 @@ exports[`replay/transform transform omitting x and y is equivalent to setting th
                     },
                     "childNodes": [
                       {
-                        "id": 106,
+                        "id": 100,
                         "textContent": "image",
                         "type": 3,
                       },
diff --git a/ee/frontend/mobile-replay/index.ts b/ee/frontend/mobile-replay/index.ts
index b696832788379..56a7d2ee45b98 100644
--- a/ee/frontend/mobile-replay/index.ts
+++ b/ee/frontend/mobile-replay/index.ts
@@ -5,7 +5,7 @@ import Ajv, { ErrorObject } from 'ajv'
 import { mobileEventWithTime } from './mobile.types'
 import mobileSchema from './schema/mobile/rr-mobile-schema.json'
 import webSchema from './schema/web/rr-web-schema.json'
-import { makeCustomEvent, makeFullEvent, makeIncrementalEvent, makeMetaEvent } from './transformers'
+import { makeCustomEvent, makeFullEvent, makeIncrementalEvent, makeMetaEvent } from './transformer/transformers'
 
 const ajv = new Ajv({
     allowUnionTypes: true,
diff --git a/ee/frontend/mobile-replay/transform.test.ts b/ee/frontend/mobile-replay/transform.test.ts
index 08d846831a149..9dd8869a2b981 100644
--- a/ee/frontend/mobile-replay/transform.test.ts
+++ b/ee/frontend/mobile-replay/transform.test.ts
@@ -1,14 +1,15 @@
 import posthogEE from '@posthog/ee/exports'
-import {EventType} from '@rrweb/types'
-import {ifEeDescribe} from 'lib/ee.test'
+import { EventType } from '@rrweb/types'
+import { ifEeDescribe } from 'lib/ee.test'
 
-import {PostHogEE} from '../../../frontend/@posthog/ee/types'
-import {validateAgainstWebSchema, validateFromMobile} from './index'
+import { PostHogEE } from '../../../frontend/@posthog/ee/types'
+import * as incrementalSnapshotJson from './__mocks__/increment-with-child-duplication.json'
+import { validateAgainstWebSchema, validateFromMobile } from './index'
 
-const unspecifiedBase64ImageURL = 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
+const unspecifiedBase64ImageURL =
+    'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII='
 
-const heartEyesEmojiURL =
-    'data:image/png;base64,' + unspecifiedBase64ImageURL
+const heartEyesEmojiURL = 'data:image/png;base64,' + unspecifiedBase64ImageURL
 
 describe('replay/transform', () => {
     describe('validation', () => {
@@ -23,7 +24,7 @@ describe('replay/transform', () => {
 
         test('example of validating mobile meta event', () => {
             const validData = {
-                data: {width: 1, height: 1},
+                data: { width: 1, height: 1 },
                 timestamp: 1,
                 type: EventType.Meta,
             }
@@ -40,7 +41,7 @@ describe('replay/transform', () => {
             })
 
             test('should be valid when...', () => {
-                expect(validateAgainstWebSchema({data: {}, timestamp: 12345, type: 0})).toBeTruthy()
+                expect(validateAgainstWebSchema({ data: {}, timestamp: 12345, type: 0 })).toBeTruthy()
             })
         })
     })
@@ -54,16 +55,16 @@ describe('replay/transform', () => {
             expect(
                 posthogEEModule.mobileReplay?.transformToWeb([
                     {
-                        data: {width: 300, height: 600},
+                        data: { width: 300, height: 600 },
                         timestamp: 1,
                         type: 4,
                     },
                     {
-                        data: {href: 'included when present', width: 300, height: 600},
+                        data: { href: 'included when present', width: 300, height: 600 },
                         timestamp: 1,
                         type: 4,
                     },
-                    {type: 9999},
+                    { type: 9999 },
                     {
                         type: 2,
                         data: {
@@ -87,7 +88,7 @@ describe('replay/transform', () => {
         test('can ignore unknown wireframe types', () => {
             const unexpectedWireframeType = posthogEEModule.mobileReplay?.transformToWeb([
                 {
-                    data: {screen: 'App Home Page', width: 300, height: 600},
+                    data: { screen: 'App Home Page', width: 300, height: 600 },
                     timestamp: 1,
                     type: 4,
                 },
@@ -114,14 +115,14 @@ describe('replay/transform', () => {
         test('can short-circuit non-mobile full snapshot', () => {
             const allWeb = posthogEEModule.mobileReplay?.transformToWeb([
                 {
-                    data: {href: 'https://my-awesome.site', width: 300, height: 600},
+                    data: { href: 'https://my-awesome.site', width: 300, height: 600 },
                     timestamp: 1,
                     type: 4,
                 },
                 {
                     type: 2,
                     data: {
-                        node: {the: 'payload'},
+                        node: { the: 'payload' },
                     },
                     timestamp: 1,
                 },
@@ -235,7 +236,7 @@ describe('replay/transform', () => {
         test('child wireframes are processed', () => {
             const textEvent = posthogEEModule.mobileReplay?.transformToWeb([
                 {
-                    data: {screen: 'App Home Page', width: 300, height: 600},
+                    data: { screen: 'App Home Page', width: 300, height: 600 },
                     timestamp: 1,
                     type: 4,
                 },
@@ -349,6 +350,11 @@ describe('replay/transform', () => {
             expect(textEvent).toMatchSnapshot()
         })
 
+        test('incremental mutations de-duplicate the tree', () => {
+            const conversion = posthogEEModule.mobileReplay?.transformEventToWeb(incrementalSnapshotJson)
+            expect(conversion).toMatchSnapshot()
+        })
+
         test('omitting x and y is equivalent to setting them to 0', () => {
             expect(
                 posthogEEModule.mobileReplay?.transformToWeb([
@@ -486,7 +492,7 @@ describe('replay/transform', () => {
                                 x: 0,
                                 y: 0,
                                 height: 30,
-                                style: {backgroundImage: heartEyesEmojiURL,}
+                                style: { backgroundImage: heartEyesEmojiURL },
                             },
                             {
                                 id: 12346,
@@ -494,7 +500,7 @@ describe('replay/transform', () => {
                                 x: 0,
                                 y: 0,
                                 height: 30,
-                                style: {backgroundImage: unspecifiedBase64ImageURL,}
+                                style: { backgroundImage: unspecifiedBase64ImageURL },
                             },
                             {
                                 id: 12346,
@@ -502,7 +508,7 @@ describe('replay/transform', () => {
                                 x: 0,
                                 y: 0,
                                 height: 30,
-                                style: {backgroundImage: unspecifiedBase64ImageURL, backgroundSize: 'cover'}
+                                style: { backgroundImage: unspecifiedBase64ImageURL, backgroundSize: 'cover' },
                             },
                             {
                                 id: 12346,
@@ -511,7 +517,7 @@ describe('replay/transform', () => {
                                 y: 0,
                                 height: 30,
                                 // should be ignored
-                                style: {backgroundImage: null,}
+                                style: { backgroundImage: null },
                             },
                         ],
                     },
@@ -620,7 +626,7 @@ describe('replay/transform', () => {
                                     height: 30,
                                     type: 'input',
                                     inputType: 'progress',
-                                    style: {bar: 'rating'},
+                                    style: { bar: 'rating' },
                                     max: '12',
                                     value: '6.5',
                                 },
@@ -636,7 +642,7 @@ describe('replay/transform', () => {
                     posthogEEModule.mobileReplay?.transformEventToWeb({
                         timestamp: 1,
                         type: EventType.Custom,
-                        data: {tag: 'keyboard', payload: {open: true, height: 150}},
+                        data: { tag: 'keyboard', payload: { open: true, height: 150 } },
                     })
                 ).toMatchSnapshot()
             })
@@ -657,7 +663,7 @@ describe('replay/transform', () => {
                                         height: 30,
                                         type: 'input',
                                         inputType: 'progress',
-                                        style: {bar: 'rating'},
+                                        style: { bar: 'rating' },
                                         max: '12',
                                         value: '6.5',
                                     },
@@ -675,7 +681,7 @@ describe('replay/transform', () => {
                         type: EventType.IncrementalSnapshot,
                         data: {
                             source: 0,
-                            removes: [{parentId: 54321, id: 12345}],
+                            removes: [{ parentId: 54321, id: 12345 }],
                         },
                     })
                 ).toMatchSnapshot()
@@ -699,7 +705,7 @@ describe('replay/transform', () => {
                                         height: 30,
                                         type: 'input',
                                         inputType: 'progress',
-                                        style: {bar: 'rating'},
+                                        style: { bar: 'rating' },
                                         max: '12',
                                         value: '6.5',
                                     },
@@ -715,7 +721,7 @@ describe('replay/transform', () => {
                     posthogEEModule.mobileReplay?.transformEventToWeb({
                         timestamp: 1,
                         type: EventType.Custom,
-                        data: {tag: 'keyboard', payload: {open: false}},
+                        data: { tag: 'keyboard', payload: { open: false } },
                     })
                 ).toMatchSnapshot()
             })
@@ -989,7 +995,7 @@ describe('replay/transform', () => {
                     height: 30,
                     type: 'input',
                     inputType: 'progress',
-                    style: {bar: 'circular'},
+                    style: { bar: 'circular' },
                 },
                 {
                     id: 12365,
@@ -997,7 +1003,7 @@ describe('replay/transform', () => {
                     height: 30,
                     type: 'input',
                     inputType: 'progress',
-                    style: {bar: 'horizontal'},
+                    style: { bar: 'horizontal' },
                 },
                 {
                     id: 12365,
@@ -1005,7 +1011,7 @@ describe('replay/transform', () => {
                     height: 30,
                     type: 'input',
                     inputType: 'progress',
-                    style: {bar: 'horizontal'},
+                    style: { bar: 'horizontal' },
                     value: 0.75,
                 },
                 {
@@ -1014,7 +1020,7 @@ describe('replay/transform', () => {
                     height: 30,
                     type: 'input',
                     inputType: 'progress',
-                    style: {bar: 'horizontal'},
+                    style: { bar: 'horizontal' },
                     value: 0.75,
                     max: 2.5,
                 },
diff --git a/ee/frontend/mobile-replay/status-bar.ts b/ee/frontend/mobile-replay/transformer/status-bar.ts
similarity index 74%
rename from ee/frontend/mobile-replay/status-bar.ts
rename to ee/frontend/mobile-replay/transformer/status-bar.ts
index 44b3ee9cc6a6b..1ae82c633c489 100644
--- a/ee/frontend/mobile-replay/status-bar.ts
+++ b/ee/frontend/mobile-replay/transformer/status-bar.ts
@@ -1,5 +1,6 @@
-import {NodeType, serializedNodeWithId, wireframeStatusBar} from "./mobile.types";
+import {NodeType, serializedNodeWithId, wireframeStatusBar} from "../mobile.types";
 import {STATUS_BAR_ID} from "./transformers";
+import {ConversionContext, ConversionResult} from "./types";
 import {makeStylesString} from "./wireframeStyle";
 
 function spacerDiv(idSequence: Generator<number>): serializedNodeWithId {
@@ -19,10 +20,10 @@ function spacerDiv(idSequence: Generator<number>): serializedNodeWithId {
 /**
  * tricky: we need to accept children because that's the interface of converters, but we don't use them
  */
-export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializedNodeWithId[], timestamp: number, idSequence: Generator<number>): serializedNodeWithId {
-    const clockId = idSequence.next().value;
+export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializedNodeWithId[], context: ConversionContext): ConversionResult<serializedNodeWithId> {
+    const clockId = context.idSequence.next().value;
     // convert the wireframe timestamp to a date time, then get just the hour and minute of the time from that
-    const clockTime = timestamp ? new Date(timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : ""
+    const clockTime = context.timestamp ? new Date(context.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : ""
     const clock: serializedNodeWithId = {
         type: NodeType.Element,
         tagName: 'div',
@@ -34,12 +35,12 @@ export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializ
             {
                 type: NodeType.Text,
                 textContent: clockTime,
-                id: idSequence.next().value,
+                id: context.idSequence.next().value,
             },
         ]
     };
 
-    return {
+    return {result: {
         type: NodeType.Element,
         tagName: 'div',
         attributes: {
@@ -48,8 +49,8 @@ export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializ
         },
         id: STATUS_BAR_ID,
         childNodes: [
-            spacerDiv(idSequence),
+            spacerDiv(context.idSequence),
             clock
         ],
-    }
+    }, context }
 }
diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformer/transformers.ts
similarity index 63%
rename from ee/frontend/mobile-replay/transformers.ts
rename to ee/frontend/mobile-replay/transformer/transformers.ts
index 547c7cafd2de4..7135bed985ab7 100644
--- a/ee/frontend/mobile-replay/transformers.ts
+++ b/ee/frontend/mobile-replay/transformer/transformers.ts
@@ -9,8 +9,8 @@ import {
     mutationData,
     removedNodeMutation,
 } from '@rrweb/types'
-import {captureMessage} from '@sentry/react'
-import {isObject} from 'lib/utils'
+import { captureMessage } from '@sentry/react'
+import { isObject } from 'lib/utils'
 
 import {
     attributes,
@@ -39,8 +39,9 @@ import {
     wireframeSelect,
     wireframeText,
     wireframeToggle,
-} from './mobile.types'
-import {makeStatusBar} from "./status-bar";
+} from '../mobile.types'
+import { makeStatusBar } from './status-bar'
+import { ConversionContext, ConversionResult, StyleOverride } from './types'
 import {
     makeBodyStyles,
     makeColorStyles,
@@ -50,7 +51,6 @@ import {
     makeMinimalStyles,
     makePositionStyles,
     makeStylesString,
-    StyleOverride,
 } from './wireframeStyle'
 
 const BACKGROUND = '#f3f4ef'
@@ -77,8 +77,7 @@ function* ids(): Generator<number> {
     }
 }
 
-// TODO this is shared for the lifetime of the page, so a very, very long-lived session could exhaust the ids
-const idSequence = ids()
+let globalIdSequence = ids()
 
 // there are some fixed ids that we need to use for fixed elements or artificial mutations
 const DOCUMENT_ID = 1
@@ -93,6 +92,10 @@ function isKeyboardEvent(x: unknown): x is keyboardEvent {
     return isObject(x) && 'data' in x && isObject(x.data) && 'tag' in x.data && x.data.tag === 'keyboard'
 }
 
+export function _isPositiveInteger(id: unknown): id is number {
+    return typeof id === 'number' && id > 0 && id % 1 === 0
+}
+
 export const makeCustomEvent = (
     mobileCustomEvent: (customEvent | keyboardEvent) & {
         timestamp: number
@@ -123,23 +126,28 @@ export const makeCustomEvent = (
                         : '100vw',
                 },
                 [],
-                styleOverride
+                {
+                    timestamp: mobileCustomEvent.timestamp,
+                    idSequence: globalIdSequence,
+                    skippableNodes: new Set(),
+                    styleOverride,
+                }
             )
             if (keyboardPlaceHolder) {
                 adds.push({
                     parentId: BODY_ID,
                     nextId: null,
-                    node: keyboardPlaceHolder,
+                    node: keyboardPlaceHolder.result,
                 })
                 // mutations seem not to want a tree of nodes to add
                 // so even though `keyboardPlaceholder` is a tree with content
                 // we have to add the text content as well
                 adds.push({
-                    parentId: keyboardPlaceHolder.id,
+                    parentId: keyboardPlaceHolder.result.id,
                     nextId: null,
                     node: {
                         type: NodeType.Text,
-                        id: idSequence.next().value,
+                        id: globalIdSequence.next().value,
                         textContent: 'keyboard',
                     },
                 })
@@ -181,25 +189,32 @@ export const makeMetaEvent = (
     timestamp: mobileMetaEvent.timestamp,
 })
 
-export function _isPositiveInteger(id: unknown): id is number {
-    return typeof id === 'number' && id > 0 && id % 1 === 0
-}
-
-function makeDivElement(wireframe: wireframeDiv, children: serializedNodeWithId[]): serializedNodeWithId | null {
-    const _id = _isPositiveInteger(wireframe.id) ? wireframe.id : idSequence.next().value
+function makeDivElement(
+    wireframe: wireframeDiv,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
+    const _id = _isPositiveInteger(wireframe.id) ? wireframe.id : context.idSequence.next().value
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;',
-            'data-rrweb-id': _id,
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;',
+                'data-rrweb-id': _id,
+            },
+            id: _id,
+            childNodes: children,
         },
-        id: _id,
-        childNodes: children,
+        context,
     }
 }
 
-function makeTextElement(wireframe: wireframeText, children: serializedNodeWithId[]): serializedNodeWithId | null {
+function makeTextElement(
+    wireframe: wireframeText,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     if (wireframe.type !== 'text') {
         console.error('Passed incorrect wireframe type to makeTextElement')
         return null
@@ -207,92 +222,109 @@ function makeTextElement(wireframe: wireframeText, children: serializedNodeWithI
 
     // because we might have to style the text, we always wrap it in a div
     // and apply styles to that
-    const id = idSequence.next().value
+    const id = context.idSequence.next().value
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;',
-            'data-rrweb-id': wireframe.id,
-        },
-        id: wireframe.id,
-        childNodes: [
-            {
-                type: NodeType.Text,
-                textContent: wireframe.text,
-                // since the text node is wrapped, we assign it a synthetic id
-                id: id,
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;',
+                'data-rrweb-id': wireframe.id,
             },
-            ...children,
-        ],
+            id: wireframe.id,
+            childNodes: [
+                {
+                    type: NodeType.Text,
+                    textContent: wireframe.text,
+                    // since the text node is wrapped, we assign it a synthetic id
+                    id: id,
+                },
+                ...children,
+            ],
+        },
+        context,
     }
 }
 
-function makeWebViewElement(wireframe: wireframe, children: serializedNodeWithId[]): serializedNodeWithId | null {
+function makeWebViewElement(
+    wireframe: wireframe,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     const labelledWireframe: wireframePlaceholder = { ...wireframe } as wireframePlaceholder
     if ('url' in wireframe) {
         labelledWireframe.label = wireframe.url
     }
 
-    return makePlaceholderElement(labelledWireframe, children)
+    return makePlaceholderElement(labelledWireframe, children, context)
 }
 
 function makePlaceholderElement(
     wireframe: wireframe,
     children: serializedNodeWithId[],
-    styleOverride?: StyleOverride
-): serializedNodeWithId | null {
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     const txt = 'label' in wireframe && wireframe.label ? wireframe.label : wireframe.type || 'PLACEHOLDER'
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            style: makeStylesString(wireframe, {
-                verticalAlign: 'center',
-                horizontalAlign: 'center',
-                backgroundColor: wireframe.style?.backgroundColor || BACKGROUND,
-                color: wireframe.style?.color || FOREGROUND,
-                ...styleOverride,
-            }),
-            'data-rrweb-id': wireframe.id,
-        },
-        id: wireframe.id,
-        childNodes: [
-            {
-                type: NodeType.Text,
-                // since the text node is wrapped, we assign it a synthetic id
-                id: idSequence.next().value,
-                textContent: txt,
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeStylesString(wireframe, {
+                    verticalAlign: 'center',
+                    horizontalAlign: 'center',
+                    backgroundColor: wireframe.style?.backgroundColor || BACKGROUND,
+                    color: wireframe.style?.color || FOREGROUND,
+                    ...context.styleOverride,
+                }),
+                'data-rrweb-id': wireframe.id,
             },
-            ...children,
-        ],
+            id: wireframe.id,
+            childNodes: [
+                {
+                    type: NodeType.Text,
+                    // since the text node is wrapped, we assign it a synthetic id
+                    id: context.idSequence.next().value,
+                    textContent: txt,
+                },
+                ...children,
+            ],
+        },
+        context,
     }
 }
 
-export function dataURIOrPNG(src: string):string {
+export function dataURIOrPNG(src: string): string {
     if (!src.startsWith('data:image/')) {
         return 'data:image/png;base64,' + src
     }
-    return src;
+    return src
 }
 
-function makeImageElement(wireframe: wireframeImage, children: serializedNodeWithId[]): serializedNodeWithId | null {
+function makeImageElement(
+    wireframe: wireframeImage,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     if (!wireframe.base64) {
-        return makePlaceholderElement(wireframe, children)
+        return makePlaceholderElement(wireframe, children, context)
     }
-    const src = dataURIOrPNG(wireframe.base64);
+    const src = dataURIOrPNG(wireframe.base64)
     return {
-        type: NodeType.Element,
-        tagName: 'img',
-        attributes: {
-            src: src,
-            width: wireframe.width,
-            height: wireframe.height,
-            style: makeStylesString(wireframe),
-            'data-rrweb-id': wireframe.id,
+        result: {
+            type: NodeType.Element,
+            tagName: 'img',
+            attributes: {
+                src: src,
+                width: wireframe.width,
+                height: wireframe.height,
+                style: makeStylesString(wireframe),
+                'data-rrweb-id': wireframe.id,
+            },
+            id: wireframe.id,
+            childNodes: children,
         },
-        id: wireframe.id,
-        childNodes: children,
+        context,
     }
 }
 
@@ -354,7 +386,11 @@ function inputAttributes<T extends wireframeInputComponent>(wireframe: T): attri
     }
 }
 
-function makeButtonElement(wireframe: wireframeButton, children: serializedNodeWithId[]): serializedNodeWithId | null {
+function makeButtonElement(
+    wireframe: wireframeButton,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     const buttonText: textNode | null = wireframe.value
         ? {
               type: NodeType.Text,
@@ -363,44 +399,68 @@ function makeButtonElement(wireframe: wireframeButton, children: serializedNodeW
         : null
 
     return {
-        type: NodeType.Element,
-        tagName: 'button',
-        attributes: inputAttributes(wireframe),
-        id: wireframe.id,
-        childNodes: buttonText ? [{ ...buttonText, id: idSequence.next().value }, ...children] : children,
+        result: {
+            type: NodeType.Element,
+            tagName: 'button',
+            attributes: inputAttributes(wireframe),
+            id: wireframe.id,
+            childNodes: buttonText ? [{ ...buttonText, id: context.idSequence.next().value }, ...children] : children,
+        },
+        context,
     }
 }
 
-function makeSelectOptionElement(option: string, selected: boolean): serializedNodeWithId {
-    const optionId = idSequence.next().value
+function makeSelectOptionElement(
+    option: string,
+    selected: boolean,
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> {
+    const optionId = context.idSequence.next().value
     return {
-        type: NodeType.Element,
-        tagName: 'option',
-        attributes: {
-            ...(selected ? { selected: selected } : {}),
-            'data-rrweb-id': optionId,
-        },
-        id: optionId,
-        childNodes: [
-            {
-                type: NodeType.Text,
-                textContent: option,
-                id: idSequence.next().value,
+        result: {
+            type: NodeType.Element,
+            tagName: 'option',
+            attributes: {
+                ...(selected ? { selected: selected } : {}),
+                'data-rrweb-id': optionId,
             },
-        ],
+            id: optionId,
+            childNodes: [
+                {
+                    type: NodeType.Text,
+                    textContent: option,
+                    id: context.idSequence.next().value,
+                },
+            ],
+        },
+        context,
     }
 }
 
-function makeSelectElement(wireframe: wireframeSelect, children: serializedNodeWithId[]): serializedNodeWithId | null {
+function makeSelectElement(
+    wireframe: wireframeSelect,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
+    const selectOptions: serializedNodeWithId[] = []
+    if (wireframe.options) {
+        let optionContext = context
+        for (let i = 0; i < wireframe.options.length; i++) {
+            const option = wireframe.options[i]
+            const conversion = makeSelectOptionElement(option, wireframe.value === option, optionContext)
+            selectOptions.push(conversion.result)
+            optionContext = conversion.context
+        }
+    }
     return {
-        type: NodeType.Element,
-        tagName: 'select',
-        attributes: inputAttributes(wireframe),
-        id: wireframe.id,
-        childNodes: [
-            ...(wireframe.options?.map((option) => makeSelectOptionElement(option, wireframe.value === option)) || []),
-            ...children,
-        ],
+        result: {
+            type: NodeType.Element,
+            tagName: 'select',
+            attributes: inputAttributes(wireframe),
+            id: wireframe.id,
+            childNodes: [...selectOptions, ...children],
+        },
+        context,
     }
 }
 
@@ -422,25 +482,29 @@ function groupRadioButtons(children: serializedNodeWithId[], radioGroupName: str
 
 function makeRadioGroupElement(
     wireframe: wireframeRadioGroup,
-    children: serializedNodeWithId[]
-): serializedNodeWithId | null {
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     const radioGroupName = 'radio_group_' + wireframe.id
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            style: makeStylesString(wireframe),
-            'data-rrweb-id': wireframe.id,
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeStylesString(wireframe),
+                'data-rrweb-id': wireframe.id,
+            },
+            id: wireframe.id,
+            childNodes: groupRadioButtons(children, radioGroupName),
         },
-        id: wireframe.id,
-        childNodes: groupRadioButtons(children, radioGroupName),
+        context,
     }
 }
 
-function makeStar(title: string, path: string): serializedNodeWithId {
-    const svgId = idSequence.next().value
-    const titleId = idSequence.next().value
-    const pathId = idSequence.next().value
+function makeStar(title: string, path: string, context: ConversionContext): serializedNodeWithId {
+    const svgId = context.idSequence.next().value
+    const titleId = context.idSequence.next().value
+    const pathId = context.idSequence.next().value
     return {
         type: NodeType.Element,
         tagName: 'svg',
@@ -465,7 +529,7 @@ function makeStar(title: string, path: string): serializedNodeWithId {
                     {
                         type: NodeType.Text,
                         textContent: title,
-                        id: idSequence.next().value,
+                        id: context.idSequence.next().value,
                     },
                 ],
             },
@@ -484,33 +548,40 @@ function makeStar(title: string, path: string): serializedNodeWithId {
     }
 }
 
-function filledStar(): serializedNodeWithId {
+function filledStar(context: ConversionContext): serializedNodeWithId {
     return makeStar(
         'filled star',
-        'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'
+        'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z',
+        context
     )
 }
 
-function halfStar(): serializedNodeWithId {
+function halfStar(context: ConversionContext): serializedNodeWithId {
     return makeStar(
         'half-filled star',
-        'M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z'
+        'M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z',
+        context
     )
 }
 
-function emptyStar(): serializedNodeWithId {
+function emptyStar(context: ConversionContext): serializedNodeWithId {
     return makeStar(
         'empty star',
-        'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z'
+        'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z',
+        context
     )
 }
 
-function makeRatingBar(wireframe: wireframeProgress, children: serializedNodeWithId[]): serializedNodeWithId | null {
+function makeRatingBar(
+    wireframe: wireframeProgress,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     // max is the number of stars... and value is the number of stars to fill
 
     // deliberate double equals, because we want to allow null and undefined
     if (wireframe.value == null || wireframe.max == null) {
-        return makePlaceholderElement(wireframe, children)
+        return makePlaceholderElement(wireframe, children, context)
     }
 
     const numberOfFilledStars = Math.floor(wireframe.value)
@@ -519,15 +590,15 @@ function makeRatingBar(wireframe: wireframeProgress, children: serializedNodeWit
 
     const filledStars = Array(numberOfFilledStars)
         .fill(undefined)
-        .map(() => filledStar())
+        .map(() => filledStar(context))
     const halfStars = Array(numberOfHalfStars)
         .fill(undefined)
-        .map(() => halfStar())
+        .map(() => halfStar(context))
     const emptyStars = Array(numberOfEmptyStars)
         .fill(undefined)
-        .map(() => emptyStar())
+        .map(() => emptyStar(context))
 
-    const ratingBarId = idSequence.next().value
+    const ratingBarId = context.idSequence.next().value
     const ratingBar = {
         type: NodeType.Element,
         tagName: 'div',
@@ -542,21 +613,25 @@ function makeRatingBar(wireframe: wireframeProgress, children: serializedNodeWit
     } as serializedNodeWithId
 
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            style: makeStylesString(wireframe),
-            'data-rrweb-id': wireframe.id,
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeStylesString(wireframe),
+                'data-rrweb-id': wireframe.id,
+            },
+            id: wireframe.id,
+            childNodes: [ratingBar, ...children],
         },
-        id: wireframe.id,
-        childNodes: [ratingBar, ...children],
+        context,
     }
 }
 
 function makeProgressElement(
     wireframe: wireframeProgress,
-    children: serializedNodeWithId[]
-): serializedNodeWithId | null {
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     if (wireframe.style?.bar === 'circular') {
         // value needs to be expressed as a number between 0 and 100
         const max = wireframe.max || 1
@@ -583,61 +658,67 @@ function makeProgressElement(
                       attributes: {
                           type: 'text/css',
                       },
-                      id: idSequence.next().value,
+                      id: context.idSequence.next().value,
                       childNodes: [
                           {
                               type: NodeType.Text,
                               textContent: `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`,
-                              id: idSequence.next().value,
+                              id: context.idSequence.next().value,
                           },
                       ],
                   },
               ]
 
-        const wrappingDivId = idSequence.next().value
+        const wrappingDivId = context.idSequence.next().value
         return {
-            type: NodeType.Element,
-            tagName: 'div',
-            attributes: {
-                style: makeMinimalStyles(wireframe),
-                'data-rrweb-id': wireframe.id,
-            },
-            id: wireframe.id,
-            childNodes: [
-                {
-                    type: NodeType.Element,
-                    tagName: 'div',
-                    attributes: {
-                        // with no provided value we render a spinner
-                        style: _isPositiveInteger(value)
-                            ? makeDeterminateProgressStyles(wireframe, styleOverride)
-                            : makeIndeterminateProgressStyles(wireframe, styleOverride),
-                        'data-rrweb-id': wrappingDivId,
-                    },
-                    id: wrappingDivId,
-                    childNodes: stylingChildren,
+            result: {
+                type: NodeType.Element,
+                tagName: 'div',
+                attributes: {
+                    style: makeMinimalStyles(wireframe),
+                    'data-rrweb-id': wireframe.id,
                 },
-                ...children,
-            ],
+                id: wireframe.id,
+                childNodes: [
+                    {
+                        type: NodeType.Element,
+                        tagName: 'div',
+                        attributes: {
+                            // with no provided value we render a spinner
+                            style: _isPositiveInteger(value)
+                                ? makeDeterminateProgressStyles(wireframe, styleOverride)
+                                : makeIndeterminateProgressStyles(wireframe, styleOverride),
+                            'data-rrweb-id': wrappingDivId,
+                        },
+                        id: wrappingDivId,
+                        childNodes: stylingChildren,
+                    },
+                    ...children,
+                ],
+            },
+            context,
         }
     } else if (wireframe.style?.bar === 'rating') {
-        return makeRatingBar(wireframe, children)
+        return makeRatingBar(wireframe, children, context)
     } else {
         return {
-            type: NodeType.Element,
-            tagName: 'progress',
-            attributes: inputAttributes(wireframe),
-            id: wireframe.id,
-            childNodes: children,
+            result: {
+                type: NodeType.Element,
+                tagName: 'progress',
+                attributes: inputAttributes(wireframe),
+                id: wireframe.id,
+                childNodes: children,
+            },
+            context,
         }
     }
 }
 
-function makeToggleParts(wireframe: wireframeToggle): serializedNodeWithId[] {
+function makeToggleParts(wireframe: wireframeToggle, context: ConversionContext): serializedNodeWithId[] {
     const togglePosition = wireframe.checked ? 'right' : 'left'
     const defaultColor = wireframe.checked ? '#1d4aff' : BACKGROUND
-    const sliderPartId = idSequence.next().value
-    const handlePartId = idSequence.next().value
+    const sliderPartId = context.idSequence.next().value
+    const handlePartId = context.idSequence.next().value
     return [
         {
             type: NodeType.Element,
@@ -670,88 +751,106 @@ function makeToggleParts(wireframe: wireframeToggle): serializedNodeWithId[] {
     ]
 }
 
-function makeToggleElement(wireframe: wireframeToggle): (elementNode & { id: number }) | null {
+function makeToggleElement(
+    wireframe: wireframeToggle,
+    context: ConversionContext
+): ConversionResult<
+    elementNode & {
+        id: number
+    }
+> | null {
     const isLabelled = 'label' in wireframe
-    const wrappingDivId = idSequence.next().value
+    const wrappingDivId = context.idSequence.next().value
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            // if labelled take up available space, otherwise use provided positioning
-            style: isLabelled ? `height:100%;flex:1` : makePositionStyles(wireframe),
-            'data-rrweb-id': wireframe.id,
-        },
-        id: wireframe.id,
-        childNodes: [
-            {
-                type: NodeType.Element,
-                tagName: 'div',
-                attributes: {
-                    // relative position, fills parent
-                    style: 'position:relative;width:100%;height:100%;',
-                    'data-rrweb-id': wrappingDivId,
-                },
-                id: wrappingDivId,
-                childNodes: makeToggleParts(wireframe),
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                // if labelled take up available space, otherwise use provided positioning
+                style: isLabelled ? `height:100%;flex:1` : makePositionStyles(wireframe),
+                'data-rrweb-id': wireframe.id,
             },
-        ],
+            id: wireframe.id,
+            childNodes: [
+                {
+                    type: NodeType.Element,
+                    tagName: 'div',
+                    attributes: {
+                        // relative position, fills parent
+                        style: 'position:relative;width:100%;height:100%;',
+                        'data-rrweb-id': wrappingDivId,
+                    },
+                    id: wrappingDivId,
+                    childNodes: makeToggleParts(wireframe, context),
+                },
+            ],
+        },
+        context,
     }
 }
 
 function makeLabelledInput(
     wireframe: wireframeCheckBox | wireframeRadio | wireframeToggle,
-    theInputElement: serializedNodeWithId
-): serializedNodeWithId {
+    theInputElement: serializedNodeWithId,
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> {
     const theLabel: serializedNodeWithId = {
         type: NodeType.Text,
         textContent: wireframe.label || '',
-        id: idSequence.next().value,
+        id: context.idSequence.next().value,
     }
 
     const orderedChildren = wireframe.inputType === 'toggle' ? [theLabel, theInputElement] : [theInputElement, theLabel]
 
-    const labelId = idSequence.next().value
+    const labelId = context.idSequence.next().value
     return {
-        type: NodeType.Element,
-        tagName: 'label',
-        attributes: {
-            style: makeStylesString(wireframe),
-            'data-rrweb-id': labelId,
+        result: {
+            type: NodeType.Element,
+            tagName: 'label',
+            attributes: {
+                style: makeStylesString(wireframe),
+                'data-rrweb-id': labelId,
+            },
+            id: labelId,
+            childNodes: orderedChildren,
         },
-        id: labelId,
-        childNodes: orderedChildren,
+        context,
     }
 }
 
 function makeInputElement(
     wireframe: wireframeInputComponent,
-    children: serializedNodeWithId[]
-): serializedNodeWithId | null {
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     if (!wireframe.inputType) {
         return null
     }
 
     if (wireframe.inputType === 'button') {
-        return makeButtonElement(wireframe, children)
+        return makeButtonElement(wireframe, children, context)
     }
 
     if (wireframe.inputType === 'select') {
-        return makeSelectElement(wireframe, children)
+        return makeSelectElement(wireframe, children, context)
     }
 
     if (wireframe.inputType === 'progress') {
-        return makeProgressElement(wireframe, children)
+        return makeProgressElement(wireframe, children, context)
     }
 
-    const theInputElement: serializedNodeWithId | null =
+    const theInputElement: ConversionResult<serializedNodeWithId> | null =
         wireframe.inputType === 'toggle'
-            ? makeToggleElement(wireframe)
+            ? makeToggleElement(wireframe, context)
             : {
-                  type: NodeType.Element,
-                  tagName: 'input',
-                  attributes: inputAttributes(wireframe),
-                  id: wireframe.id,
-                  childNodes: children,
+                  result: {
+                      type: NodeType.Element,
+                      tagName: 'input',
+                      attributes: inputAttributes(wireframe),
+                      id: wireframe.id,
+                      childNodes: children,
+                  },
+                  context,
               }
 
     if (!theInputElement) {
@@ -759,45 +858,48 @@ function makeInputElement(
     }
 
     if ('label' in wireframe) {
-        return makeLabelledInput(wireframe, theInputElement)
+        return makeLabelledInput(wireframe, theInputElement.result, theInputElement.context)
     } else {
-        return {
-            ...theInputElement,
-            attributes: {
-                ...theInputElement.attributes,
-                // when labelled no styles are needed, when un-labelled as here - we add the styling in.
-                style: makeStylesString(wireframe),
-            },
-        }
+        // when labelled no styles are needed, when un-labelled as here - we add the styling in.
+        ;(theInputElement.result as elementNode).attributes.style = makeStylesString(wireframe)
+        return theInputElement
     }
 }
 
 function makeRectangleElement(
     wireframe: wireframeRectangle,
-    children: serializedNodeWithId[]
-): serializedNodeWithId | null {
+    children: serializedNodeWithId[],
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
     return {
-        type: NodeType.Element,
-        tagName: 'div',
-        attributes: {
-            style: makeStylesString(wireframe),
-            'data-rrweb-id': wireframe.id,
+        result: {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeStylesString(wireframe),
+                'data-rrweb-id': wireframe.id,
+            },
+            id: wireframe.id,
+            childNodes: children,
         },
-        id: wireframe.id,
-        childNodes: children,
+        context,
     }
 }
 
 function chooseConverter<T extends wireframe>(
     wireframe: T
-): (wireframe: T, children: serializedNodeWithId[], timestamp?: number, idSequence?: Generator<number>) => serializedNodeWithId | null {
+): (
+    wireframe: T,
+    children: serializedNodeWithId[],
+    context: ConversionContext
+) => ConversionResult<serializedNodeWithId> | null {
     // in theory type is always present
     // but since this is coming over the wire we can't really be sure,
     // and so we default to div
     const converterType: MobileNodeType = wireframe.type || 'div'
     const converterMapping: Record<
         MobileNodeType,
-        (wireframe: T, children: serializedNodeWithId[]) => serializedNodeWithId | null
+        (wireframe: T, children: serializedNodeWithId[]) => ConversionResult<serializedNodeWithId> | null
     > = {
         // KLUDGE: TS can't tell that the wireframe type of each function is safe based on the converter type
         text: makeTextElement as any,
@@ -815,24 +917,41 @@ function chooseConverter<T extends wireframe>(
     return converterMapping[converterType]
 }
 
-function convertWireframe(wireframe: wireframe, timestamp?: number, idSequence?: Generator<number>): serializedNodeWithId | null {
-    const children = convertWireframesFor(wireframe.childWireframes, timestamp)
+function convertWireframe(
+    wireframe: wireframe,
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId> | null {
+    if (context.skippableNodes?.has(wireframe.id)) {
+        return null
+    }
+
+    const children = convertWireframesFor(wireframe.childWireframes, context)
     const converter = chooseConverter(wireframe)
-    return converter?.(wireframe, children, timestamp, idSequence) || null
+    // every wireframe comes through this converter,
+    // so to track which ones we want to skip,
+    // we can add them here
+    context.skippableNodes?.add(wireframe.id)
+    const converted = converter?.(wireframe, children.result, children.context)
+    return converted || null
 }
 
-function convertWireframesFor(wireframes: wireframe[] | undefined, timestamp?: number): serializedNodeWithId[] {
+function convertWireframesFor(
+    wireframes: wireframe[] | undefined,
+    context: ConversionContext
+): ConversionResult<serializedNodeWithId[]> {
     if (!wireframes) {
-        return []
+        return { result: [], context }
     }
 
-    return wireframes.reduce((acc, wireframe) => {
-        const convertedEl = convertWireframe(wireframe, timestamp, idSequence)
-        if (convertedEl !== null) {
-            acc.push(convertedEl)
+    const result: serializedNodeWithId[] = []
+    for (const wireframe of wireframes) {
+        const converted = convertWireframe(wireframe, context)
+        if (converted) {
+            result.push(converted.result)
+            context = converted.context
         }
-        return acc
-    }, [] as serializedNodeWithId[])
+    }
+    return { result, context }
 }
 
 function isMobileIncrementalSnapshotEvent(x: unknown): x is MobileIncrementalSnapshotEvent {
@@ -854,8 +973,8 @@ function isMobileIncrementalSnapshotEvent(x: unknown): x is MobileIncrementalSna
     return hasMutationSource && (hasAddedWireframe || hasUpdatedWireframe)
 }
 
-function makeIncrementalAdd(add: MobileNodeMutation): addedNodeMutation[] | null {
-    const converted = convertWireframe(add.wireframe, undefined, idSequence)
+function makeIncrementalAdd(add: MobileNodeMutation, context: ConversionContext): addedNodeMutation[] | null {
+    const converted = convertWireframe(add.wireframe, context)
     if (!converted) {
         return null
     }
@@ -863,7 +982,7 @@ function makeIncrementalAdd(add: MobileNodeMutation): addedNodeMutation[] | null
     const addition: addedNodeMutation = {
         parentId: add.parentId,
         nextId: null,
-        node: converted,
+        node: converted.result,
     }
     const adds: addedNodeMutation[] = []
     if (addition) {
@@ -964,17 +1083,28 @@ export const makeIncrementalEvent = (
         const adds: addedNodeMutation[] = []
         const removes: removedNodeMutation[] = mobileEvent.data.removes || []
         if ('adds' in mobileEvent.data && Array.isArray(mobileEvent.data.adds)) {
+            const addsContext = {
+                timestamp: mobileEvent.timestamp,
+                idSequence: globalIdSequence,
+                skippableNodes: new Set<number>(),
+            }
+
             mobileEvent.data.adds.forEach((add) => {
-                makeIncrementalAdd(add)?.forEach((x) => adds.push(x))
+                makeIncrementalAdd(add, addsContext)?.forEach((x) => adds.push(x))
             })
         }
         if ('updates' in mobileEvent.data && Array.isArray(mobileEvent.data.updates)) {
+            const updatesContext = {
+                timestamp: mobileEvent.timestamp,
+                idSequence: globalIdSequence,
+                skippableNodes: new Set<number>(),
+            }
             mobileEvent.data.updates.forEach((update) => {
                 const removal = makeIncrementalRemoveForUpdate(update)
                 if (removal) {
                     removes.push(removal)
                 }
-                makeIncrementalAdd(update)?.forEach((x) => adds.push(x))
+                makeIncrementalAdd(update, updatesContext)?.forEach((x) => adds.push(x))
             })
         }
 
@@ -1000,6 +1130,9 @@ export const makeFullEvent = (
     timestamp: number
     delay?: number
 } => {
+    // we can restart the id sequence on each full snapshot
+    globalIdSequence = ids()
+
     if (!('wireframes' in mobileEvent.data)) {
         return mobileEvent as unknown as fullSnapshotEvent & {
             timestamp: number
@@ -1039,7 +1172,11 @@ export const makeFullEvent = (
                                 tagName: 'body',
                                 attributes: { style: makeBodyStyles(), 'data-rrweb-id': BODY_ID },
                                 id: BODY_ID,
-                                childNodes: convertWireframesFor(mobileEvent.data.wireframes, mobileEvent.timestamp) || [],
+                                childNodes:
+                                    convertWireframesFor(mobileEvent.data.wireframes, {
+                                        timestamp: mobileEvent.timestamp,
+                                        idSequence: globalIdSequence,
+                                    }).result || [],
                             },
                         ],
                     },
diff --git a/ee/frontend/mobile-replay/transformer/types.ts b/ee/frontend/mobile-replay/transformer/types.ts
new file mode 100644
index 0000000000000..151ea6083f2fb
--- /dev/null
+++ b/ee/frontend/mobile-replay/transformer/types.ts
@@ -0,0 +1,25 @@
+import { MobileStyles } from '../mobile.types'
+
+export interface ConversionResult<T> {
+    result: T
+    context: ConversionContext
+}
+
+export interface ConversionContext {
+    timestamp: number
+    idSequence: Generator<number>
+    // in some contexts we want to be able to skip nodes that have already been processed
+    // for example updates are processed as a remove and then an add of the whole tree
+    // this means the mobile app doesn't have to store and diff the tree
+    // it can just send the whole thing over
+    // but multiple nearby updates can result in the same node being present
+    // in the tree multiple times
+    // we track which nodes have been processed to avoid adding them multiple times
+    skippableNodes?: Set<number>
+    styleOverride?: StyleOverride
+}
+
+// StyleOverride is defined here and not in the schema
+// because these are overrides that the transformer is allowed to make
+// not that clients are allowed to request
+export type StyleOverride = MobileStyles & { bottom?: true }
diff --git a/ee/frontend/mobile-replay/wireframeStyle.ts b/ee/frontend/mobile-replay/transformer/wireframeStyle.ts
similarity index 95%
rename from ee/frontend/mobile-replay/wireframeStyle.ts
rename to ee/frontend/mobile-replay/transformer/wireframeStyle.ts
index bbdecf4ad1758..37bd94175a3cb 100644
--- a/ee/frontend/mobile-replay/wireframeStyle.ts
+++ b/ee/frontend/mobile-replay/transformer/wireframeStyle.ts
@@ -1,10 +1,6 @@
-import { MobileStyles, wireframe, wireframeProgress } from './mobile.types'
+import { wireframe, wireframeProgress } from '../mobile.types'
 import {dataURIOrPNG} from "./transformers";
-
-// StyleOverride is defined here and not in the schema
-// because these are overrides that the transformer is allowed to make
-// not that clients are allowed to request
-export type StyleOverride = MobileStyles & { bottom?: true }
+import {StyleOverride} from "./types";
 
 function isNumber(candidate: unknown): candidate is number {
     return typeof candidate === 'number'
diff --git a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png
index f9a0bdb5ecacd..7d425b6f708ba 100644
Binary files a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png and b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--dark.png differ
diff --git a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png
index 537cb1a2fe482..462b1db57416c 100644
Binary files a/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png and b/frontend/__snapshots__/filters-cohort-filters-row-builder--cohort-criteria-row-builder--light.png differ
diff --git a/frontend/__snapshots__/filters-property-select--default--dark.png b/frontend/__snapshots__/filters-property-select--default--dark.png
new file mode 100644
index 0000000000000..df658fcc6f082
Binary files /dev/null and b/frontend/__snapshots__/filters-property-select--default--dark.png differ
diff --git a/frontend/__snapshots__/filters-property-select--default--light.png b/frontend/__snapshots__/filters-property-select--default--light.png
new file mode 100644
index 0000000000000..9efcbf327f836
Binary files /dev/null and b/frontend/__snapshots__/filters-property-select--default--light.png differ
diff --git a/frontend/__snapshots__/filters-property-select--sortable--dark.png b/frontend/__snapshots__/filters-property-select--sortable--dark.png
new file mode 100644
index 0000000000000..df658fcc6f082
Binary files /dev/null and b/frontend/__snapshots__/filters-property-select--sortable--dark.png differ
diff --git a/frontend/__snapshots__/filters-property-select--sortable--light.png b/frontend/__snapshots__/filters-property-select--sortable--light.png
new file mode 100644
index 0000000000000..9efcbf327f836
Binary files /dev/null and b/frontend/__snapshots__/filters-property-select--sortable--light.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png
index 815f61eadca65..eabd45e3527ce 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--actions--dark.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png b/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png
index 25c9b76d34b6d..07d30d806320a 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--actions--light.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png
index e86c41e9b194e..88adc56aa426f 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-free--dark.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png b/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png
index 6cb0d5141746c..d1c2165e100c6 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-free--light.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png
index 77965469c15b3..4f4e3680d57ae 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--dark.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png
index 05b1472433420..ddf7a2bfeea36 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--events-premium--light.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png b/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png
index 7f5cdf933a732..a2118f93763f0 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png and b/frontend/__snapshots__/filters-taxonomic-filter--properties--dark.png differ
diff --git a/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png b/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png
index 5e0238ac4ebc4..5f1e05c71984e 100644
Binary files a/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png and b/frontend/__snapshots__/filters-taxonomic-filter--properties--light.png differ
diff --git a/frontend/__snapshots__/insights-insightstable--can-edit-series-name--dark.png b/frontend/__snapshots__/insights-insightstable--can-edit-series-name--dark.png
index fae5dbbd40109..e586ab5769884 100644
Binary files a/frontend/__snapshots__/insights-insightstable--can-edit-series-name--dark.png and b/frontend/__snapshots__/insights-insightstable--can-edit-series-name--dark.png differ
diff --git a/frontend/__snapshots__/insights-insightstable--can-edit-series-name--light.png b/frontend/__snapshots__/insights-insightstable--can-edit-series-name--light.png
index 07b2c3b92898d..76201f640a590 100644
Binary files a/frontend/__snapshots__/insights-insightstable--can-edit-series-name--light.png and b/frontend/__snapshots__/insights-insightstable--can-edit-series-name--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-menu--flat--dark.png b/frontend/__snapshots__/lemon-ui-lemon-menu--flat--dark.png
index 07eb9c5af8414..f568558e3171c 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-menu--flat--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-menu--flat--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--dark.png b/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--dark.png
index 73a987e1d981f..36fcd90d277a6 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--light.png b/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--light.png
index ce796179a1e4d..c3dbe3fdbb92d 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--light.png and b/frontend/__snapshots__/lemon-ui-lemon-menu--nested-menu--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--dark.png b/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--dark.png
index 00e93a3c0e136..6e04f83988259 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--dark.png and b/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--light.png b/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--light.png
index 532b7e4d70f8a..c807b55277345 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--light.png and b/frontend/__snapshots__/lemon-ui-lemon-menu--sectioned-items--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png
new file mode 100644
index 0000000000000..63cdb54a42be4
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png
new file mode 100644
index 0000000000000..d2af0ff2d26cd
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-progress--variations--light.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-slider--basic--dark.png b/frontend/__snapshots__/lemon-ui-lemon-slider--basic--dark.png
new file mode 100644
index 0000000000000..51342d621ca39
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-slider--basic--dark.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-slider--basic--light.png b/frontend/__snapshots__/lemon-ui-lemon-slider--basic--light.png
new file mode 100644
index 0000000000000..49a6e8a8f8abc
Binary files /dev/null and b/frontend/__snapshots__/lemon-ui-lemon-slider--basic--light.png differ
diff --git a/frontend/__snapshots__/scenes-other-signup--cloud--dark.png b/frontend/__snapshots__/scenes-other-signup--cloud--dark.png
index 0bc05565a541b..22483eefa81c9 100644
Binary files a/frontend/__snapshots__/scenes-other-signup--cloud--dark.png and b/frontend/__snapshots__/scenes-other-signup--cloud--dark.png differ
diff --git a/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png b/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png
index e00e3ad37a5a6..d5e0428cc0cef 100644
Binary files a/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png and b/frontend/__snapshots__/scenes-other-signup--self-hosted--dark.png differ
diff --git a/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png b/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png
index 5e2beb86b99c7..7744a05479fe6 100644
Binary files a/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png and b/frontend/__snapshots__/scenes-other-signup--self-hosted-sso--dark.png differ
diff --git a/frontend/public/pipeline/BigQuery.png b/frontend/public/pipeline/BigQuery.png
new file mode 100644
index 0000000000000..97f805d46ddd4
Binary files /dev/null and b/frontend/public/pipeline/BigQuery.png differ
diff --git a/frontend/public/pipeline/Postgres.png b/frontend/public/pipeline/Postgres.png
new file mode 100644
index 0000000000000..b249db7b54038
Binary files /dev/null and b/frontend/public/pipeline/Postgres.png differ
diff --git a/frontend/public/pipeline/Redshift.svg b/frontend/public/pipeline/Redshift.svg
new file mode 100644
index 0000000000000..87f05da8eae34
--- /dev/null
+++ b/frontend/public/pipeline/Redshift.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.000488281" y="0.666016" width="40" height="42.6667" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="translate(-0.303569 -0.249997) scale(0.00313894 0.00292968)"/>
+</pattern>
+<image id="image0" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAgAElEQVR4Ae3db6xk9Xkf8Od35u7CLn92MRjwLnG9u3ZLSBpMDI0xMClNg02bqNgSlqKqLypVaRUpraGN12njmKpKnLLEi+MXVV/lTaNIobJpbYmWOCoaWEP8J7arWkml2kkbG9sI8HoJYPbeOae6uwzetXfv7p25vzvPufNBGp17Z+Y85zmfZ+b+vnfu7BDhPwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKLLlAWHcD5E5iHwO67Du++6so33jBu2m4ex890zDe9afcXP/2Bn/1upp70QmARBASARZiyc0wjsLrwXxzH39eVeN8lVx/YlaaxOTXSRoz3v+nqY6XEg8vtyx8VBOY0CIddSAEBYCHH7qQ3W+DUhX9QmhML/86r9m12G+mO17XR7n/znma1sa5tvyMIpBuRhrawgACwhYfr1OYvcKaFf9KVALC66Jd2/5vfcCIATFwEgYmELYG6AgJAXV/VF1RgrYV/QiIARHRdafcfOD0ATHwEgYmELYE6AgJAHVdVF1TgfBb+CY0AsHYAmDgJAhMJWwIbKyAAbKynagsqsJ6Ff0IkAJz4w3+378A15/lzaHx0HPFgO/7eg94sOHkU2RKYXuA8n3jTH8CeBLaywDQL/8RDAFh9BaDr9h/Yu86fQ4LA5DFkS2AWgXU+8WY5lH0JbB2BWRb+iYIAMG0AmAgKAhMJWwLTCAgA06jZZ2EFNmLhn+AJACcl9u3fMyGZcisITAlntwUXEAAW/AHg9M9PYCMX/skRBYCIKBH79s0aACaigsBEwpbA+QgIAOej5D4LK1Bj4Z9gCgAbHQAmsoLARMKWwFoCAsBaOm5bWIGaC/8EVQCoFQAmwoLARMKWwJkEBIAzqbhuYQU2Y+Gf4AoAtQPARFoQmEjYEjhVQAA4VcPXCyuwmQv/BFkA2KwAMBEXBCYStgRWBQQAj4OFFpjHwj8BFwA2OwBM5AWBiYTtYgsIAIs9/4U9+3ku/BN0AWBeAWAyAUFgImG7mAICwGLOfWHPOsPCP8EXAOYdACaTEAQmEraLJSAALNa8F/ZsMy38kyEIAFkCwGQigsBEwnYxBASAxZjzwp5lxoV/MgwBIFsAmExmfHTcNh9tu5cO+58OTUxst6KAALAVp+qcIvPCPxmPAJA1AEwmJAhMJGy3poAAsDXnurBn1YeFfzIcASB7AJhMShCYSNhuLQEBYGvNc2HPpk8L/2RIAkBfAsBkYoLARMJ2awgIAFtjjgt7Fn1c+CfDEgD6FgAmkxMEJhK2/RYQAPo9v4Xtvs8L/2RoAkBfA8BkgoLARMK2nwJL/Wxb14sucEks/0lpmn2L7uD85ykw2D1o4kPR7fxHEXFgnp04NoFpBJppdrIPgXkLtE3snHcPjk9gVWAQ3UUkCPRRQADo49T0TIAAAQIEZhQQAGYEtDsBAgQIEOijgADQx6npmQABAgQIzCggAMwIaHcCBAgQINBHAQGgj1PTMwECBAgQmFFAAJgR0O4ECBAgQKCPAgJAH6emZwIECBAgMKOAADAjoN0JECBAgEAfBQSAPk5NzwQIECBAYEYBAWBGQLsTIECAAIE+CggAfZyangkQIECAwIwCAsCMgHYnQIAAAQJ9FBAA+jg1PRMgQIAAgRkFBIAZAe1OgAABAgT6KCAA9HFqeiZAgAABAjMKCAAzAtqdAAECBAj0UUAA6OPU9EyAAAECBGYUEABmBLQ7AQIECBDoo4AA0Mep6ZkAAQIECMwoIADMCGh3AgQIECDQRwEBoI9T0zMBAgQIEJhRYGnG/e3eU4Hddx3e/aNvve66+O4lX3zy8Dte7ulpaJsAgWkF/vbvXnhg7/htP/KWA1957L7bj05bxn79FRAA+ju7qTpfXfgv7pbv6crxf7F9XJ6/cO9477sOHflsN47ROJZGL5ddnzly8NoXpipuJwIE0gq8/u5fuvjC43tviWbbsI1uGPHsTdFd/M0dFy3tvvP+Jw6//NLy7wgCacdXpTEBoAprvqKnLvxN0+yKKKtNPt90g+0RcWsZxK1NjP91E8+2dxz6zJ+UGI/G0YyOPf/yE5/98N99Lt8Z6YgAgbUELvmZX738kksuv21Q2mHXdbeVcdxQBs1gdZ/Byef/q7sPdkeJf7vjoqV7BIG1RLfebQLA1pvpaWd0loX/tPuc+s0gmtX3hdwYMbixibj38tftjDsPPfG/SpRR1zWjY90Ljx85eMfTp+7jawIE5i9wxTt/4w3bLxj8dFlqhk3XDCPG15XSldWwX8qJwH+OJk8Gge07tt97x6HHDx9/ceWjXhE4B1nPbxYAej7As7W/3oX/bHVOXt/8eBfx41G6X7q0XBx3Hnryq1FitNK2o3bb9tEfve/GP49SurVruJUAgY0UeON7Prx/3A6GUbphEzEspTnwWv0TT8fp3uM9aMquiMF923c09wgCr4luyS8EgC021o1d+M+G0x2ILg4slfKPY2U57jh05Bvl/qdGbXd8tDSO0SO/etufCgRns3M9gekErr77N68brGwflq4dRsRtEeWawYk1/nx+u1//MQWB9Zv1bQ8BoG8TO0u/qwv/RXH83ijH//kpf+M/y7039upBafZGtL/QlKVfiCbiXYeeerYc+szjbRuj5ZUyuvwtf/nlh9773vHGHlU1AltaoHnDz/3GW5vtqwt+M+yivXUwjtfH6m/25/Vy/sbZCAIbZ5mtkgCQbSLr7OfUhX9QVt/cN///SumuiIh3N028+4LtXRz7vz9y7J0PPHmktCujdjAY7Xpq1+cfeujHjs+/Ux0QyCHwtl/8j9u++fx3bmrGS8NoxsOujXe89nwubYomBYEUY9jQJgSADeXcvGIZF/6znX0T3aXRxZ1RBncO2ojv3njse3fc+MSTEWU0aJdGz7xu8NQX/umNL51tf9cT2HICN9+zY+/VV968+tt9NDF85tljb1+KwY4Tv+F3zav/SCfnWQsCOecyTVcCwDRqc9znjX//w5eNtzX3rL7U/9pvCHPsZ5pDD5ruwojm9oi4PZpxXHmsXXnXoac+10U3arvxqGtfPvLpD/zsd6epbR8CGQX23/1bu14Zx62lK7etvmFv3MWNg9JsO+1f42VsfI2eTgsC//7Ig8dfPv6gfzWwBljCmwSAhEM5U0uThX9corcL/5nO6+R13VKJ7uYScXNTmoNdubB75wNPfCnaMooYP969NHj80ftueebs+7uFQC6Bq2/7zdeXK5eGg7YbNk0zXF6Onxg00UwW/EGd9+3NBeFkEIgPbd+x/X13CAJzmcG0B91CD8NpCXLvN1n4o8LCv+/Hrv/znZdevC+3wMnuxlH+rOm6UWnKaFwGo68ceexzgyhX9aH3s/W486pe0J+t/Y25vkTs27dnY2rNq0rXfvt/PnXkxrISPx1LMWyiDCPKtfNqZz3H3XbhxX/x12+4/k3r2edc9x233eqrd14ROBdUgtu9ApBgCGdqYbLwb83f+M90xmtfN4ju2ihxbXTdLw66ldi2bTBul3O8OWrtzt261QWWl8dXDKL5y/DT9MSovSLQn0e8h2zSWa1sH9y/VMo/Sdre3NsqMRhECABzH4QGVj/y4sTH66I4XWASBHbu3HZ1RPyz02/1XQaB6T4qKkPnW7yHwfl9ducWV3B6BAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAEmH00b7e+M2vpy0PW0RIEDgnALtuP3ScjS/f847usNcBJbmclQHPafANz5+8H9EdDdc8+7ffnfXdb8+aOL6c+60xe/QRvu/o+1GS103Wl5+5XATzRVb/JSdXg8EmqWlZ9u2uacdtMMyjuGgib/Rg7artri68I8H5b5PH7zlv0YpXdWDKT61gAAwNd1m7Fi6r38iPh7RfWLRgkDXjruuK18uZTDqyvLo6PL2J/7437zj2xP1ve+5/4HJ17YE5inQRIy//vC//E8RsXqJq+6478qli3cMu7YblhgMm4i/WZpYiFdbf2jh/5V5TsaxzyUgAJxLKMXtpwSB9zxwV9fGh7beKwJlJbr4fBvtaNwujVa+98qRx+67/WgKfk0QWIfAtx+975mI+M+vXmL3XYd3X9S9fGtptw270g0jup8cNM22dZRMf1cLf/oRnbFBAeCMLFmvLN3XPx6fiOgevqbnQWDclu+VZvxUdEujMjg+attdTz36/utfzCqvLwLTChx9+J6jRyM+FScvEXccumjvpc3by/J4WEoZRhM/VSJ2TFt/nvtZ+OepP/uxBYDZDedQoY9BoH2hawdHmqYbdctl9LVvXvH5//Oxt7wyBzyHJDBfgUd/5cVvRPxRnLxE3P0H2/e88hc3laYbLnVluFK6WwZNc8l8m1z76Bb+tX36cqsA0JdJnbHP04NAU+LXo4u3nvGum35lea7t2sdLNKO2WRk9+qmVL8djt65sehsOSCC7wEPvPf50xJE4eflw3P0Hgzcuf/Wt4zIYLpUYtm25rTRxeYbTaEv7xXY8vu8PDw4/eeLNff7Gn2EsU/cgAExNl2nH+QeBLuLpiDJquxiVdjD67x+46U8jSptJSS8EeiHw0HvH/y/iC3HycjiiK1f//OHrBoOV4VLphm1phiViz2aey2sL//tfXfgPbubRHauWgABQS3YudTcvCIy77mul6UYxXho1x18c/bdf+ztf88995jJ0B93yAqX71ifjKxEnLv9h9XSvvPPfHbjgoguHpS3DLtphibK/BoOFv4ZqnpoCQJ5ZbGAn3w8Ce+767X+wNOg+NOufBsZt+5VBGTxeohu99FLz+GP3vf3rpzX8wdO+8w0BAhUFnnnkg1+NiNXL764e5vKf+8jeC5ZeGS4NmmE3boZR2h8tpSnTtmDhn1auX/sJAP2a1zq7Ld3TD8fDEd1/WU8QGEfbNjH4YnTdqF2J0XPbX3niCwdvf3adB3d3AgQ2SeC5T937jYhY/cS9E5+6t+fnH7ii2dbd1rQx7KIbRtNdX6IZnKsdC/+5hLbW7QLA1prnWc5m7SAwbrvlaLrPRrM0Gh9fHm1/+oXPPPKxv3fsLMVcTYBAcoGnP/mvVgP7J169xOv+4S9fuvPFvbeUZnBbxIlQcFMTZfvkNCz8E4nF2goACzXv04NAu9S9pYvx51741uCPnzx8y8sLReFkCSyQwPO/97Fjz0c8EicvETffs+Oaq/b81NKg+Vsr7fKf/aE39y3Qo+H7pzr134i+X8JXBDZfYO977v/WIMpVm3/kjTvizqv2bVyxvlYqEfv2beob2jdeqmu//cj7b7164wurSKCuwEJ8PnVdQtUJECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgXmIdB03V/N47iOSeAHBdpu8MIPXud7An0QEAD6MCU9/pDAtqXubV1bPtiV+M4P3egKApsgMC7t8xHl1/4qLvvJTTicQxDYcIGy4RUVJLCJAvvv/q1dy8tLvxyD7t7SxWWbeOiZD7Xzqn0z1+h9gRKxb9+eXp3G6sI/6AYfOdZe9jtHDl7rt/9eTU+zpwoIAKdq+Lq3An0MAgJARPQoAFj4e/vjQeNnERAAzgLj6n4K9CkICAD9CAAW/n7+LND1uQUEgHMbuUcPBfoQBASA3AHAwt/DJ76W1yUgAKyLy537JpA5CAgAOQOAhb9vz3L9TisgAEwrZ79eCWQMAgJArgBg4e/VU1qzGyAgAGwAohL9EcgUBASAHAHAwt+f569ON1ZAANhYT9V6IpAhCAgA8w0AFv6ePFm1WU1AAKhGq3AfBOYZBASA+QQAC38fnpl63AwBAWAzlB0jvcA8goAAsLkBwMKf/mmowU0WEAA2GdzhcgtsZhAQADYnAFj4cz/ndDc/AQFgfvaOnFhgM4KAAFA7AJTnVsua074AAASYSURBVMryR14aX/kxH9mb+MmmtbkJCABzo3fgPgjUDAICQK0AYOHvw3NLj/MXEADmPwMd9ECgRhAQADY6AFj4e/BU0mIiAQEg0TC0kl9gI4OAABDRdV23/8DeGX8OWfjzP3N0mFFgxidexlPSE4H6AhsRBASAWQOAhb/+I90RtrKAALCVp+vcqgvMEgQEgIjo2m7fgWvW+XPIwl/9ge0ACyGwzifeQpg4SQLrFpgmCAgAq68AtN3+8w4AFv51PzDtQGANAQFgDRw3EVivwHqCgACwGgBKu//AG5q1nS38a/u4lcB0AgLAdG72IrCmwPkEAQHgXAHAwr/mg8yNBGYUEABmBLQ7gbUE1goCAsDqWwBKu//NP/gKgIV/rceU2whslIAAsFGS6hBYQ+BMQUAAWA0A0e5/855X/wRg4V/jIeQmAhsuIABsOKmCBM4ucGoQuOjKfZed/Z6LcUsbMT6wf+9RH9m7GPN2lrkEBIBc89DNggisBoGlXX/tJ6LpugU55TOf5gWlvP6aG77ks/rPzONaAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKgp8P8B3lrb1eiBle4AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/frontend/public/pipeline/S3.png b/frontend/public/pipeline/S3.png
new file mode 100644
index 0000000000000..46cba574308b5
Binary files /dev/null and b/frontend/public/pipeline/S3.png differ
diff --git a/frontend/public/pipeline/Snowflake.png b/frontend/public/pipeline/Snowflake.png
new file mode 100644
index 0000000000000..30dceb9dad357
Binary files /dev/null and b/frontend/public/pipeline/Snowflake.png differ
diff --git a/frontend/public/postgres-logo.svg b/frontend/public/postgres-logo.svg
new file mode 100644
index 0000000000000..6b65997a98d5e
--- /dev/null
+++ b/frontend/public/postgres-logo.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="432.071pt" height="445.383pt" viewBox="0 0 432.071 445.383" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+<g id="orginal" style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
+	</g>
+<g id="Layer_x0020_3" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;">
+<path style="fill:#000000;stroke:#000000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter;" d="M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322    C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31    c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224    l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107"/>
+<path style="fill:#336791;stroke:none;" d="M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902    c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416    c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555    c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z"/>
+<path d="M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281"/>
+<path d="M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335"/>
+<path d="M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329"/>
+<path style="stroke-linejoin:bevel;" d="M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338    c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762"/>
+<path d="M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z"/>
+<path d="M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938"/>
+<path style="fill:#FFFFFF;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter;" d="M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z"/>
+<path style="fill:#FFFFFF;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter;" d="M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z"/>
+<path d="M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435"/>
+<path style="stroke-width:3;" d="M0,60.232"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 58589b6972bbb..65c0ee7f286fb 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -9,7 +9,7 @@
             const tags = [
                 '{% if debug %}DEBUG mode{% elif region %}Region: {{ region }}{% else %}Hobby deployment{% endif %}',
                 '{% if debug %}Branch: {{ git_branch|default:"unknown" }}{% else %}Commit: {{ git_rev|default:"unknown" }}{% endif %}',
-                'Come join us! https://posthog.com/careers',
+                'Join us! https://posthog.com/careers',
             ]
             console.info(
                 `%c %cPostHog %c— %cIn data we trust\n%c${tags.join('%c %c')}`,
@@ -18,7 +18,7 @@
                 '',
                 'font-style: italic;',
                 'padding: 0.2em 0.4em; border-radius: 0.5em; background: #1d4aff; color: white;',
-                '',
+                'padding-bottom: 0.4em;',
                 'padding: 0.2em 0.4em; border-radius: 0.5em; background: #f54e00; color: white;',
                 '',
                 'padding: 0.2em 0.4em; border-radius: 0.5em; background: #f9bd2b; color: black;'
diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
index 0fb5a2ef44721..1a160c9b3e272 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
+++ b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
@@ -137,7 +137,6 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                             otherOrganizations?.length || preflight?.can_create_org
                                 ? {
                                       overlay: <OrganizationSwitcherOverlay />,
-                                      actionable: true,
                                   }
                                 : undefined,
                     })
@@ -152,7 +151,6 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                         name: currentTeam.name,
                         popover: {
                             overlay: <ProjectSwitcherOverlay />,
-                            actionable: true,
                         },
                     })
                 }
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index efb943fbe7d1d..aba1f43b325a3 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -31,6 +31,7 @@ import {
     EventType,
     Experiment,
     ExportedAssetType,
+    ExternalDataPostgresSchema,
     ExternalDataSourceCreatePayload,
     ExternalDataSourceSchema,
     ExternalDataStripeSource,
@@ -1826,6 +1827,22 @@ const api = {
         async reload(sourceId: ExternalDataStripeSource['id']): Promise<void> {
             await new ApiRequest().externalDataSource(sourceId).withAction('reload').create()
         },
+        async database_schema(
+            host: string,
+            port: string,
+            dbname: string,
+            user: string,
+            password: string,
+            schema: string
+        ): Promise<ExternalDataPostgresSchema[]> {
+            const queryParams = toParams({ host, port, dbname, user, password, schema })
+
+            return await new ApiRequest()
+                .externalDataSources()
+                .withAction('database_schema')
+                .withQueryString(queryParams)
+                .get()
+        },
     },
 
     externalDataSchemas: {
diff --git a/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss b/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
index d1494bd492108..709747349baa3 100644
--- a/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
+++ b/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
@@ -39,18 +39,11 @@
     .LemonModal {
         min-width: var(--annotations-popover-width);
         max-width: var(--annotations-popover-width);
+        min-height: 100%;
         margin: 0;
         border: none;
         box-shadow: none;
     }
-
-    .Popover__box {
-        padding: 0;
-    }
-
-    ul {
-        max-height: calc(4 * 6.75rem + 3 * 0.5rem); // Fit in 4 one-line annotations without scrolling
-    }
 }
 
 .AnnotationCard {
diff --git a/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx b/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx
index cb9f6fed1ecd6..0013943b0249c 100644
--- a/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx
+++ b/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx
@@ -198,6 +198,7 @@ function AnnotationsPopover({
             visible={isPopoverShown}
             onClickOutside={closePopover}
             showArrow
+            padded={false}
             overlay={
                 <LemonModal
                     inline
diff --git a/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx b/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx
index 9948846727e32..d6c50cc8edea6 100644
--- a/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx
+++ b/frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx
@@ -9,7 +9,7 @@ import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
 
-import { authorizedUrlListLogic, AuthorizedUrlListType as AuthorizedUrlListType } from './authorizedUrlListLogic'
+import { authorizedUrlListLogic, AuthorizedUrlListType } from './authorizedUrlListLogic'
 
 function EmptyState({
     numberOfResults,
diff --git a/frontend/src/lib/components/DateFilter/DateFilter.tsx b/frontend/src/lib/components/DateFilter/DateFilter.tsx
index f68f68867d1ed..f82453d829a02 100644
--- a/frontend/src/lib/components/DateFilter/DateFilter.tsx
+++ b/frontend/src/lib/components/DateFilter/DateFilter.tsx
@@ -16,15 +16,16 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { dateFilterToText, dateMapping, uuid } from 'lib/utils'
 import { useRef } from 'react'
 
-import { DateMappingOption } from '~/types'
+import { DateMappingOption, PropertyOperator } from '~/types'
 
+import { PropertyFilterDatePicker } from '../PropertyFilters/components/PropertyFilterDatePicker'
 import { dateFilterLogic } from './dateFilterLogic'
 import { RollingDateRangeFilter } from './RollingDateRangeFilter'
 
 export interface DateFilterProps {
     showCustom?: boolean
     showRollingRangePicker?: boolean
-    makeLabel?: (key: React.ReactNode) => React.ReactNode
+    makeLabel?: (key: React.ReactNode, startOfRange?: React.ReactNode) => React.ReactNode
     className?: string
     onChange?: (fromDate: string | null, toDate: string | null) => void
     disabled?: boolean
@@ -32,6 +33,8 @@ export interface DateFilterProps {
     isDateFormatted?: boolean
     size?: LemonButtonProps['size']
     dropdownPlacement?: Placement
+    /* True when we're not dealing with ranges, but a single date / relative date */
+    isFixedDateMode?: boolean
 }
 interface RawDateFilterProps extends DateFilterProps {
     dateFrom?: string | null | dayjs.Dayjs
@@ -53,6 +56,7 @@ export function DateFilter({
     size,
     dropdownPlacement = 'bottom-start',
     max,
+    isFixedDateMode = false,
 }: RawDateFilterProps): JSX.Element {
     const key = useRef(uuid()).current
     const logicProps: DateFilterLogicProps = {
@@ -62,11 +66,30 @@ export function DateFilter({
         onChange,
         dateOptions,
         isDateFormatted,
+        isFixedDateMode,
     }
-    const { open, openFixedRange, openDateToNow, close, setRangeDateFrom, setRangeDateTo, setDate, applyRange } =
-        useActions(dateFilterLogic(logicProps))
-    const { isVisible, view, rangeDateFrom, rangeDateTo, label, isFixedRange, isDateToNow, isRollingDateRange } =
-        useValues(dateFilterLogic(logicProps))
+    const {
+        open,
+        openFixedRange,
+        openDateToNow,
+        openFixedDate,
+        close,
+        setRangeDateFrom,
+        setRangeDateTo,
+        setDate,
+        applyRange,
+    } = useActions(dateFilterLogic(logicProps))
+    const {
+        isVisible,
+        view,
+        rangeDateFrom,
+        rangeDateTo,
+        label,
+        isFixedRange,
+        isDateToNow,
+        isFixedDate,
+        isRollingDateRange,
+    } = useValues(dateFilterLogic(logicProps))
 
     const optionsRef = useRef<HTMLDivElement | null>(null)
     const rollingDateRangeRef = useRef<HTMLDivElement | null>(null)
@@ -93,6 +116,15 @@ export function DateFilter({
                 }}
                 onClose={open}
             />
+        ) : view === DateFilterView.FixedDate ? (
+            <PropertyFilterDatePicker
+                autoFocus
+                operator={PropertyOperator.Exact}
+                value={rangeDateFrom ? rangeDateFrom.toString() : dayjs().toString()}
+                setValue={(date) => {
+                    setDate(String(date), '')
+                }}
+            />
         ) : (
             <div className="space-y-px" ref={optionsRef} onClick={(e) => e.stopPropagation()}>
                 {dateOptions.map(({ key, values, inactive }) => {
@@ -113,9 +145,18 @@ export function DateFilter({
                         dateOptions,
                         isDateFormatted
                     )
+                    const startOfRangeDateValue = dateFilterToText(
+                        values[0],
+                        undefined,
+                        '',
+                        [],
+                        false,
+                        'MMMM D, YYYY',
+                        true
+                    )
 
                     return (
-                        <Tooltip key={key} title={makeLabel ? makeLabel(dateValue) : undefined}>
+                        <Tooltip key={key} title={makeLabel ? makeLabel(dateValue, startOfRangeDateValue) : undefined}>
                             <LemonButton
                                 key={key}
                                 onClick={() => setDate(values[0] || null, values[1] || null)}
@@ -129,7 +170,9 @@ export function DateFilter({
                 })}
                 {showRollingRangePicker && (
                     <RollingDateRangeFilter
+                        pageKey={key}
                         dateFrom={dateFrom}
+                        dateRangeFilterLabel={isFixedDateMode ? 'Last' : undefined}
                         selected={isRollingDateRange}
                         onChange={(fromDate) => {
                             setDate(fromDate, '')
@@ -139,15 +182,25 @@ export function DateFilter({
                             ref: rollingDateRangeRef,
                         }}
                         max={max}
+                        allowedDateOptions={isFixedDateMode ? ['hours', 'days', 'weeks', 'months', 'years'] : undefined}
+                        fullWidth
                     />
                 )}
                 <LemonDivider />
-                <LemonButton onClick={openDateToNow} active={isDateToNow} fullWidth>
-                    From custom date until now…
-                </LemonButton>
-                <LemonButton onClick={openFixedRange} active={isFixedRange} fullWidth>
-                    Custom fixed date range…
-                </LemonButton>
+                {isFixedDateMode ? (
+                    <LemonButton onClick={openFixedDate} active={isFixedDate} fullWidth>
+                        Custom date...
+                    </LemonButton>
+                ) : (
+                    <>
+                        <LemonButton onClick={openDateToNow} active={isDateToNow} fullWidth>
+                            From custom date until now…
+                        </LemonButton>
+                        <LemonButton onClick={openFixedRange} active={isFixedRange} fullWidth>
+                            Custom fixed date range…
+                        </LemonButton>
+                    </>
+                )}
             </div>
         )
 
diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx
index 99b1b12a31723..483d865c23f59 100644
--- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx
+++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx
@@ -1,28 +1,34 @@
 import './RollingDateRangeFilter.scss'
 
-import { LemonButton, LemonInput, LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
+import { LemonButton, LemonButtonProps, LemonInput, LemonSelect, LemonSelectOptionLeaf } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { dayjs } from 'lib/dayjs'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 
 import { DateOption, rollingDateRangeFilterLogic } from './rollingDateRangeFilterLogic'
 
-const dateOptions: LemonSelectOptions<DateOption> = [
+const dateOptions: LemonSelectOptionLeaf<DateOption>[] = [
+    { value: 'hours', label: 'hours' },
     { value: 'days', label: 'days' },
     { value: 'weeks', label: 'weeks' },
     { value: 'months', label: 'months' },
     { value: 'quarters', label: 'quarters' },
+    { value: 'years', label: 'years' },
 ]
 
 type RollingDateRangeFilterProps = {
+    pageKey?: string
     selected?: boolean
     dateFrom?: string | null | dayjs.Dayjs
     max?: number | null
     onChange?: (fromDate: string) => void
-    makeLabel?: (key: React.ReactNode) => React.ReactNode
+    makeLabel?: (key: React.ReactNode, startOfRange?: React.ReactNode) => React.ReactNode
     popover?: {
         ref?: React.MutableRefObject<HTMLDivElement | null>
     }
+    dateRangeFilterLabel?: string
+    allowedDateOptions?: DateOption[]
+    fullWidth?: LemonButtonProps['fullWidth']
 }
 
 export function RollingDateRangeFilter({
@@ -32,21 +38,26 @@ export function RollingDateRangeFilter({
     dateFrom,
     selected,
     max,
+    dateRangeFilterLabel = 'In the last',
+    pageKey,
+    allowedDateOptions = ['days', 'weeks', 'months', 'years'],
+    fullWidth,
 }: RollingDateRangeFilterProps): JSX.Element {
-    const logicProps = { onChange, dateFrom, selected, max }
+    const logicProps = { onChange, dateFrom, selected, max, pageKey }
     const { increaseCounter, decreaseCounter, setCounter, setDateOption, toggleDateOptionsSelector, select } =
         useActions(rollingDateRangeFilterLogic(logicProps))
-    const { counter, dateOption, formattedDate } = useValues(rollingDateRangeFilterLogic(logicProps))
+    const { counter, dateOption, formattedDate, startOfDateRange } = useValues(rollingDateRangeFilterLogic(logicProps))
 
     return (
-        <Tooltip title={makeLabel ? makeLabel(formattedDate) : undefined}>
+        <Tooltip title={makeLabel ? makeLabel(formattedDate, startOfDateRange) : undefined}>
             <LemonButton
                 className="RollingDateRangeFilter"
                 data-attr="rolling-date-range-filter"
                 onClick={select}
                 active={selected}
+                fullWidth={fullWidth}
             >
-                <p className="RollingDateRangeFilter__label">In the last</p>
+                <p className="RollingDateRangeFilter__label">{dateRangeFilterLabel}</p>
                 <div className="RollingDateRangeFilter__counter" onClick={(e): void => e.stopPropagation()}>
                     <span
                         className="RollingDateRangeFilter__counter__step"
@@ -82,7 +93,7 @@ export function RollingDateRangeFilter({
                         toggleDateOptionsSelector()
                     }}
                     dropdownMatchSelectWidth={false}
-                    options={dateOptions}
+                    options={dateOptions.filter((option) => allowedDateOptions.includes(option.value))}
                     menu={{
                         ...popover,
                         className: 'RollingDateRangeFilter__popover',
diff --git a/frontend/src/lib/components/DateFilter/dateFilterLogic.ts b/frontend/src/lib/components/DateFilter/dateFilterLogic.ts
index 77faff7074618..d09067f80ce47 100644
--- a/frontend/src/lib/components/DateFilter/dateFilterLogic.ts
+++ b/frontend/src/lib/components/DateFilter/dateFilterLogic.ts
@@ -15,6 +15,7 @@ export const dateFilterLogic = kea<dateFilterLogicType>([
         open: true,
         openFixedRange: true,
         openDateToNow: true,
+        openFixedDate: true,
         close: true,
         applyRange: true,
         setDate: (dateFrom: string | null, dateTo: string | null) => ({ dateFrom, dateTo }),
@@ -28,6 +29,7 @@ export const dateFilterLogic = kea<dateFilterLogicType>([
                 open: () => DateFilterView.QuickList,
                 openFixedRange: () => DateFilterView.FixedRange,
                 openDateToNow: () => DateFilterView.DateToNow,
+                openFixedDate: () => DateFilterView.FixedDate,
             },
         ],
         isVisible: [
@@ -36,6 +38,7 @@ export const dateFilterLogic = kea<dateFilterLogicType>([
                 open: () => true,
                 openFixedRange: () => true,
                 openDateToNow: () => true,
+                openFixedDate: () => true,
                 setDate: () => false,
                 close: () => false,
             },
@@ -71,14 +74,20 @@ export const dateFilterLogic = kea<dateFilterLogicType>([
             (dateFrom, dateTo) => !!(dateFrom && dateTo && dayjs(dateFrom).isValid() && dayjs(dateTo).isValid()),
         ],
         isDateToNow: [
-            (s) => [s.dateFrom, s.dateTo],
-            (dateFrom, dateTo) => !!dateFrom && !dateTo && dayjs(dateFrom).isValid(),
+            (s) => [s.dateFrom, s.dateTo, (_, p) => p.isFixedDateMode],
+            (dateFrom, dateTo, isFixedDateMode) =>
+                !!dateFrom && !dateTo && dayjs(dateFrom).isValid() && !isFixedDateMode,
+        ],
+        isFixedDate: [
+            (s) => [s.dateFrom, s.dateTo, (_, p) => p.isFixedDateMode],
+            (dateFrom, dateTo, isFixedDateMode) => dateFrom && dayjs(dateFrom).isValid() && !dateTo && isFixedDateMode,
         ],
         isRollingDateRange: [
-            (s) => [s.isFixedRange, s.isDateToNow, s.dateOptions, s.dateFrom, s.dateTo],
-            (isFixedRange, isDateToNow, dateOptions, dateFrom, dateTo): boolean =>
+            (s) => [s.isFixedRange, s.isDateToNow, s.isFixedDate, s.dateOptions, s.dateFrom, s.dateTo],
+            (isFixedRange, isDateToNow, isFixedDate, dateOptions, dateFrom, dateTo): boolean =>
                 !isFixedRange &&
                 !isDateToNow &&
+                !isFixedDate &&
                 !dateOptions?.find(
                     (option) =>
                         (option.values[0] ?? null) === (dateFrom ?? null) &&
@@ -86,12 +95,14 @@ export const dateFilterLogic = kea<dateFilterLogicType>([
                 ),
         ],
         label: [
-            (s) => [s.dateFrom, s.dateTo, s.isFixedRange, s.isDateToNow, s.dateOptions],
-            (dateFrom, dateTo, isFixedRange, isDateToNow, dateOptions) =>
+            (s) => [s.dateFrom, s.dateTo, s.isFixedRange, s.isDateToNow, s.isFixedDate, s.dateOptions],
+            (dateFrom, dateTo, isFixedRange, isDateToNow, isFixedDate, dateOptions) =>
                 isFixedRange
                     ? formatDateRange(dayjs(dateFrom), dayjs(dateTo))
                     : isDateToNow
                     ? `${formatDate(dayjs(dateFrom))} to now`
+                    : isFixedDate
+                    ? formatDate(dateStringToDayJs(dateFrom) ?? dayjs(dateFrom))
                     : dateFilterToText(dateFrom, dateTo, CUSTOM_OPTION_VALUE, dateOptions, false),
         ],
     }),
diff --git a/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts b/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts
index 29bed83a7566f..821a1095b716e 100644
--- a/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts
+++ b/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts
@@ -1,16 +1,18 @@
 import './RollingDateRangeFilter.scss'
 
-import { actions, kea, listeners, path, props, reducers, selectors } from 'kea'
+import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { Dayjs } from 'lib/dayjs'
 import { dateFilterToText } from 'lib/utils'
 
 import type { rollingDateRangeFilterLogicType } from './rollingDateRangeFilterLogicType'
 
 const dateOptionsMap = {
+    y: 'years',
     q: 'quarters',
     m: 'months',
     w: 'weeks',
     d: 'days',
+    h: 'hours',
 } as const
 
 export type DateOption = (typeof dateOptionsMap)[keyof typeof dateOptionsMap]
@@ -20,6 +22,7 @@ export type RollingDateFilterLogicPropsType = {
     onChange?: (fromDate: string) => void
     dateFrom?: Dayjs | string | null
     max?: number | null
+    pageKey?: string
 }
 
 const counterDefault = (selected: boolean | undefined, dateFrom: Dayjs | string | null | undefined): number => {
@@ -32,7 +35,7 @@ const counterDefault = (selected: boolean | undefined, dateFrom: Dayjs | string
     return 3
 }
 
-const dateOptionDefault = (selected: boolean | undefined, dateFrom: Dayjs | string | null | undefined): string => {
+const dateOptionDefault = (selected: boolean | undefined, dateFrom: Dayjs | string | null | undefined): DateOption => {
     if (selected && dateFrom && typeof dateFrom === 'string') {
         const dateOption = dateOptionsMap[dateFrom.slice(-1)]
         if (dateOption) {
@@ -44,15 +47,16 @@ const dateOptionDefault = (selected: boolean | undefined, dateFrom: Dayjs | stri
 
 export const rollingDateRangeFilterLogic = kea<rollingDateRangeFilterLogicType>([
     path(['lib', 'components', 'DateFilter', 'RollingDateRangeFilterLogic']),
+    props({} as RollingDateFilterLogicPropsType),
+    key(({ pageKey }) => pageKey ?? 'unknown'),
     actions({
         increaseCounter: true,
         decreaseCounter: true,
         setCounter: (counter: number | null | undefined) => ({ counter }),
-        setDateOption: (option: string) => ({ option }),
+        setDateOption: (option: DateOption) => ({ option }),
         toggleDateOptionsSelector: true,
         select: true,
     }),
-    props({} as RollingDateFilterLogicPropsType),
     reducers(({ props }) => ({
         counter: [
             counterDefault(props.selected, props.dateFrom) as number | null,
@@ -84,17 +88,23 @@ export const rollingDateRangeFilterLogic = kea<rollingDateRangeFilterLogicType>(
     selectors(() => ({
         value: [
             (s) => [s.counter, s.dateOption],
-            (counter: number | null, dateOption: string) => {
+            (counter, dateOption) => {
                 if (!counter) {
                     return ''
                 }
                 switch (dateOption) {
+                    case 'years':
+                        return `-${counter}y`
                     case 'quarters':
                         return `-${counter}q`
                     case 'months':
                         return `-${counter}m`
                     case 'weeks':
                         return `-${counter}w`
+                    case 'days':
+                        return `-${counter}d`
+                    case 'hours':
+                        return `-${counter}h`
                     default:
                         return `-${counter}d`
                 }
@@ -106,6 +116,20 @@ export const rollingDateRangeFilterLogic = kea<rollingDateRangeFilterLogicType>(
                 return dateFilterToText(value, undefined, 'Custom rolling range', [], true)
             },
         ],
+        startOfDateRange: [
+            (s) => [s.value],
+            (value: string) => {
+                return dateFilterToText(
+                    value,
+                    undefined,
+                    'N/A',
+                    [],
+                    false,
+                    value.slice(-1) === 'h' ? 'MMMM D, YYYY HH:mm:ss' : 'MMMM D, YYYY',
+                    true
+                )
+            },
+        ],
     })),
     listeners(({ props, values }) => ({
         select: () => {
diff --git a/frontend/src/lib/components/DateFilter/types.ts b/frontend/src/lib/components/DateFilter/types.ts
index d3563cbbad0bf..506eb7bab36ae 100644
--- a/frontend/src/lib/components/DateFilter/types.ts
+++ b/frontend/src/lib/components/DateFilter/types.ts
@@ -6,6 +6,7 @@ export enum DateFilterView {
     QuickList = 'QuickList',
     DateToNow = 'DateToNow',
     FixedRange = 'FixedRange',
+    FixedDate = 'FixedDate',
 }
 
 export type DateFilterLogicProps = {
@@ -15,6 +16,7 @@ export type DateFilterLogicProps = {
     dateTo?: Dayjs | string | null
     dateOptions?: DateMappingOption[]
     isDateFormatted?: boolean
+    isFixedDateMode?: boolean
 }
 
 export const CUSTOM_OPTION_KEY = 'Custom'
diff --git a/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx b/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx
index b0e9045a7e102..87af06c95353e 100644
--- a/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx
@@ -84,9 +84,7 @@ export function ActionPopoverInfo({ entity }: { entity: ActionType }): JSX.Eleme
                             }
                         />
                         {entity.steps && index < entity.steps.length - 1 && (
-                            <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                OR
-                            </DefinitionPopover.HorizontalLine>
+                            <DefinitionPopover.HorizontalLine className="mt-1 mb-3" label="OR" />
                         )}
                     </DefinitionPopover.Section>
                 ))}
diff --git a/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx b/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx
index 2cfcf0ad93948..a7645f10e330c 100644
--- a/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx
@@ -1,3 +1,4 @@
+import { LemonDivider } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { DefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopover'
 import {
@@ -32,7 +33,9 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
     }
     return cohort.filters?.properties ? (
         <>
-            {(cohort.filters.properties?.values?.length || 0 > 0) && <DefinitionPopover.HorizontalLine />}
+            {(cohort.filters.properties?.values?.length || 0 > 0) && (
+                <LemonDivider className="DefinitionPopover my-2" />
+            )}
             {cohort.filters.properties.values.slice(0, MAX_CRITERIA_GROUPS).map(
                 (cohortGroup, cohortGroupIndex) =>
                     isCohortCriteriaGroup(cohortGroup) && (
@@ -75,21 +78,24 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
                             />
                             {cohortGroupIndex <
                                 Math.min(cohort.filters.properties.values.length, MAX_CRITERIA_GROUPS) - 1 && (
-                                <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                    {cohort.filters.properties.type}
-                                </DefinitionPopover.HorizontalLine>
+                                <DefinitionPopover.HorizontalLine
+                                    className="mt-1 mb-3"
+                                    label={cohort.filters.properties.type}
+                                />
                             )}
                             {cohort.filters.properties.values.length > MAX_CRITERIA_GROUPS &&
                                 cohortGroupIndex === MAX_CRITERIA_GROUPS - 1 && (
-                                    <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                        {cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS} more criteria{' '}
-                                        {pluralize(
+                                    <DefinitionPopover.HorizontalLine
+                                        className="mt-1 mb-3"
+                                        label={`${
+                                            cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS
+                                        } more criteria ${pluralize(
                                             cohort.filters.properties.values.length - MAX_CRITERIA_GROUPS,
                                             'group',
                                             'groups',
                                             false
-                                        )}
-                                    </DefinitionPopover.HorizontalLine>
+                                        )}`}
+                                    />
                                 )}
                         </DefinitionPopover.Section>
                     )
@@ -97,7 +103,7 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
         </>
     ) : (
         <>
-            {(cohort.groups?.length || 0 > 0) && <DefinitionPopover.HorizontalLine />}
+            {(cohort.groups?.length || 0 > 0) && <LemonDivider className="DefinitionPopover my-2" />}
             {cohort.groups &&
                 cohort.groups.map((group, index) => (
                     <DefinitionPopover.Section key={index}>
@@ -136,9 +142,7 @@ export function CohortPopoverInfo({ cohort }: { cohort: CohortType }): JSX.Eleme
                             />
                         )}
                         {cohort.groups && index < cohort.groups.length - 1 && (
-                            <DefinitionPopover.HorizontalLine style={{ marginTop: 4, marginBottom: 12 }}>
-                                OR
-                            </DefinitionPopover.HorizontalLine>
+                            <DefinitionPopover.HorizontalLine className="mt-1 mb-3" label="OR" />
                         )}
                     </DefinitionPopover.Section>
                 ))}
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
index f458e5ef69dc7..abc3ea434c470 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
@@ -1,5 +1,6 @@
 .definition-popover {
-    width: 20rem;
+    min-width: 17rem;
+    max-width: 20rem;
     padding: 0.5rem 0.75rem 0.75rem;
 
     .definition-popover-header {
@@ -100,13 +101,16 @@
         }
     }
 
-    .definition-popover-divider {
-        align-items: flex-start;
-        width: 100%;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        font-size: 0.6875rem;
-        text-transform: uppercase;
+    .DefinitionPopover {
+        background-color: var(--side);
+
+        .DefinitionPopover__label {
+            align-items: flex-start;
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+        }
     }
 
     .definition-popover-grid {
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
index 3a31f5e704ee1..69f41cee66983 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
@@ -1,7 +1,6 @@
 import './DefinitionPopover.scss'
 
-import { ProfilePicture } from '@posthog/lemon-ui'
-import { Divider, DividerProps } from 'antd'
+import { LemonDivider, ProfilePicture } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
@@ -196,11 +195,12 @@ function Owner({ user }: { user?: UserBasicType | null }): JSX.Element {
     )
 }
 
-function HorizontalLine({ children, ...props }: DividerProps): JSX.Element {
+function HorizontalLine({ className, label }: { className?: string; label?: string }): JSX.Element {
     return (
-        <Divider className="definition-popover-divider" {...props}>
-            {children}
-        </Divider>
+        <LemonDivider
+            className={clsx('DefinitionPopover items-start my-4', className)}
+            label={label && <span className="DefinitionPopover__label">{label}</span>}
+        />
     )
 }
 
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
index 7193044205f95..b1e644c01f16a 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
@@ -1,5 +1,5 @@
 import { hide } from '@floating-ui/react'
-import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
+import { LemonButton, LemonCheckbox, LemonDivider } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { ActionPopoverInfo } from 'lib/components/DefinitionPopover/ActionPopoverInfo'
 import { CohortPopoverInfo } from 'lib/components/DefinitionPopover/CohortPopoverInfo'
@@ -129,7 +129,7 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
                 updatedAt={(definition && 'updated_at' in definition && definition.updated_at) || undefined}
                 updatedBy={(definition && 'updated_by' in definition && definition.updated_by) || undefined}
             />
-            <DefinitionPopover.HorizontalLine />
+            <LemonDivider className="DefinitionPopover my-4" />
         </>
     )
 
@@ -169,7 +169,7 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
             <>
                 {sharedComponents}
                 <ActionPopoverInfo entity={_definition} />
-                {(_definition?.steps?.length || 0) > 0 && <DefinitionPopover.HorizontalLine />}
+                {(_definition?.steps?.length || 0) > 0 && <LemonDivider className="DefinitionPopover my-4" />}
                 <DefinitionPopover.Grid cols={2}>
                     <DefinitionPopover.Card
                         title="First seen"
@@ -284,7 +284,7 @@ function DefinitionEdit(): JSX.Element {
 
     return (
         <>
-            <DefinitionPopover.HorizontalLine />
+            <LemonDivider className="DefinitionPopover my-4" />
             <form className="definition-popover-edit-form">
                 {definition && 'description' in localDefinition && (
                     <>
@@ -331,7 +331,7 @@ function DefinitionEdit(): JSX.Element {
                         compact
                     />
                 )}
-                <DefinitionPopover.HorizontalLine style={{ marginTop: 0 }} />
+                <LemonDivider className="DefinitionPopover mt-0" />
                 <div className="flex items-center justify-between gap-2 click-outside-block">
                     {!hideView && isViewable && type !== TaxonomicFilterGroupType.Events ? (
                         <LemonButton
diff --git a/frontend/src/lib/components/HelpButton/HelpButton.tsx b/frontend/src/lib/components/HelpButton/HelpButton.tsx
index 11d6c4f3f935a..15cb15f1407d4 100644
--- a/frontend/src/lib/components/HelpButton/HelpButton.tsx
+++ b/frontend/src/lib/components/HelpButton/HelpButton.tsx
@@ -170,7 +170,6 @@ export function HelpButton({
                 onVisibilityChange={(visible) => !visible && hideHelp()}
                 visible={isHelpVisible}
                 placement={placement}
-                actionable
                 onClickOutside={hideHelp}
             >
                 <div className={clsx('help-button', inline && 'inline')} onClick={toggleHelp} data-attr="help-button">
diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
index cf041db3e4ac9..2e74c8668ac64 100644
--- a/frontend/src/lib/components/PageHeader.tsx
+++ b/frontend/src/lib/components/PageHeader.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { useValues } from 'kea'
-import { Within3000PageHeaderContext } from 'lib/lemon-ui/LemonButton/LemonButton'
+import { WithinPageHeaderContext } from 'lib/lemon-ui/LemonButton/LemonButton'
 import { createPortal } from 'react-dom'
 import { DraggableToNotebookProps } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 
@@ -22,7 +22,7 @@ export function PageHeader({ caption, buttons, tabbedPage }: PageHeaderProps): J
             {buttons &&
                 actionsContainer &&
                 createPortal(
-                    <Within3000PageHeaderContext.Provider value={true}>{buttons}</Within3000PageHeaderContext.Provider>,
+                    <WithinPageHeaderContext.Provider value={true}>{buttons}</WithinPageHeaderContext.Provider>,
                     actionsContainer
                 )}
 
diff --git a/frontend/src/lib/components/PasswordStrength.tsx b/frontend/src/lib/components/PasswordStrength.tsx
index f3f5be49ef656..5c27a530d05af 100644
--- a/frontend/src/lib/components/PasswordStrength.tsx
+++ b/frontend/src/lib/components/PasswordStrength.tsx
@@ -1,4 +1,4 @@
-import { Progress } from 'antd'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import zxcvbn from 'zxcvbn'
 
@@ -15,14 +15,12 @@ export default function PasswordStrength({
 
     return (
         <Tooltip title="Password strength">
-            <Progress
+            <LemonProgress
                 percent={passwordScore}
-                size="small"
                 strokeColor={
                     passwordScore <= 50 ? 'var(--danger)' : passwordScore <= 75 ? 'var(--warning)' : 'var(--success)'
                 }
                 className={className}
-                showInfo={false}
             />
         </Tooltip>
     )
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
index 59fd0dc43e1e0..361bfc4a87fba 100644
--- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
+++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -4,11 +4,12 @@ import { IconPencil, IconWarning } from '@posthog/icons'
 import { LemonCheckbox, LemonInput, LemonTag, Link, Tooltip } from '@posthog/lemon-ui'
 import { Dropdown, Input, Menu, Popconfirm } from 'antd'
 import clsx from 'clsx'
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { combineUrl } from 'kea-router'
 import { IconDeleteForever } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
+import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
 import { KEY_MAPPING, keyMappingKeys } from 'lib/taxonomy'
 import { isURL } from 'lib/utils'
 import { useMemo, useState } from 'react'
@@ -206,7 +207,8 @@ export function PropertiesTable({
     type,
 }: PropertiesTableType): JSX.Element {
     const [searchTerm, setSearchTerm] = useState('')
-    const [filtered, setFiltered] = useState(false)
+    const { hidePostHogPropertiesInTable } = useValues(userPreferencesLogic)
+    const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic)
 
     if (Array.isArray(properties)) {
         return (
@@ -249,7 +251,7 @@ export function PropertiesTable({
             })
         }
 
-        if (filterable && filtered) {
+        if (filterable && hidePostHogPropertiesInTable) {
             entries = entries.filter(([key]) => !key.startsWith('$') && !keyMappingKeys.includes(key))
         }
 
@@ -278,7 +280,7 @@ export function PropertiesTable({
             })
         }
         return entries
-    }, [properties, sortProperties, searchTerm, filtered])
+    }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable])
 
     if (properties instanceof Object) {
         const columns: LemonTableColumns<Record<string, any>> = [
@@ -376,10 +378,10 @@ export function PropertiesTable({
 
                             {filterable && (
                                 <LemonCheckbox
-                                    checked={filtered}
+                                    checked={hidePostHogPropertiesInTable}
                                     label="Hide PostHog properties"
                                     bordered
-                                    onChange={setFiltered}
+                                    onChange={setHidePostHogPropertiesInTable}
                                 />
                             )}
                         </span>
@@ -398,14 +400,14 @@ export function PropertiesTable({
                     className={className}
                     emptyState={
                         <>
-                            {filtered || searchTerm ? (
+                            {hidePostHogPropertiesInTable || searchTerm ? (
                                 <span className="flex gap-2">
                                     <span>No properties found</span>
                                     <LemonButton
                                         noPadding
                                         onClick={() => {
                                             setSearchTerm('')
-                                            setFiltered(false)
+                                            setHidePostHogPropertiesInTable(false)
                                         }}
                                     >
                                         Clear filters
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
index 14318daf54402..ca2157fd321b4 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -33,6 +33,7 @@ interface PropertyFiltersProps {
     allowNew?: boolean
     errorMessages?: JSX.Element[] | null
     propertyAllowList?: { [key in TaxonomicFilterGroupType]?: string[] }
+    allowRelativeDateOptions?: boolean
 }
 
 export function PropertyFilters({
@@ -55,6 +56,7 @@ export function PropertyFilters({
     allowNew = true,
     errorMessages = null,
     propertyAllowList,
+    allowRelativeDateOptions,
 }: PropertyFiltersProps): JSX.Element {
     const logicProps = { propertyFilters, onChange, pageKey, sendAllKeyUpdates }
     const { filters, filtersWithNew } = useValues(propertyFilterLogic(logicProps))
@@ -112,6 +114,7 @@ export function PropertyFilters({
                                             }}
                                             propertyAllowList={propertyAllowList}
                                             taxonomicFilterOptionsFromProp={taxonomicFilterOptionsFromProp}
+                                            allowRelativeDateOptions={allowRelativeDateOptions}
                                         />
                                     )}
                                     errorMessage={errorMessages && errorMessages[index]}
diff --git a/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss b/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss
index 8b07ffb8b56b2..9df0828a560de 100644
--- a/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss
@@ -1,6 +1,5 @@
-.filter-row-popover {
-    // so the datepicker is visible
-    overflow: visible;
+.filter-row-popover .ScrollableShadows {
+    overflow: visible; // Only required because the Ant popover is rendered _within_ the filter popover
 }
 
 .property-filter-row {
diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
index d1d192368181a..289e3fa3ec30b 100644
--- a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -27,6 +27,7 @@ export interface OperatorValueSelectProps {
     eventNames?: string[]
     propertyDefinitions: PropertyDefinition[]
     defaultOpen?: boolean
+    addRelativeDateTimeOptions?: boolean
 }
 
 interface OperatorSelectProps extends Omit<LemonSelectProps<any>, 'options'> {
@@ -67,6 +68,7 @@ export function OperatorValueSelect({
     propertyDefinitions = [],
     eventNames = [],
     defaultOpen,
+    addRelativeDateTimeOptions,
 }: OperatorValueSelectProps): JSX.Element {
     const propertyDefinition = propertyDefinitions.find((pd) => pd.name === propkey)
 
@@ -153,6 +155,7 @@ export function OperatorValueSelect({
                         }}
                         // open automatically only if new filter
                         autoFocus={!isMobile() && value === null}
+                        addRelativeDateTimeOptions={addRelativeDateTimeOptions}
                     />
                 </div>
             )}
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
index 033e0b2680b1e..c993676fabca4 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
@@ -3,11 +3,13 @@ import './PropertyValue.scss'
 import { AutoComplete } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { DurationPicker } from 'lib/components/DurationPicker/DurationPicker'
 import { PropertyFilterDatePicker } from 'lib/components/PropertyFilters/components/PropertyFilterDatePicker'
 import { propertyFilterTypeToPropertyDefinitionType } from 'lib/components/PropertyFilters/utils'
+import { dayjs } from 'lib/dayjs'
 import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
-import { isOperatorDate, isOperatorFlag, isOperatorMulti, toString } from 'lib/utils'
+import { formatDate, isOperatorDate, isOperatorFlag, isOperatorMulti, toString } from 'lib/utils'
 import { useEffect, useRef, useState } from 'react'
 
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
@@ -25,6 +27,7 @@ export interface PropertyValueProps {
     autoFocus?: boolean
     allowCustom?: boolean
     eventNames?: string[]
+    addRelativeDateTimeOptions?: boolean
 }
 
 function matchesLowerCase(needle?: string, haystack?: string): boolean {
@@ -46,6 +49,7 @@ export function PropertyValue({
     autoFocus = false,
     allowCustom = true,
     eventNames = [],
+    addRelativeDateTimeOptions = false,
 }: PropertyValueProps): JSX.Element {
     // what the human has typed into the box
     const [input, setInput] = useState(Array.isArray(value) ? '' : toString(value) ?? '')
@@ -193,6 +197,50 @@ export function PropertyValue({
         )
     }
 
+    if (isDateTimeProperty && addRelativeDateTimeOptions) {
+        if (operator === PropertyOperator.IsDateExact) {
+            return (
+                <PropertyFilterDatePicker autoFocus={autoFocus} operator={operator} value={value} setValue={setValue} />
+            )
+        }
+
+        return (
+            <DateFilter
+                dateFrom={String(value)}
+                onChange={setValue}
+                max={10000}
+                isFixedDateMode
+                dateOptions={[
+                    {
+                        key: 'Last 24 hours',
+                        values: ['-24h'],
+                        getFormattedDate: (date: dayjs.Dayjs): string => formatDate(date.subtract(24, 'h')),
+                        defaultInterval: 'hour',
+                    },
+                    {
+                        key: 'Last 7 days',
+                        values: ['-7d'],
+                        getFormattedDate: (date: dayjs.Dayjs): string => formatDate(date.subtract(7, 'd')),
+                        defaultInterval: 'day',
+                    },
+                    {
+                        key: 'Last 14 days',
+                        values: ['-14d'],
+                        getFormattedDate: (date: dayjs.Dayjs): string => formatDate(date.subtract(14, 'd')),
+                        defaultInterval: 'day',
+                    },
+                ]}
+                size="medium"
+                makeLabel={(_, startOfRange) => (
+                    <span className="hide-when-small">
+                        Matches all values {operator === PropertyOperator.IsDateBefore ? 'before' : 'after'}{' '}
+                        {startOfRange}
+                    </span>
+                )}
+            />
+        )
+    }
+
     return isDateTimeProperty ? (
         <PropertyFilterDatePicker autoFocus={autoFocus} operator={operator} value={value} setValue={setValue} />
     ) : isDurationProperty ? (
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
index 2875a289f97b7..533f565397751 100644
--- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
@@ -45,6 +45,7 @@ export function TaxonomicPropertyFilter({
     metadataSource,
     propertyAllowList,
     taxonomicFilterOptionsFromProp,
+    allowRelativeDateOptions,
 }: PropertyFilterInternalProps): JSX.Element {
     const pageKey = useMemo(() => pageKeyInput || `filter-${uniqueMemoizedIndex++}`, [pageKeyInput])
     const groupTypes = taxonomicGroupTypes || [
@@ -197,6 +198,7 @@ export function TaxonomicPropertyFilter({
                                 placeholder="Enter value..."
                                 endpoint={filter?.key && activeTaxonomicGroup?.valuesEndpoint?.(filter.key)}
                                 eventNames={eventNames}
+                                addRelativeDateTimeOptions={allowRelativeDateOptions}
                                 onChange={(newOperator, newValue) => {
                                     if (filter?.key && filter?.type) {
                                         setFilter(index, {
diff --git a/frontend/src/lib/components/PropertyFilters/types.ts b/frontend/src/lib/components/PropertyFilters/types.ts
index 4cb168efc0e4f..0ba5d20825894 100644
--- a/frontend/src/lib/components/PropertyFilters/types.ts
+++ b/frontend/src/lib/components/PropertyFilters/types.ts
@@ -48,4 +48,5 @@ export interface PropertyFilterInternalProps {
     hasRowOperator?: boolean
     metadataSource?: AnyDataNode
     propertyAllowList?: { [key in TaxonomicFilterGroupType]?: string[] }
+    allowRelativeDateOptions?: boolean
 }
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx b/frontend/src/lib/components/PropertySelect/PropertySelect.stories.tsx
similarity index 79%
rename from frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx
rename to frontend/src/lib/components/PropertySelect/PropertySelect.stories.tsx
index 868c62de41edd..35021b789889b 100644
--- a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx
+++ b/frontend/src/lib/components/PropertySelect/PropertySelect.stories.tsx
@@ -3,12 +3,13 @@ import { useState } from 'react'
 
 import { mswDecorator } from '~/mocks/browser'
 
-import { PersonPropertySelect, PersonPropertySelectProps } from './PersonPropertySelect'
+import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
+import { PropertySelect, PropertySelectProps } from './PropertySelect'
 
-type Story = StoryObj<typeof PersonPropertySelect>
-const meta: Meta<typeof PersonPropertySelect> = {
-    title: 'Filters/Person Property Select',
-    component: PersonPropertySelect,
+type Story = StoryObj<typeof PropertySelect>
+const meta: Meta<typeof PropertySelect> = {
+    title: 'Filters/Property Select',
+    component: PropertySelect,
     decorators: [
         mswDecorator({
             get: {
@@ -31,7 +32,7 @@ const meta: Meta<typeof PersonPropertySelect> = {
 }
 export default meta
 
-const Template: StoryFn<typeof PersonPropertySelect> = (props: Partial<PersonPropertySelectProps>) => {
+const Template: StoryFn<typeof PropertySelect> = (props: Partial<PropertySelectProps>) => {
     const [selectedProperties, setSelectProperties] = useState<string[]>([
         '$initial_geoip_postal_code',
         '$initial_geoip_latitude',
@@ -54,9 +55,10 @@ const Template: StoryFn<typeof PersonPropertySelect> = (props: Partial<PersonPro
     ])
 
     return (
-        <PersonPropertySelect
+        <PropertySelect
             selectedProperties={selectedProperties}
             onChange={setSelectProperties}
+            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
             addText="Add"
             {...props}
         />
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx b/frontend/src/lib/components/PropertySelect/PropertySelect.tsx
similarity index 93%
rename from frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
rename to frontend/src/lib/components/PropertySelect/PropertySelect.tsx
index 55afbbc8fc898..93f3cc4cc22f9 100644
--- a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
+++ b/frontend/src/lib/components/PropertySelect/PropertySelect.tsx
@@ -11,11 +11,12 @@ import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { useState } from 'react'
 
-export interface PersonPropertySelectProps {
+export interface PropertySelectProps {
     addText: string
     onChange: (names: string[]) => void
     selectedProperties: string[]
     sortable?: boolean
+    taxonomicFilterGroup: TaxonomicFilterGroupType.PersonProperties | TaxonomicFilterGroupType.EventProperties
 }
 
 const SortableProperty = ({
@@ -46,12 +47,13 @@ const SortableProperty = ({
     )
 }
 
-export const PersonPropertySelect = ({
+export const PropertySelect = ({
     onChange,
     selectedProperties,
     addText,
     sortable = false,
-}: PersonPropertySelectProps): JSX.Element => {
+    taxonomicFilterGroup,
+}: PropertySelectProps): JSX.Element => {
     const [open, setOpen] = useState<boolean>(false)
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 1 } }))
 
@@ -114,7 +116,7 @@ export const PersonPropertySelect = ({
                             handleChange(value as string)
                             setOpen(false)
                         }}
-                        taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties]}
+                        taxonomicGroupTypes={[taxonomicFilterGroup]}
                     />
                 }
             >
diff --git a/frontend/src/lib/components/ScrollableShadows/ScrollableShadows.tsx b/frontend/src/lib/components/ScrollableShadows/ScrollableShadows.tsx
index 6a25edf00d33d..6d40fcf73439b 100644
--- a/frontend/src/lib/components/ScrollableShadows/ScrollableShadows.tsx
+++ b/frontend/src/lib/components/ScrollableShadows/ScrollableShadows.tsx
@@ -2,7 +2,7 @@ import './ScrollableShadows.scss'
 
 import { clsx } from 'clsx'
 import { useScrollable } from 'lib/hooks/useScrollable'
-import { MutableRefObject } from 'react'
+import React, { MutableRefObject } from 'react'
 
 export type ScrollableShadowsProps = {
     children: React.ReactNode
@@ -12,14 +12,17 @@ export type ScrollableShadowsProps = {
     scrollRef?: MutableRefObject<HTMLDivElement | null>
 }
 
-export const ScrollableShadows = ({
-    children,
-    direction,
-    className,
-    innerClassName,
-    scrollRef,
-}: ScrollableShadowsProps): JSX.Element => {
-    const { ref, isScrollableLeft, isScrollableRight, isScrollableBottom, isScrollableTop } = useScrollable()
+export const ScrollableShadows = React.forwardRef<HTMLDivElement, ScrollableShadowsProps>(function ScrollableShadows(
+    { children, direction, className, innerClassName, scrollRef },
+    ref
+) {
+    const {
+        ref: scrollRefScrollable,
+        isScrollableLeft,
+        isScrollableRight,
+        isScrollableBottom,
+        isScrollableTop,
+    } = useScrollable()
 
     return (
         <div
@@ -33,13 +36,14 @@ export const ScrollableShadows = ({
                 direction === 'vertical' && isScrollableBottom && 'ScrollableShadows--bottom',
                 className
             )}
+            ref={ref}
         >
             <div
                 className={clsx('ScrollableShadows__inner', innerClassName)}
-                ref={(theRef) => {
-                    ref.current = theRef
+                ref={(refValue) => {
+                    scrollRefScrollable.current = refValue
                     if (scrollRef) {
-                        scrollRef.current = theRef
+                        scrollRef.current = refValue
                     }
                 }}
             >
@@ -47,4 +51,4 @@ export const ScrollableShadows = ({
             </div>
         </div>
     )
-}
+})
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index e26389fa1d4c6..2ae32992808b4 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -159,7 +159,7 @@ export const FEATURE_FLAGS = {
     EXCEPTION_AUTOCAPTURE: 'exception-autocapture',
     DATA_WAREHOUSE: 'data-warehouse', // owner: @EDsCODE
     DATA_WAREHOUSE_VIEWS: 'data-warehouse-views', // owner: @EDsCODE
-    DATA_WAREHOUSE_HUBSPOT_IMPORT: 'data-warehouse-hubspot-import', // owner: @EDsCODE
+    DATA_WAREHOUSE_POSTGRES_IMPORT: 'data-warehouse-postgres-import', // owner: @EDsCODE
     FF_DASHBOARD_TEMPLATES: 'ff-dashboard-templates', // owner: @EDsCODE
     SHOW_PRODUCT_INTRO_EXISTING_PRODUCTS: 'show-product-intro-existing-products', // owner: @raquelmsmith
     ARTIFICIAL_HOG: 'artificial-hog', // owner: @Twixes
diff --git a/frontend/src/lib/hooks/useEventListener.ts b/frontend/src/lib/hooks/useEventListener.ts
index f24d04ebce0d2..a889fdf4e9cff 100644
--- a/frontend/src/lib/hooks/useEventListener.ts
+++ b/frontend/src/lib/hooks/useEventListener.ts
@@ -1,14 +1,28 @@
 import { DependencyList, useEffect, useRef } from 'react'
 
 export type KeyboardEventHandler = (event: KeyboardEvent) => void
+export type TouchEventHandler = (event: TouchEvent) => void
+export type MouseEventHandler = (event: MouseEvent) => void
 export type EventHandler = (event: Event) => void
 
 export function useEventListener(
-    eventName: 'keyup' | 'keydown',
+    eventName: `key${string}`,
     handler: KeyboardEventHandler,
     element?: Element | Window | null,
     deps?: DependencyList
 ): void
+export function useEventListener(
+    eventName: `touch${string}`,
+    handler: TouchEventHandler,
+    element?: Element | Window | null,
+    deps?: DependencyList
+): void
+export function useEventListener(
+    eventName: `mouse${string}`,
+    handler: MouseEventHandler,
+    element?: Element | Window | null,
+    deps?: DependencyList
+): void
 export function useEventListener(
     eventName: string,
     handler: EventHandler,
@@ -17,7 +31,7 @@ export function useEventListener(
 ): void
 export function useEventListener(
     eventName: string,
-    handler: EventHandler | KeyboardEventHandler,
+    handler: KeyboardEventHandler | TouchEventHandler | MouseEventHandler | EventHandler,
     element: Element | Window | null = window,
     deps?: DependencyList
 ): void {
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index 95cf04c36bf94..6423ec744e05c 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -1,50 +1,170 @@
+@mixin secondary-variables {
+    --button-border-color: var(--secondary-3000-button-border);
+    --lemon-button-bg-color-active: var(--bg-light);
+    --lemon-button-border-color-hover: var(--secondary-3000-button-border-hover);
+    --lemon-button-frame-bg-color: var(--secondary-3000-frame-bg);
+}
+
+@mixin size-variables {
+    &--xsmall {
+        --lemon-button-padding-horizontal: 0.375rem;
+        --lemon-button-padding-adjacent-icon: 0.25rem;
+        --lemon-button-font-size: 0.75rem;
+        --lemon-button-icon-size: 0.875rem;
+        --lemon-button-height: 1.625rem;
+        --lemon-button-gap: 0.25rem;
+        --lemon-button-side-action-width: 1.5rem;
+    }
+
+    &--small {
+        --lemon-button-padding-horizontal: 0.5rem;
+        --lemon-button-height: 2.0625rem;
+        --lemon-button-gap: 0.25rem;
+        --lemon-button-side-action-width: 1.75rem;
+        --lemon-button-icon-size: 1.25rem;
+    }
+
+    &--large {
+        --lemon-button-font-size: 1rem;
+        --lemon-button-icon-size: 1.75rem;
+        --lemon-button-padding-adjacent-icon: 0.75rem;
+        --lemon-button-height: 3.0625rem;
+        --lemon-button-gap: 0.75rem;
+    }
+}
+
+@mixin shared-variables {
+    --lemon-button-chrome-depth: 0.1875rem;
+    --lemon-button-padding-horizontal: 0.75rem;
+    --lemon-button-side-action-width: 2rem;
+}
+
 .LemonButton,
 .Link.LemonButton {
-    // Make sure we override .Link's styles where needed, e.g. padding
+    --lemon-button-hover-depth: -0.03125rem;
+    --lemon-button-press-depth: 0.03125rem;
+    --lemon-button-padding-adjacent-icon: 0.375rem;
+    --lemon-button-transition: opacity 200ms ease, transform 200ms ease;
+    --lemon-button-border-width: 0;
+    --lemon-button-bg-color: transparent;
+    --button-border-color: none;
+    --lemon-button-border-color-hover: none;
+    --lemon-button-frame-bg-color: none;
+    --lemon-button-font-size: 0.875rem;
+    --lemon-button-icon-size: 1.5rem;
+    --lemon-button-height: 2.3125rem;
+    --lemon-button-gap: 0.5rem;
+    --lemon-button-icon-opacity: 0.5;
+    --lemon-button-profile-picture-opacity: 0.75; // Profile pictures must be more prominent than icons
+    --lemon-button-color: var(--default);
+
+    // column-gap: 4px;
+    // flex-direction: row;
+    // justify-content: flex-start;
     position: relative;
+
+    // Make sure we override .Link's styles where needed, e.g. padding
     display: flex;
-    flex-direction: row;
     flex-shrink: 0;
-    gap: 0.5rem;
     align-items: center;
-    justify-content: flex-start;
-    padding: 0.25rem 0.75rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.5rem;
-    text-align: left;
+    padding: 0;
+    font-family: var(--font-title);
     appearance: none !important; // Important as this gets overridden by Ant styles...
     cursor: pointer;
     user-select: none;
     background: none;
-    border: none;
     border-radius: var(--radius);
-    transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
-        transform 100ms ease;
+    outline: none;
+    transition: var(--lemon-button-transition);
 
     .font-normal {
         font-family: var(--font-sans);
     }
 
     .LemonButton__chrome {
+        position: relative;
         display: flex;
         flex: 1;
-        gap: 0.5rem;
-    }
-
-    .LemonButton__content {
-        display: flex;
-        flex: 1;
+        flex-direction: row;
+        flex-shrink: 0;
+        gap: var(--lemon-button-gap);
         align-items: center;
-        line-height: initial;
+        justify-content: flex-start;
+        width: 100%;
+        height: 100%;
+        min-height: var(--lemon-button-height);
+        padding: 0.25rem var(--lemon-button-padding-horizontal);
+        font-size: var(--lemon-button-font-size);
+        font-weight: 500;
+        line-height: 1.5rem;
+        color: var(--lemon-button-color);
+        text-align: left;
+        background: none;
+        border-color: transparent;
+        border-style: solid;
+        border-width: var(--lemon-button-border-width);
+
+        .LemonButton__content {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            overflow: hidden;
+            line-height: initial;
+        }
+
+        .LemonButton__icon {
+            display: flex;
+            flex-shrink: 0;
+            place-items: center center;
+            font-size: var(--lemon-button-icon-size);
+            transition: color 200ms ease;
+
+            > * {
+                opacity: var(--lemon-button-icon-opacity);
+            }
+
+            > .ProfilePicture,
+            > .Lettermark {
+                opacity: var(--lemon-button-profile-picture-opacity);
+            }
+        }
     }
 
     &[aria-disabled='true']:not(.LemonButton--loading) {
         cursor: not-allowed;
         opacity: var(--opacity-disabled);
+    }
+
+    &.LemonButton--active,
+    &:hover:not([aria-disabled='true']),
+    &:not([aria-disabled='true']):active {
+        --lemon-button-icon-opacity: 0.75;
+        --lemon-button-profile-picture-opacity: 1;
+    }
+
+    &.LemonButton--full-width {
+        --lemon-button-padding-horizontal: 0.5rem;
+
+        width: 100%;
+    }
+
+    &.LemonButton--loading {
+        cursor: default;
+    }
 
-        > span {
-            cursor: not-allowed;
+    &.LemonButton--no-padding {
+        width: auto;
+        height: auto;
+        min-height: 0;
+        padding: 0;
+
+        .LemonButton__chrome {
+            min-height: 0;
+            padding: 0;
+        }
+
+        &.LemonButton--full-width {
+            width: 100%;
         }
     }
 
@@ -62,16 +182,8 @@
         }
     }
 
-    &.LemonButton--loading {
-        cursor: default;
-    }
-
-    &.LemonButton--full-width {
-        width: 100%;
-    }
-
     &.LemonButton--centered {
-        > span {
+        .LemonButton__chrome {
             justify-content: center !important;
         }
 
@@ -81,69 +193,153 @@
         }
     }
 
-    &.LemonButton--has-icon {
-        padding-left: 0.5rem;
+    &.LemonButton--primary {
+        --lemon-button-bg-color: var(--primary-3000-button-bg);
+        --lemon-button-bg-color-active: var(--primary-3000-button-bg);
+        --button-border-color: var(--primary-3000-button-border);
+        --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
+        --lemon-button-frame-bg-color: var(--primary-3000-frame-bg);
+        --lemon-button-color: var(--text-3000-light);
+
+        &.LemonButton--status-alt {
+            --lemon-button-bg-color: var(--primary-3000-frame-bg-light);
+            --lemon-button-bg-color-active: var(--lemon-button-bg-color);
+            --button-border-color: var(--primary-3000-button-border);
+            --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
+            --lemon-button-frame-bg-color: var(--primary-3000-button-bg-dark);
+            --lemon-button-color: var(--text-3000-light);
+        }
     }
 
-    &.LemonButton--no-content {
-        padding-right: 0.5rem;
-        padding-left: 0.5rem;
+    &.LemonButton--secondary.LemonButton--status-alt:hover,
+    &.LemonButton--secondary.LemonButton--status-alt.LemonButton--active,
+    &.LemonButton--secondary:not(.LemonButton--status-alt, .LemonButton--status-danger) {
+        @include secondary-variables;
     }
 
-    &.LemonButton--xsmall {
-        gap: 0.25rem;
-        font-size: 0.75rem;
+    &.LemonButton--status-danger,
+    &.LemonButton--primary.LemonButton--status-danger,
+    &.LemonButton--secondary.LemonButton--status-danger {
+        --lemon-button-color: var(--danger-3000-button-border-hover);
+        --button-border-color: var(--danger-3000-button-border);
+        --lemon-button-border-color-hover: var(--danger-3000-button-border-hover);
+        --lemon-button-frame-bg-color: var(--danger-3000-frame-bg);
+        --lemon-button-icon-opacity: 1;
+    }
 
-        > span {
-            gap: 0.25rem;
-        }
+    &.LemonButton--secondary.LemonButton--status-alt {
+        --lemon-button-color: var(--muted);
 
-        .LemonButton__icon {
-            font-size: 0.875rem;
+        &.LemonButton--active,
+        &:hover:not([aria-disabled='true']) {
+            --lemon-button-color: var(--default);
         }
     }
 
-    &.LemonButton--small {
-        gap: 0.25rem;
+    &.LemonButton--primary,
+    &.LemonButton--secondary {
+        --lemon-button-border-width: 1px;
 
-        > span {
-            gap: 0.25rem;
+        &:not([aria-disabled='true']):hover .LemonButton__chrome {
+            &::after {
+                border-color: var(--lemon-button-border-color-hover);
+            }
         }
 
-        .LemonButton__icon {
-            font-size: 1.25rem;
+        &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
+            --lemon-button-padding-left: var(--lemon-button-padding-adjacent-icon);
         }
-    }
 
-    &.LemonButton--large {
-        font-size: 1rem;
+        &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
+            --lemon-button-padding-right: var(--lemon-button-padding-adjacent-icon);
+        }
 
-        > span {
-            gap: 0.75rem;
+        .LemonButton__chrome {
+            padding: calc(0.25rem - var(--lemon-button-chrome-depth) * 0.5)
+                var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal))
+                calc(0.25rem + var(--lemon-button-chrome-depth) * 0.5)
+                var(--lemon-button-padding-left, var(--lemon-button-padding-horizontal));
+            background: transparent;
+
+            & > * {
+                z-index: 1; // Places button content above the ::after element
+            }
+
+            &::before {
+                position: absolute;
+                inset: -1px;
+                z-index: 0;
+                content: '';
+                border: 1px solid var(--button-border-color);
+                border-radius: var(--radius);
+            }
+
+            &::after {
+                position: absolute;
+                inset: -1px -1px calc(var(--lemon-button-chrome-depth) - 1px) -1px;
+                z-index: 0;
+                content: '';
+                background: var(--lemon-button-bg-color);
+                border: 1px solid var(--button-border-color);
+                border-radius: var(--radius);
+                box-shadow: 0 var(--lemon-button-chrome-depth) 0 -1px var(--lemon-button-frame-bg-color);
+                transition: opacity 200ms ease;
+            }
         }
 
-        .LemonButton__icon {
-            font-size: 1.75rem;
+        &.LemonButton--active,
+        &:not([aria-disabled='true']):active {
+            .LemonButton__chrome {
+                &::after {
+                    border: 1px solid var(--lemon-button-border-color-hover);
+                }
+            }
         }
-    }
 
-    &.LemonButton--no-padding {
-        width: auto;
-        height: auto;
-        min-height: 0;
-        padding: 0;
+        &:hover:not([aria-disabled='true']) {
+            --lemon-button-depth: var(--lemon-button-hover-depth);
+        }
 
-        &.LemonButton--full-width {
-            width: 100%;
+        &:not([aria-disabled='true']):active {
+            --lemon-button-depth: var(--lemon-button-press-depth);
+        }
+
+        &:hover:not([aria-disabled='true']),
+        &:not([aria-disabled='true']):active {
+            .LemonButton__chrome {
+                transform: translateY(var(--lemon-button-depth));
+
+                &::after {
+                    box-shadow: 0 calc(var(--lemon-button-chrome-depth) - var(--lemon-button-depth)) 0 -1px var(--lemon-button-frame-bg-color);
+                }
+
+                &::before {
+                    bottom: calc(var(--lemon-button-depth) - 1px);
+                }
+            }
+        }
+
+        &.LemonButton--active {
+            .LemonButton__chrome {
+                &::after {
+                    background: var(--lemon-button-bg-color-active);
+                }
+            }
         }
     }
 
-    .LemonButton__icon {
-        display: flex;
-        flex-shrink: 0;
-        place-items: center center;
-        font-size: 1.5rem;
-        transition: color 200ms ease;
+    &.LemonButton--tertiary {
+        &:not([aria-disabled='true']):hover,
+        &.LemonButton--active {
+            background-color: var(--glass-border-3000);
+        }
+
+        &.LemonButton--status-danger {
+            &:not([aria-disabled='true']):hover,
+            &.LemonButton--active {
+                background-color: var(--danger-highlight);
+            }
+        }
     }
 
     .ant-tooltip & {
@@ -160,6 +356,9 @@
             color: #fff !important;
         }
     }
+
+    @include shared-variables;
+    @include size-variables;
 }
 
 .LemonButtonWithSideAction {
@@ -169,24 +368,75 @@
     &--full-width {
         width: 100%;
     }
-}
 
-.LemonButtonWithSideAction__spacer {
-    box-sizing: content-box;
+    &:hover > .LemonButton--secondary.LemonButton--status-alt {
+        @include secondary-variables;
+    }
 
-    &.LemonButtonWithSideAction__spacer--divider {
-        border-left: 1px solid currentColor;
+    & .LemonButtonWithSideAction__spacer {
+        box-sizing: content-box;
+        width: calc(
+            var(--lemon-button-side-action-width) -
+                var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal))
+        );
+        height: 1.25rem;
+        color: var(--muted);
+
+        &--divider {
+            padding: 0;
+            margin-left: calc(var(--lemon-button-padding-horizontal) / 2);
+            border-left: 1px solid currentColor;
+        }
     }
-}
 
-.LemonButtonWithSideAction__side-button {
-    position: absolute;
-    top: 50%;
-    right: 0.5rem;
-    background: none;
-    transform: translateY(-50%);
+    // SideAction buttons are buttons next to other buttons in the DOM but layered on top. since they're on another button, we don't want them to look like buttons.
+    & .LemonButtonWithSideAction__side-button {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        bottom: calc(var(--lemon-button-chrome-depth) + 1px);
+        z-index: 1; // Places button content above the main button
+        background: none;
+        border-top-right-radius: calc(var(--radius) - 1px);
+        border-bottom-right-radius: calc(var(--radius) - 1px);
+        transform: none;
+
+        .LemonButton {
+            --lemon-button-depth: 0px;
+            --lemon-button-icon-opacity: 0.5;
+
+            width: var(--lemon-button-side-action-width);
+            height: 100%;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        .LemonButton__chrome {
+            justify-content: center !important;
+            padding: 0 !important;
+            border: none !important;
+
+            &::before,
+            &::after {
+                content: none !important;
+            }
+        }
+
+        &:not([aria-disabled='true']):active {
+            .LemonButton__chrome {
+                transform: none !important;
+            }
+        }
+
+        .LemonButton__icon {
+            color: currentColor;
+        }
 
-    .LemonButton--small & {
-        right: 0.375rem;
+        &:not([aria-disabled='true']):hover {
+            background: rgb(0 0 0 / 10%);
+        }
     }
+
+    @include shared-variables;
+    @include size-variables;
 }
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
index 24110638ed64a..ba3c60908c905 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
@@ -1,5 +1,4 @@
 import './LemonButton.scss'
-import './LemonButton3000.scss'
 
 import { IconChevronDown } from '@posthog/icons'
 import clsx from 'clsx'
@@ -139,7 +138,7 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
             ref
         ): JSX.Element => {
             const [popoverVisibility, popoverPlacement] = useContext(PopoverReferenceContext) || [false, null]
-            const within3000PageHeader = useContext(Within3000PageHeaderContext)
+            const within3000PageHeader = useContext(WithinPageHeaderContext)
 
             if (!active && popoverVisibility) {
                 active = true
@@ -278,7 +277,7 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
     )
 LemonButton.displayName = 'LemonButton'
 
-export const Within3000PageHeaderContext = React.createContext<boolean>(false)
+export const WithinPageHeaderContext = React.createContext<boolean>(false)
 
 export interface LemonButtonWithDropdownProps extends LemonButtonPropsBase {
     dropdown: LemonButtonDropdown
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
deleted file mode 100644
index e1a6b1b7551e8..0000000000000
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
+++ /dev/null
@@ -1,333 +0,0 @@
-@mixin secondary-variables {
-    --button-border-color: var(--secondary-3000-button-border);
-    --lemon-button-bg-color-active: var(--bg-light);
-    --lemon-button-border-color-hover: var(--secondary-3000-button-border-hover);
-    --lemon-button-frame-bg-color: var(--secondary-3000-frame-bg);
-}
-
-.posthog-3000 {
-    --lemon-button-chrome-depth: 0.1875rem;
-    --lemon-button-hover-depth: -0.03125rem;
-    --lemon-button-press-depth: 0.03125rem;
-    --lemon-button-padding-horizontal: 0.75rem;
-    --lemon-button-padding-adjacent-icon: 0.375rem;
-    --lemon-button-side-action-width: 2rem;
-
-    .LemonButton,
-    .Link.LemonButton {
-        --lemon-button-transition: opacity 200ms ease, transform 200ms ease;
-        --lemon-button-border-width: 0;
-        --lemon-button-bg-color: transparent;
-        --button-border-color: none;
-        --lemon-button-border-color-hover: none;
-        --lemon-button-frame-bg-color: none;
-        --lemon-button-font-size: 0.875rem;
-        --lemon-button-height: 2.3125rem;
-        --lemon-button-gap: 0.5rem;
-        --lemon-button-icon-opacity: 0.5;
-        --lemon-button-profile-picture-opacity: 0.75; // Profile pictures must be more prominent than icons
-        --lemon-button-color: var(--default);
-
-        position: relative;
-        padding: 0;
-        font-family: var(--font-title);
-        cursor: pointer;
-        outline: none;
-        transition: var(--lemon-button-transition);
-
-        .LemonButton__chrome {
-            position: relative;
-            display: flex;
-            flex-direction: row;
-            flex-shrink: 0;
-            gap: var(--lemon-button-gap);
-            align-items: center;
-            justify-content: flex-start;
-            width: 100%;
-            height: 100%;
-            min-height: var(--lemon-button-height);
-            padding: 0.25rem var(--lemon-button-padding-horizontal);
-            font-size: var(--lemon-button-font-size);
-            font-weight: 500;
-            line-height: 1.5rem;
-            color: var(--lemon-button-color);
-            text-align: left;
-            background: none;
-            border-color: transparent;
-            border-style: solid;
-            border-width: var(--lemon-button-border-width);
-
-            .LemonButton__content {
-                overflow: hidden;
-            }
-
-            .LemonButton__icon {
-                > * {
-                    opacity: var(--lemon-button-icon-opacity);
-                }
-
-                > .ProfilePicture,
-                > .Lettermark {
-                    opacity: var(--lemon-button-profile-picture-opacity);
-                }
-            }
-        }
-
-        &.LemonButton--active,
-        &:hover:not([aria-disabled='true']),
-        &:not([aria-disabled='true']):active {
-            --lemon-button-icon-opacity: 0.75;
-            --lemon-button-profile-picture-opacity: 1;
-        }
-
-        &.LemonButton--full-width {
-            --lemon-button-padding-horizontal: 0.5rem;
-        }
-
-        &.LemonButton--xsmall {
-            --lemon-button-padding-horizontal: 0.375rem;
-            --lemon-button-padding-adjacent-icon: 0.25rem;
-            --lemon-button-font-size: 0.75rem;
-            --lemon-button-height: 1.625rem;
-            --lemon-button-gap: 0.25rem;
-            --lemon-button-side-action-width: 1.5rem;
-        }
-
-        &.LemonButton--small {
-            --lemon-button-padding-horizontal: 0.5rem;
-            --lemon-button-height: 2.0625rem;
-            --lemon-button-gap: 0.25rem;
-            --lemon-button-side-action-width: 1.75rem;
-        }
-
-        &.LemonButton--large {
-            --lemon-button-font-size: 1rem;
-            --lemon-button-padding-adjacent-icon: 0.75rem;
-            --lemon-button-height: 3.0625rem;
-            --lemon-button-gap: 0.75rem;
-        }
-
-        &.LemonButton--no-padding {
-            min-height: 0;
-            padding: 0;
-
-            .LemonButton__chrome {
-                min-height: 0;
-                padding: 0;
-            }
-        }
-
-        &.LemonButton--primary {
-            --lemon-button-bg-color: var(--primary-3000-button-bg);
-            --lemon-button-bg-color-active: var(--primary-3000-button-bg);
-            --button-border-color: var(--primary-3000-button-border);
-            --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
-            --lemon-button-frame-bg-color: var(--primary-3000-frame-bg);
-            --lemon-button-color: var(--text-3000-light);
-
-            &.LemonButton--status-alt {
-                --lemon-button-bg-color: var(--primary-3000-frame-bg-light);
-                --lemon-button-bg-color-active: var(--lemon-button-bg-color);
-                --button-border-color: var(--primary-3000-button-border);
-                --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
-                --lemon-button-frame-bg-color: var(--primary-3000-button-bg-dark);
-                --lemon-button-color: var(--text-3000-light);
-            }
-        }
-
-        &.LemonButton--secondary.LemonButton--status-alt:hover,
-        &.LemonButton--secondary.LemonButton--status-alt.LemonButton--active,
-        &.LemonButton--secondary:not(.LemonButton--status-alt, .LemonButton--status-danger) {
-            @include secondary-variables;
-        }
-
-        &.LemonButton--status-danger,
-        &.LemonButton--primary.LemonButton--status-danger,
-        &.LemonButton--secondary.LemonButton--status-danger {
-            --lemon-button-color: var(--danger-3000-button-border-hover);
-            --button-border-color: var(--danger-3000-button-border);
-            --lemon-button-border-color-hover: var(--danger-3000-button-border-hover);
-            --lemon-button-frame-bg-color: var(--danger-3000-frame-bg);
-            --lemon-button-icon-opacity: 1;
-        }
-
-        &.LemonButton--secondary.LemonButton--status-alt {
-            --lemon-button-color: var(--muted);
-
-            &.LemonButton--active,
-            &:hover:not([aria-disabled='true']) {
-                --lemon-button-color: var(--default);
-            }
-        }
-
-        &.LemonButton--primary,
-        &.LemonButton--secondary {
-            --lemon-button-border-width: 1px;
-
-            &:not([aria-disabled='true']):hover .LemonButton__chrome {
-                &::after {
-                    border-color: var(--lemon-button-border-color-hover);
-                }
-            }
-
-            &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
-                --lemon-button-padding-left: var(--lemon-button-padding-adjacent-icon);
-            }
-
-            &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
-                --lemon-button-padding-right: var(--lemon-button-padding-adjacent-icon);
-            }
-
-            .LemonButton__chrome {
-                padding: calc(0.25rem - var(--lemon-button-chrome-depth) * 0.5)
-                    var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal))
-                    calc(0.25rem + var(--lemon-button-chrome-depth) * 0.5)
-                    var(--lemon-button-padding-left, var(--lemon-button-padding-horizontal));
-                background: transparent;
-
-                & > * {
-                    z-index: 1; // Places button content above the ::after element
-                }
-
-                &::before {
-                    position: absolute;
-                    inset: -1px;
-                    z-index: 0;
-                    content: '';
-                    border: 1px solid var(--button-border-color);
-                    border-radius: var(--radius);
-                }
-
-                &::after {
-                    position: absolute;
-                    inset: -1px -1px calc(var(--lemon-button-chrome-depth) - 1px) -1px;
-                    z-index: 0;
-                    content: '';
-                    background: var(--lemon-button-bg-color);
-                    border: 1px solid var(--button-border-color);
-                    border-radius: var(--radius);
-                    box-shadow: 0 var(--lemon-button-chrome-depth) 0 -1px var(--lemon-button-frame-bg-color);
-                    transition: opacity 200ms ease;
-                }
-            }
-
-            &.LemonButton--active,
-            &:not([aria-disabled='true']):active {
-                .LemonButton__chrome {
-                    &::after {
-                        border: 1px solid var(--lemon-button-border-color-hover);
-                    }
-                }
-            }
-
-            &:hover:not([aria-disabled='true']) {
-                --lemon-button-depth: var(--lemon-button-hover-depth);
-            }
-
-            &:not([aria-disabled='true']):active {
-                --lemon-button-depth: var(--lemon-button-press-depth);
-            }
-
-            &:hover:not([aria-disabled='true']),
-            &:not([aria-disabled='true']):active {
-                .LemonButton__chrome {
-                    transform: translateY(var(--lemon-button-depth));
-
-                    &::after {
-                        box-shadow: 0 calc(var(--lemon-button-chrome-depth) - var(--lemon-button-depth)) 0 -1px var(--lemon-button-frame-bg-color);
-                    }
-
-                    &::before {
-                        bottom: calc(var(--lemon-button-depth) - 1px);
-                    }
-                }
-            }
-
-            &.LemonButton--active {
-                .LemonButton__chrome {
-                    &::after {
-                        background: var(--lemon-button-bg-color-active);
-                    }
-                }
-            }
-        }
-
-        &.LemonButton--tertiary {
-            &:not([aria-disabled='true']):hover,
-            &.LemonButton--active {
-                background-color: var(--glass-border-3000);
-            }
-
-            &.LemonButton--status-danger {
-                &:not([aria-disabled='true']):hover,
-                &.LemonButton--active {
-                    background-color: var(--danger-highlight);
-                }
-            }
-        }
-    }
-
-    .LemonButtonWithSideAction:hover > .LemonButton--secondary.LemonButton--status-alt {
-        @include secondary-variables;
-    }
-
-    .LemonButtonWithSideAction__spacer {
-        width: calc(
-            var(--lemon-button-side-action-width) -
-                var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal))
-        );
-        height: 1.25rem;
-        color: var(--muted);
-
-        &--divider {
-            padding: 0;
-            margin-left: calc(var(--lemon-button-padding-horizontal) / 2);
-        }
-    }
-
-    // SideAction buttons are buttons next to other buttons in the DOM but layered on top. since they're on another button, we don't want them to look like buttons.
-    .LemonButtonWithSideAction__side-button {
-        top: 1px;
-        right: 1px;
-        bottom: calc(var(--lemon-button-chrome-depth) + 1px);
-        z-index: 1; // Places button content above the main button
-        border-top-right-radius: calc(var(--radius) - 1px);
-        border-bottom-right-radius: calc(var(--radius) - 1px);
-        transform: none;
-
-        .LemonButton {
-            --lemon-button-depth: 0px;
-            --lemon-button-icon-opacity: 0.5;
-
-            width: var(--lemon-button-side-action-width);
-            height: 100%;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        .LemonButton__chrome {
-            justify-content: center !important;
-            padding: 0 !important;
-            border: none !important;
-
-            &::before,
-            &::after {
-                content: none !important;
-            }
-        }
-
-        &:not([aria-disabled='true']):active {
-            .LemonButton__chrome {
-                transform: none !important;
-            }
-        }
-
-        .LemonButton__icon {
-            color: currentColor;
-        }
-
-        &:not([aria-disabled='true']):hover {
-            background: rgb(0 0 0 / 10%);
-        }
-    }
-}
diff --git a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss
index ac30964542867..53aa5c0061b9c 100644
--- a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss
+++ b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss
@@ -37,4 +37,21 @@
             );
         }
     }
+
+    &--with-label {
+        display: flex;
+        height: unset;
+        background: none;
+
+        &::before,
+        &::after {
+            position: relative;
+            top: 50%;
+            display: block;
+            width: 50%;
+            content: '';
+            border-top: 1px solid var(--border);
+            transform: translateY(50%);
+        }
+    }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx
index c6051406f9016..d1608f808d5b3 100644
--- a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx
@@ -11,6 +11,8 @@ export interface LemonDividerProps {
     dashed?: boolean
     /** Adding a className will remove the default margin class names, allowing the greatest flexibility */
     className?: string
+    /** A label to display within the divider */
+    label?: string | React.ReactElement
 }
 
 /** A line separator for separating rows of content
@@ -22,6 +24,7 @@ export function LemonDivider({
     vertical = false,
     dashed = false,
     thick = false,
+    label,
     className,
 }: LemonDividerProps): JSX.Element {
     return (
@@ -31,11 +34,14 @@ export function LemonDivider({
                 vertical && 'LemonDivider--vertical',
                 thick && 'LemonDivider--thick',
                 dashed && 'LemonDivider--dashed',
+                !!label && 'LemonDivider--with-label',
                 // If no className is provided we set some sensible default margins
                 !className && (vertical ? 'm-2' : 'my-2'),
                 className
             )}
             role="separator"
-        />
+        >
+            {label && <div className="px-3 text-xs whitespace-nowrap font-semibold">{label}</div>}
+        </div>
     )
 }
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
index 5c270d589e677..294b85a177440 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
@@ -24,6 +24,10 @@ export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' |
      * the text to display to the user, a sensible default is used if not provided
      */
     callToAction?: string | JSX.Element
+    /**
+     * whether to show the uploaded files beneath the upload input
+     */
+    showUploadedFiles?: boolean
 }
 
 export const LemonFileInput = ({
@@ -35,6 +39,7 @@ export const LemonFileInput = ({
     accept,
     alternativeDropTargetRef,
     callToAction,
+    showUploadedFiles = true,
 }: LemonFileInputProps): JSX.Element => {
     const [files, setFiles] = useState(value || value || ([] as File[]))
 
@@ -148,7 +153,7 @@ export const LemonFileInput = ({
                         </>
                     )}
                 </label>
-                {files.length > 0 && (
+                {files.length > 0 && showUploadedFiles && (
                     <div className="flex flex-row gap-2">
                         {files.map((x, i) => (
                             <LemonTag key={i} icon={loading ? <Spinner /> : undefined}>
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
index 21d86a69c33b3..6018b10f41bb7 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -87,6 +87,12 @@
         max-width: 240px;
     }
 
+    &.LemonInput--type-number {
+        .LemonInput__input {
+            text-overflow: clip;
+        }
+    }
+
     &.LemonInput--full-width {
         width: 100%;
         max-width: 100%;
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
index 90ed1a63e0d5a..e67b7821ad30c 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
@@ -36,17 +36,8 @@ export default meta
 
 const Template: StoryFn<typeof LemonMenuOverlayComponent> = (props: LemonMenuOverlayProps) => {
     return (
-        <div className="Popover">
-            <div
-                className="Popover__box"
-                // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    opacity: 1,
-                    width: 'fit-content',
-                }}
-            >
-                <LemonMenuOverlayComponent {...props} />
-            </div>
+        <div className="rounded border p-1 bg-bg-light">
+            <LemonMenuOverlayComponent {...props} />
         </div>
     )
 }
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
index b4d3571cef7d9..580b9bfeabd97 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
@@ -66,7 +66,6 @@ export interface LemonMenuProps
             LemonDropdownProps,
             | 'placement'
             | 'fallbackPlacements'
-            | 'actionable'
             | 'sameWidth'
             | 'maxContentWidth'
             | 'visible'
@@ -167,7 +166,7 @@ export function LemonMenuSectionList({
                         <section className="space-y-px">
                             {section.title ? (
                                 typeof section.title === 'string' ? (
-                                    <h5>{section.title}</h5>
+                                    <h5 className="mx-2 my-1">{section.title}</h5>
                                 ) : (
                                     section.title
                                 )
@@ -265,7 +264,6 @@ const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.Re
                     items={items}
                     tooltipPlacement={tooltipPlacement}
                     placement="right-start"
-                    actionable
                     closeOnClickInside={custom ? false : true}
                     closeParentPopoverOnClickInside={custom ? false : true}
                 >
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx
new file mode 100644
index 0000000000000..20fde3d3e5b7b
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { LemonProgress } from './LemonProgress'
+
+const meta: Meta<typeof LemonProgress> = {
+    title: 'Lemon UI/Lemon Progress',
+    component: LemonProgress,
+    args: {
+        percent: 30,
+    },
+    tags: ['autodocs'],
+}
+export default meta
+
+export const Variations: StoryFn<typeof LemonProgress> = () => {
+    return (
+        <div className="min-w-120">
+            <LemonProgress percent={30} />
+            <LemonProgress percent={75} strokeColor="var(--warning)" />
+            <LemonProgress percent={50} size="large" strokeColor="purple" />
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx
new file mode 100644
index 0000000000000..3a3e715f0ad52
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonProgress/LemonProgress.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+
+export type LemonProgressProps = {
+    size?: 'medium' | 'large'
+    strokeColor?: string
+    percent: number
+    children?: React.ReactNode
+    className?: string
+}
+
+export const LemonProgress = ({
+    size = 'medium',
+    percent,
+    strokeColor = 'var(--brand-blue)',
+    children,
+    className,
+}: LemonProgressProps): JSX.Element => {
+    return (
+        <div
+            className={clsx(
+                'LemonProgress rounded-full w-full inline-block bg-bg-3000',
+                size === 'large' ? 'h-5' : 'h-1.5',
+                className
+            )}
+        >
+            <span
+                className={clsx(
+                    'LemonProgress__track block h-full rounded-full transition-all',
+                    percent > 0 ? (size === 'large' ? 'min-w-5' : 'min-w-1.5') : null
+                )}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ width: `${percent}%`, backgroundColor: strokeColor }}
+            >
+                {children}
+            </span>
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonProgress/index.tsx b/frontend/src/lib/lemon-ui/LemonProgress/index.tsx
new file mode 100644
index 0000000000000..39b7a0af5cbb4
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonProgress/index.tsx
@@ -0,0 +1 @@
+export * from './LemonProgress'
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
index deec13343d9f2..bea8cead70740 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
@@ -132,7 +132,6 @@ export function LemonSelect<T extends string | number | boolean | null>({
             tooltipPlacement={optionTooltipPlacement}
             sameWidth={dropdownMatchSelectWidth}
             placement={dropdownPlacement}
-            actionable
             className={menu?.className}
             maxContentWidth={dropdownMaxContentWidth}
             activeItemIndex={items
diff --git a/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.stories.tsx b/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.stories.tsx
new file mode 100644
index 0000000000000..7b293618d7ff3
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react'
+import { useState } from 'react'
+
+import { LemonSlider } from './LemonSlider'
+
+const meta: Meta<typeof LemonSlider> = {
+    title: 'Lemon UI/Lemon Slider',
+    component: LemonSlider,
+    tags: ['autodocs'],
+}
+export default meta
+
+export function Basic(): JSX.Element {
+    const [value, setValue] = useState(42)
+
+    return <LemonSlider value={value} min={0} max={100} step={1} onChange={setValue} />
+}
diff --git a/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx b/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx
new file mode 100644
index 0000000000000..fe72960e0453d
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonSlider/LemonSlider.tsx
@@ -0,0 +1,104 @@
+import clsx from 'clsx'
+import { useEventListener } from 'lib/hooks/useEventListener'
+import { useRef, useState } from 'react'
+
+export interface LemonSliderProps {
+    value?: number
+    onChange?: (value: number) => void
+    min: number
+    max: number
+    /** @default 1 */
+    step?: number
+    className?: string
+}
+
+export function LemonSlider({ value = 0, onChange, min, max, step = 1, className }: LemonSliderProps): JSX.Element {
+    const trackRef = useRef<HTMLDivElement>(null)
+    const movementStartValueWithX = useRef<[number, number] | null>(null)
+    const [dragging, setDragging] = useState(false)
+
+    const handleMove = (clientX: number): void => {
+        if (trackRef.current && movementStartValueWithX.current !== null) {
+            const [movementStartValue, movementStartX] = movementStartValueWithX.current
+            const rect = trackRef.current.getBoundingClientRect()
+            const adjustedWidth = rect.width - 16 // 16px = handle width
+            const deltaX = (clientX - movementStartX) / adjustedWidth
+            let newValue = movementStartValue + (max - min) * deltaX
+            newValue = Math.max(min, Math.min(max, newValue)) // Clamped
+            if (step !== undefined) {
+                newValue = Math.round(newValue / step) * step // Adjusted to step
+            }
+            onChange?.(newValue)
+        }
+    }
+    useEventListener('mousemove', (e) => {
+        handleMove(e.clientX)
+    })
+    useEventListener('touchmove', (e) => {
+        if (e.touches.length === 1) {
+            handleMove(e.touches[0].clientX)
+        }
+    })
+
+    useEventListener('mouseup', (e) => {
+        if (e.button === 0) {
+            movementStartValueWithX.current = null
+            setDragging(false)
+        }
+    })
+    useEventListener('touchend', () => {
+        movementStartValueWithX.current = null
+        setDragging(false)
+    })
+    useEventListener('touchcancel', () => {
+        movementStartValueWithX.current = null
+        setDragging(false)
+    })
+
+    const proportion = Math.round(((value - min) / (max - min)) * 100) / 100
+
+    return (
+        <div className={clsx('flex items-center relative my-2.5 min-w-16 select-none', className)}>
+            <div
+                className="w-full h-3 flex items-center cursor-pointer"
+                ref={trackRef}
+                onMouseDown={(e) => {
+                    const rect = e.currentTarget.getBoundingClientRect()
+                    const x = e.clientX - (rect.left + 8) // 4px = half the handle
+                    const adjustedWidth = rect.width - 16 // 8px = handle width
+                    let newValue = (x / adjustedWidth) * (max - min) + min
+                    newValue = Math.max(min, Math.min(max, newValue)) // Clamped
+                    if (step !== undefined) {
+                        newValue = Math.round(newValue / step) * step // Adjusted to step
+                    }
+                    onChange?.(newValue)
+                }}
+            >
+                <div className="w-full bg-border rounded-full h-1" />
+            </div>
+            <div
+                className="absolute h-1 bg-primary rounded-full pointer-events-none"
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{ width: `${proportion * 100}%` }}
+            />
+            <div
+                className={clsx(
+                    'absolute size-3 box-content border-2 border-bg-light rounded-full cursor-pointer bg-primary transition-shadow duration-75',
+                    dragging ? 'ring-2 scale-90' : 'ring-0 hover:ring-2'
+                )}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={{
+                    left: `calc(${proportion * 100}% - ${proportion}rem)`,
+                }}
+                onMouseDown={(e) => {
+                    movementStartValueWithX.current = [value, e.clientX]
+                    setDragging(true)
+                }}
+                onTouchStart={(e) => {
+                    movementStartValueWithX.current = [value, e.touches[0].clientX]
+                    setDragging(true)
+                }}
+            />
+        </div>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonSlider/index.ts b/frontend/src/lib/lemon-ui/LemonSlider/index.ts
new file mode 100644
index 0000000000000..3d860c8215357
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonSlider/index.ts
@@ -0,0 +1 @@
+export { LemonSlider, type LemonSliderProps } from './LemonSlider'
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index 609843d466bf3..bad37d8a3fd6d 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -28,20 +28,14 @@
     position: relative; // For arrow
     flex-grow: 1;
     max-width: 100%;
-    padding: 0.5rem;
-    overflow: hidden;
     background: var(--bg-light);
-    border: 1px solid var(--border);
+    border: 1px solid var(--secondary-3000-button-border);
     border-radius: var(--radius);
     box-shadow: var(--shadow-elevation);
     opacity: 0;
     transition: opacity 50ms ease, transform 50ms ease;
     transform-origin: top;
 
-    .Popover--actionable & {
-        border-color: var(--primary-3000);
-    }
-
     // We set the offset below instead of using floating-ui's offset(), because we need there to be no gap between
     // the reference and the floating element. This makes hover-based popovers possible
 
@@ -94,72 +88,45 @@
     .Popover--max-content-width & {
         width: max-content;
     }
-
-    .posthog-3000 &,
-    .posthog-3000 .Popover--actionable & {
-        padding: 0.25rem;
-        background: var(--bg-light);
-        border-color: var(--secondary-3000-button-border);
-    }
 }
 
 .Popover__arrow {
     position: absolute;
     width: 0.5rem;
     height: 0.5rem;
-    background: var(--bg-3000);
+    background: var(--bg-light);
     transform: rotate(45deg);
 
-    .posthog-3000 & {
-        background: var(--bg-light);
-    }
-
     [data-placement^='bottom'] & {
-        top: -0.25rem;
+        top: -0.3125rem;
         border-top: 1px solid var(--border);
         border-left: 1px solid var(--border);
-
-        .posthog-3000 & {
-            top: -0.3rem;
-        }
     }
 
     [data-placement^='top'] & {
-        bottom: -0.25rem;
+        bottom: -0.3125rem;
         border-right: 1px solid var(--border);
         border-bottom: 1px solid var(--border);
-
-        .posthog-3000 & {
-            bottom: -0.3rem;
-        }
     }
 
     [data-placement^='left'] & {
-        right: -0.25rem;
+        right: -0.3125rem;
         border-top: 1px solid var(--border);
         border-right: 1px solid var(--border);
-
-        .posthog-3000 & {
-            right: -0.3rem;
-        }
     }
 
     [data-placement^='right'] & {
-        left: -0.25rem;
+        left: -0.3125rem;
         border-bottom: 1px solid var(--border);
         border-left: 1px solid var(--border);
-
-        .posthog-3000 & {
-            left: -0.3rem;
-        }
-    }
-
-    .Popover--actionable & {
-        border-color: var(--primary-3000);
     }
 }
 
 .Popover__content {
     max-height: 100%;
-    overflow-y: auto;
+    border-radius: calc(var(--radius) - 1px);
+}
+
+.Popover--padded .Popover__content > .ScrollableShadows__inner {
+    padding: 0.25rem;
 }
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
index 0022d2d85bc28..5a6815f095ed8 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.tsx
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -14,6 +14,7 @@ import {
     useMergeRefs,
 } from '@floating-ui/react'
 import clsx from 'clsx'
+import { ScrollableShadows } from 'lib/components/ScrollableShadows/ScrollableShadows'
 import { useEventListener } from 'lib/hooks/useEventListener'
 import { useFloatingContainerContext } from 'lib/hooks/useFloatingContainerContext'
 import { CLICK_OUTSIDE_BLOCK_CLASS, useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
@@ -87,7 +88,6 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
         fallbackPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
         className,
         padded = true,
-        actionable = false,
         middleware,
         sameWidth = false,
         maxContentWidth = false,
@@ -225,7 +225,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
                         <div
                             className={clsx(
                                 'Popover',
-                                actionable && 'Popover--actionable',
+                                padded && 'Popover--padded',
                                 maxContentWidth && 'Popover--max-content-width',
                                 !isAttached && 'Popover--top-centered',
                                 showArrow && 'Popover--with-arrow',
@@ -252,7 +252,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
                             onMouseLeave={onMouseLeaveInside}
                             aria-level={currentPopoverLevel}
                         >
-                            <div className={clsx('Popover__box', !padded && 'p-0')}>
+                            <div className="Popover__box">
                                 {showArrow && isAttached && (
                                     // Arrow is outside of .Popover__content to avoid affecting :nth-child for content
                                     <div
@@ -262,9 +262,9 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(function P
                                         style={arrowStyle}
                                     />
                                 )}
-                                <div className="Popover__content" ref={contentRef}>
+                                <ScrollableShadows className="Popover__content" ref={contentRef} direction="vertical">
                                     {overlay}
-                                </div>
+                                </ScrollableShadows>
                             </div>
                         </div>
                     </PopoverOverlayContext.Provider>
diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx b/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx
index e1625461109a8..9353443d74ba0 100644
--- a/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx
+++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx
@@ -1,7 +1,7 @@
 import { LemonButton } from '@posthog/lemon-ui'
 import { Meta } from '@storybook/react'
 
-import { Spinner as Spinner, SpinnerOverlay } from './Spinner'
+import { Spinner, SpinnerOverlay } from './Spinner'
 
 const meta: Meta<typeof Spinner> = {
     title: 'Lemon UI/Spinner',
diff --git a/frontend/src/lib/logic/userPreferencesLogic.ts b/frontend/src/lib/logic/userPreferencesLogic.ts
new file mode 100644
index 0000000000000..4bbcdd352a91c
--- /dev/null
+++ b/frontend/src/lib/logic/userPreferencesLogic.ts
@@ -0,0 +1,20 @@
+import { actions, kea, path, reducers } from 'kea'
+
+import type { userPreferencesLogicType } from './userPreferencesLogicType'
+
+// This logic is for browser stored user preferences where it's not super important that it is persisted to the server
+export const userPreferencesLogic = kea<userPreferencesLogicType>([
+    path(['lib', 'logic', 'userPreferencesLogic']),
+    actions({
+        setHidePostHogPropertiesInTable: (enabled: boolean) => ({ enabled }),
+    }),
+    reducers(() => ({
+        hidePostHogPropertiesInTable: [
+            false,
+            { persist: true },
+            {
+                setHidePostHogPropertiesInTable: (_, { enabled }) => enabled,
+            },
+        ],
+    })),
+])
diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
index 9a08b4333d1d7..a91b25f7ce80b 100644
--- a/frontend/src/lib/utils.tsx
+++ b/frontend/src/lib/utils.tsx
@@ -882,7 +882,8 @@ export function dateFilterToText(
     defaultValue: string | null,
     dateOptions: DateMappingOption[] = dateMapping,
     isDateFormatted: boolean = false,
-    dateFormat: string = DATE_FORMAT
+    dateFormat: string = DATE_FORMAT,
+    startOfRange: boolean = false
 ): string | null {
     if (dayjs.isDayjs(dateFrom) && dayjs.isDayjs(dateTo)) {
         return formatDateRange(dateFrom, dateTo, dateFormat)
@@ -922,6 +923,12 @@ export function dateFilterToText(
         if (dateOption && counter) {
             let date = null
             switch (dateOption) {
+                case 'year':
+                    date = dayjs().subtract(counter, 'y')
+                    break
+                case 'hour':
+                    date = dayjs().subtract(counter, 'h')
+                    break
                 case 'quarter':
                     date = dayjs().subtract(counter * 3, 'M')
                     break
@@ -937,6 +944,8 @@ export function dateFilterToText(
             }
             if (isDateFormatted) {
                 return formatDateRange(date, dayjs().endOf('d'))
+            } else if (startOfRange) {
+                return formatDate(date, dateFormat)
             } else {
                 return `Last ${counter} ${dateOption}${counter > 1 ? 's' : ''}`
             }
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index c71024d11e6e6..8cff514ccf419 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -24,6 +24,7 @@ import { ColumnConfigurator } from '~/queries/nodes/DataTable/ColumnConfigurator
 import { DataTableExport } from '~/queries/nodes/DataTable/DataTableExport'
 import { dataTableLogic, DataTableLogicProps, DataTableRow } from '~/queries/nodes/DataTable/dataTableLogic'
 import { EventRowActions } from '~/queries/nodes/DataTable/EventRowActions'
+import { InsightActorsQueryOptions } from '~/queries/nodes/DataTable/InsightActorsQueryOptions'
 import { QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
 import { renderColumn } from '~/queries/nodes/DataTable/renderColumn'
 import { renderColumnMeta } from '~/queries/nodes/DataTable/renderColumnMeta'
@@ -55,6 +56,7 @@ import {
     isEventsQuery,
     isHogQlAggregation,
     isHogQLQuery,
+    isInsightActorsQuery,
     taxonomicEventFilterToHogQL,
     taxonomicPersonFilterToHogQL,
 } from '~/queries/utils'
@@ -384,6 +386,18 @@ export function DataTable({
 
     const firstRowLeft = [
         backToSourceQuery ? <BackToSource key="return-to-source" /> : null,
+        backToSourceQuery && isActorsQuery(query.source) && isInsightActorsQuery(query.source.source) ? (
+            <InsightActorsQueryOptions
+                query={query.source.source}
+                setQuery={(q) =>
+                    setQuerySource({
+                        ...query.source,
+                        source: { ...(query.source as ActorsQuery).source, ...q },
+                    } as ActorsQuery)
+                }
+                key="source-query-options"
+            />
+        ) : null,
         showDateRange && sourceFeatures.has(QueryFeature.dateRangePicker) ? (
             <DateRange key="date-range" query={query.source} setQuery={setQuerySource} />
         ) : null,
diff --git a/frontend/src/queries/nodes/DataTable/InsightActorsQueryOptions.tsx b/frontend/src/queries/nodes/DataTable/InsightActorsQueryOptions.tsx
new file mode 100644
index 0000000000000..11d02eeb0776d
--- /dev/null
+++ b/frontend/src/queries/nodes/DataTable/InsightActorsQueryOptions.tsx
@@ -0,0 +1,44 @@
+import { useMountedLogic, useValues } from 'kea'
+import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
+
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+import { insightActorsQueryOptionsLogic } from '~/queries/nodes/DataTable/insightActorsQueryOptionsLogic'
+import { InsightActorsQuery } from '~/queries/schema'
+
+interface InsightActorsQueryOptionsProps {
+    query: InsightActorsQuery
+    setQuery?: (query: InsightActorsQuery) => void
+}
+export function InsightActorsQueryOptions({ setQuery, query }: InsightActorsQueryOptionsProps): JSX.Element | null {
+    const localDataNodeLogic = useMountedLogic(dataNodeLogic)
+    const { insightActorsQueryOptions } = useValues(
+        insightActorsQueryOptionsLogic({
+            key: localDataNodeLogic.key,
+            query: query,
+        })
+    )
+
+    return query && insightActorsQueryOptions ? (
+        <>
+            {Object.entries(insightActorsQueryOptions)
+                .filter(([, value]) => !!value)
+                .map(([key, options]) => (
+                    <div key={key}>
+                        <LemonSelect
+                            fullWidth
+                            className="min-w-32"
+                            placeholder={key}
+                            value={query?.[key] ?? null}
+                            onChange={(v) =>
+                                setQuery?.({
+                                    ...query,
+                                    [key]: v,
+                                })
+                            }
+                            options={options}
+                        />
+                    </div>
+                ))}
+        </>
+    ) : null
+}
diff --git a/frontend/src/queries/nodes/DataTable/insightActorsQueryOptionsLogic.ts b/frontend/src/queries/nodes/DataTable/insightActorsQueryOptionsLogic.ts
new file mode 100644
index 0000000000000..b1c7ec1379b83
--- /dev/null
+++ b/frontend/src/queries/nodes/DataTable/insightActorsQueryOptionsLogic.ts
@@ -0,0 +1,46 @@
+import { actions, afterMount, kea, path, props, propsChanged } from 'kea'
+import { loaders } from 'kea-loaders'
+
+import { query as performQuery } from '~/queries/query'
+import {
+    InsightActorsQuery,
+    InsightActorsQueryOptions,
+    InsightActorsQueryOptionsResponse,
+    NodeKind,
+} from '~/queries/schema'
+import { isInsightActorsQuery } from '~/queries/utils'
+
+import type { insightActorsQueryOptionsLogicType } from './insightActorsQueryOptionsLogicType'
+
+export const insightActorsQueryOptionsLogic = kea<insightActorsQueryOptionsLogicType>([
+    path(['queries', 'nodes', 'DataTable', 'sourceQueryOptionsLogic']),
+    props({} as { key: string; query: InsightActorsQuery }),
+    actions({
+        load: true,
+    }),
+    loaders(({ values, props }) => ({
+        insightActorsQueryOptions: [
+            null as InsightActorsQueryOptionsResponse | null,
+            {
+                load: async () => {
+                    if (!props.query || !isInsightActorsQuery(props.query)) {
+                        return values.insightActorsQueryOptions || null
+                    }
+                    const optionsQuery: InsightActorsQueryOptions = {
+                        kind: NodeKind.InsightActorsQueryOptions,
+                        source: props.query,
+                    }
+                    return await performQuery(optionsQuery)
+                },
+            },
+        ],
+    })),
+    afterMount(({ actions }) => {
+        actions.load()
+    }),
+    propsChanged(({ actions, props }, oldProps) => {
+        if (JSON.stringify(props.query) !== JSON.stringify(oldProps.query)) {
+            actions.load()
+        }
+    }),
+])
diff --git a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
index 065c07c63a15b..2dc816383a2ca 100644
--- a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
+++ b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
@@ -37,6 +37,7 @@ import {
     PropertyFilterType,
     PropertyGroupFilterValue,
     PropertyOperator,
+    RetentionEntity,
 } from '~/types'
 
 const reverseInsightMap: Record<Exclude<InsightType, InsightType.JSON | InsightType.SQL>, InsightNodeKind> = {
@@ -104,6 +105,21 @@ export const cleanHiddenLegendSeries = (
               .map(([k]) => k)
         : undefined
 }
+export const sanitizeRetentionEntity = (entity: RetentionEntity | undefined): RetentionEntity | undefined => {
+    if (!entity) {
+        return undefined
+    }
+    const record = { ...entity }
+    for (const key of Object.keys(record)) {
+        if (!['id', 'kind', 'name', 'type', 'order', 'uuid', 'custom_name'].includes(key)) {
+            delete record[key]
+        }
+    }
+    if ('id' in record && record.type === 'actions') {
+        record.id = Number(record.id)
+    }
+    return record
+}
 
 const cleanProperties = (parentProperties: FilterType['properties']): InsightsQueryBase['properties'] => {
     if (!parentProperties || !parentProperties.values) {
@@ -307,8 +323,8 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
             retentionType: filters.retention_type,
             retentionReference: filters.retention_reference,
             totalIntervals: filters.total_intervals,
-            returningEntity: filters.returning_entity,
-            targetEntity: filters.target_entity,
+            returningEntity: sanitizeRetentionEntity(filters.returning_entity),
+            targetEntity: sanitizeRetentionEntity(filters.target_entity),
             period: filters.period,
         })
         // TODO: query.aggregation_group_type_index
diff --git a/frontend/src/queries/schema-guards.ts b/frontend/src/queries/schema-guards.ts
new file mode 100644
index 0000000000000..9290e72203518
--- /dev/null
+++ b/frontend/src/queries/schema-guards.ts
@@ -0,0 +1,17 @@
+import Ajv from 'ajv'
+
+import { WebAnalyticsPropertyFilters } from '~/queries/schema'
+
+import schema from './schema.json'
+const ajv = new Ajv({
+    allowUnionTypes: true,
+})
+ajv.addSchema(schema)
+
+export const isWebAnalyticsPropertyFilters = (data: unknown): data is WebAnalyticsPropertyFilters => {
+    const validator = ajv.getSchema('#/definitions/WebAnalyticsPropertyFilters')
+    if (!validator) {
+        throw new Error('Could not find validator for WebAnalyticsPropertyFilters')
+    }
+    return validator(data) as boolean
+}
diff --git a/frontend/src/scenes/apps/HistoricalExportsTab.tsx b/frontend/src/scenes/apps/HistoricalExportsTab.tsx
index 9dc694c56ae26..8d236b00d8646 100644
--- a/frontend/src/scenes/apps/HistoricalExportsTab.tsx
+++ b/frontend/src/scenes/apps/HistoricalExportsTab.tsx
@@ -1,6 +1,6 @@
-import { Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
@@ -76,7 +76,9 @@ export function HistoricalExportsTab(): JSX.Element {
                                         </LemonTag>
                                     )
                                 case 'not_finished':
-                                    return <Progress percent={Math.floor((historicalExport.progress || 0) * 100)} />
+                                    return (
+                                        <LemonProgress percent={Math.floor((historicalExport.progress || 0) * 100)} />
+                                    )
                             }
                         },
                         align: 'right',
diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
index 1d88b939ba780..48a8b59483ba1 100644
--- a/frontend/src/scenes/cohorts/CohortEdit.tsx
+++ b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -1,6 +1,4 @@
-import { LemonDivider } from '@posthog/lemon-ui'
-import { UploadFile } from 'antd/es/upload/interface'
-import Dragger from 'antd/lib/upload/Dragger'
+import { LemonDivider, LemonFileInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { router } from 'kea-router'
@@ -169,38 +167,36 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                         single column with the user’s distinct ID. The very first row (the header) will
                                         be skipped during import.
                                     </span>
-                                    <Dragger
-                                        name="file"
-                                        multiple={false}
-                                        fileList={cohort.csv ? [cohort.csv] : []}
+                                    <LemonFileInput
                                         accept=".csv"
-                                        showUploadList={false}
-                                        beforeUpload={(file: UploadFile) => {
-                                            onChange(file)
-                                            return false
-                                        }}
-                                        className="cohort-csv-dragger"
-                                    >
-                                        {cohort.csv ? (
-                                            <>
-                                                <IconUploadFile
-                                                    style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
-                                                />
-                                                <div className="ant-upload-text">
-                                                    {cohort.csv?.name ?? 'File chosen'}
-                                                </div>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <IconUploadFile
-                                                    style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
-                                                />
-                                                <div className="ant-upload-text">
-                                                    Drag a file here or click to browse for a file
-                                                </div>
-                                            </>
-                                        )}
-                                    </Dragger>
+                                        multiple={false}
+                                        value={cohort.csv ? [cohort.csv] : []}
+                                        onChange={(files) => onChange(files[0])}
+                                        showUploadedFiles={false}
+                                        callToAction={
+                                            <div className="flex flex-col items-center justify-center flex-1 cohort-csv-dragger text-default space-y-1">
+                                                {cohort.csv ? (
+                                                    <>
+                                                        <IconUploadFile
+                                                            style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
+                                                        />
+                                                        <div className="ant-upload-text">
+                                                            {cohort.csv?.name ?? 'File chosen'}
+                                                        </div>
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <IconUploadFile
+                                                            style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
+                                                        />
+                                                        <div className="ant-upload-text">
+                                                            Drag a file here or click to browse for a file
+                                                        </div>
+                                                    </>
+                                                )}
+                                            </div>
+                                        }
+                                    />
                                 </>
                             )}
                         </Field>
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss
index 7e79cfa8e4c58..4f0a8632bf6ad 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss
@@ -43,6 +43,10 @@
         &::before {
             width: 1.5%;
         }
+
+        &::after {
+            width: 95%;
+        }
     }
 
     .CohortCriteriaRow__inline-divider {
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
index 484e67d8b6046..f17a33b149cd6 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
@@ -1,6 +1,6 @@
 import './CohortCriteriaRowBuilder.scss'
 
-import { Divider } from 'antd'
+import { LemonDivider } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions } from 'kea'
 import { Field as KeaField } from 'kea-forms'
@@ -166,9 +166,5 @@ export interface LogicalRowDividerProps {
 }
 
 export function LogicalRowDivider({ logicalOperator }: LogicalRowDividerProps): JSX.Element {
-    return (
-        <Divider className="logical-row-divider" orientation="left">
-            <span className="text-xs text-primary-alt font-semibold">{logicalOperator}</span>
-        </Divider>
-    )
+    return <LemonDivider className="logical-row-divider my-4" label={logicalOperator} />
 }
diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
index 5ea469b195613..82992a1e15f7f 100644
--- a/frontend/src/scenes/cohorts/Cohorts.scss
+++ b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -17,26 +17,12 @@
 .cohort-csv-dragger {
     height: 155px !important;
     margin-top: 1rem;
-    background-color: transparent !important;
-    border: 2px dashed var(--primary) !important;
-    border-radius: var(--radius) !important;
+    border-color: var(--primary);
+    border-style: dashed;
+    border-width: 2px;
+    border-radius: var(--radius);
 
     &:hover {
-        border-color: var(--primary-3000-hover) !important;
-    }
-
-    .ant-upload-drag-container {
-        display: flex !important;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 1rem;
-
-        .ant-upload-text {
-            margin: 8px 0 0 !important;
-            font-size: 1rem !important;
-            font-weight: 600;
-        }
+        border-color: var(--primary-3000-hover);
     }
 }
diff --git a/frontend/src/scenes/data-warehouse/external/SourceModal.tsx b/frontend/src/scenes/data-warehouse/external/SourceModal.tsx
index 824b748af255f..ae546ea9eae21 100644
--- a/frontend/src/scenes/data-warehouse/external/SourceModal.tsx
+++ b/frontend/src/scenes/data-warehouse/external/SourceModal.tsx
@@ -1,45 +1,106 @@
-import { LemonButton, LemonDivider, LemonInput, LemonModal, LemonModalProps, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonModal, LemonModalProps } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { Form } from 'kea-forms'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { Field } from 'lib/forms/Field'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import hubspotLogo from 'public/hubspot-logo.svg'
+import postgresLogo from 'public/postgres-logo.svg'
 import stripeLogo from 'public/stripe-logo.svg'
 
-import { ExternalDataSourceType } from '~/types'
-
 import { DatawarehouseTableForm } from '../new_table/DataWarehouseTableForm'
-import { SOURCE_DETAILS, SourceConfig, sourceFormLogic } from './sourceFormLogic'
+import PostgresSchemaForm from './forms/PostgresSchemaForm'
+import SourceForm from './forms/SourceForm'
+import { SourceConfig } from './sourceModalLogic'
 import { sourceModalLogic } from './sourceModalLogic'
 
 interface SourceModalProps extends LemonModalProps {}
 
 export default function SourceModal(props: SourceModalProps): JSX.Element {
-    const { tableLoading, selectedConnector, isManualLinkFormVisible, connectors, addToHubspotButtonUrl } =
-        useValues(sourceModalLogic)
-    const { selectConnector, toggleManualLinkFormVisible, onClear } = useActions(sourceModalLogic)
+    const { modalTitle, modalCaption } = useValues(sourceModalLogic)
+    const { onClear, onBack, onSubmit } = useActions(sourceModalLogic)
+    const { currentStep } = useValues(sourceModalLogic)
+
+    const footer = (): JSX.Element | null => {
+        if (currentStep === 1) {
+            return null
+        }
+
+        return (
+            <div className="mt-2 flex flex-row justify-end gap-2">
+                <LemonButton type="secondary" center data-attr="source-modal-back-button" onClick={onBack}>
+                    Back
+                </LemonButton>
+                <LemonButton type="primary" center onClick={() => onSubmit()} data-attr="source-link">
+                    Link
+                </LemonButton>
+            </div>
+        )
+    }
+
+    return (
+        <LemonModal
+            {...props}
+            width={600}
+            onAfterClose={() => onClear()}
+            title={modalTitle}
+            description={modalCaption}
+            footer={footer()}
+        >
+            <FirstStep />
+            <SecondStep />
+            <ThirdStep />
+        </LemonModal>
+    )
+}
+
+interface ModalPageProps {
+    page: number
+    children?: React.ReactNode
+}
+
+function ModalPage({ children, page }: ModalPageProps): JSX.Element {
+    const { currentStep } = useValues(sourceModalLogic)
+
+    if (currentStep !== page) {
+        return <></>
+    }
+
+    return <div>{children}</div>
+}
+
+function FirstStep(): JSX.Element {
+    const { connectors, addToHubspotButtonUrl } = useValues(sourceModalLogic)
+    const { selectConnector, toggleManualLinkFormVisible, onNext } = useActions(sourceModalLogic)
     const { featureFlags } = useValues(featureFlagLogic)
 
     const MenuButton = (config: SourceConfig): JSX.Element => {
         const onClick = (): void => {
             selectConnector(config)
+            onNext()
         }
 
         if (config.name === 'Stripe') {
             return (
-                <LemonButton onClick={onClick} className="w-100" center type="secondary">
+                <LemonButton onClick={onClick} fullWidth center type="secondary">
                     <img src={stripeLogo} alt="stripe logo" height={50} />
                 </LemonButton>
             )
         }
-        if (config.name === 'Hubspot' && featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE_HUBSPOT_IMPORT]) {
+        if (config.name === 'Hubspot') {
             return (
-                <Link to={addToHubspotButtonUrl() || ''}>
-                    <LemonButton className="w-100" center type="secondary">
-                        <img src={hubspotLogo} alt="hubspot logo" height={45} />
-                    </LemonButton>
-                </Link>
+                <LemonButton fullWidth center type="secondary" to={addToHubspotButtonUrl() || ''}>
+                    <img src={hubspotLogo} alt="hubspot logo" height={45} />
+                </LemonButton>
+            )
+        }
+
+        if (config.name === 'Postgres' && featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE_POSTGRES_IMPORT]) {
+            return (
+                <LemonButton onClick={onClick} fullWidth center type="secondary">
+                    <div className="flex flex-row gap-2 justify-center items-center">
+                        <img src={postgresLogo} alt="postgres logo" height={45} />
+                        <div className="text-base">Postgres</div>
+                    </div>
+                </LemonButton>
             )
         }
 
@@ -48,110 +109,37 @@ export default function SourceModal(props: SourceModalProps): JSX.Element {
 
     const onManualLinkClick = (): void => {
         toggleManualLinkFormVisible(true)
+        onNext()
     }
 
-    const formToShow = (): JSX.Element => {
-        if (selectedConnector) {
-            return <SourceForm sourceType={selectedConnector.name} />
-        }
-
-        if (isManualLinkFormVisible) {
-            return (
-                <div>
-                    <DatawarehouseTableForm
-                        footer={
-                            <>
-                                <LemonDivider className="mt-4" />
-                                <div className="mt-2 flex flex-row justify-end gap-2">
-                                    <LemonButton
-                                        type="secondary"
-                                        center
-                                        data-attr="source-modal-back-button"
-                                        onClick={onClear}
-                                    >
-                                        Back
-                                    </LemonButton>
-                                    <LemonButton
-                                        type="primary"
-                                        center
-                                        htmlType="submit"
-                                        data-attr="source-link"
-                                        loading={tableLoading}
-                                    >
-                                        Link
-                                    </LemonButton>
-                                </div>
-                            </>
-                        }
-                    />
-                </div>
-            )
-        }
-
-        return (
-            <div className="flex flex-col gap-2">
+    return (
+        <ModalPage page={1}>
+            <div className="flex flex-col gap-2 items-center">
                 {connectors.map((config, index) => (
                     <MenuButton key={config.name + '_' + index} {...config} />
                 ))}
-                <LemonButton onClick={onManualLinkClick} className="w-100" center type="secondary">
+                <LemonButton onClick={onManualLinkClick} className="w-full" center type="secondary">
                     Manual Link
                 </LemonButton>
             </div>
-        )
-    }
-
-    return (
-        <LemonModal
-            {...props}
-            onAfterClose={() => onClear()}
-            title={selectedConnector ? 'Link ' + selectedConnector.name : 'Select source to link'}
-            description={selectedConnector ? selectedConnector.caption : null}
-        >
-            {formToShow()}
-        </LemonModal>
+        </ModalPage>
     )
 }
 
-interface SourceFormProps {
-    sourceType: ExternalDataSourceType
-}
+function SecondStep(): JSX.Element {
+    const { selectedConnector } = useValues(sourceModalLogic)
 
-function SourceForm({ sourceType }: SourceFormProps): JSX.Element {
-    const logic = sourceFormLogic({ sourceType })
-    const { isExternalDataSourceSubmitting } = useValues(logic)
-    const { onBack } = useActions(logic)
+    return (
+        <ModalPage page={2}>
+            {selectedConnector ? <SourceForm sourceType={selectedConnector.name} /> : <DatawarehouseTableForm />}
+        </ModalPage>
+    )
+}
 
+function ThirdStep(): JSX.Element {
     return (
-        <Form
-            logic={sourceFormLogic}
-            props={{ sourceType }}
-            formKey="externalDataSource"
-            className="space-y-4"
-            enableFormOnSubmit
-        >
-            {SOURCE_DETAILS[sourceType].fields.map((field) => (
-                <Field key={field.name} name={['payload', field.name]} label={field.label}>
-                    <LemonInput className="ph-ignore-input" data-attr={field.name} />
-                </Field>
-            ))}
-            <Field name="prefix" label="Table Prefix (optional)">
-                <LemonInput className="ph-ignore-input" data-attr="prefix" placeholder="internal_" />
-            </Field>
-            <LemonDivider className="mt-4" />
-            <div className="mt-2 flex flex-row justify-end gap-2">
-                <LemonButton type="secondary" center data-attr="source-modal-back-button" onClick={onBack}>
-                    Back
-                </LemonButton>
-                <LemonButton
-                    type="primary"
-                    center
-                    htmlType="submit"
-                    data-attr="source-link"
-                    loading={isExternalDataSourceSubmitting}
-                >
-                    Link
-                </LemonButton>
-            </div>
-        </Form>
+        <ModalPage page={3}>
+            <PostgresSchemaForm />
+        </ModalPage>
     )
 }
diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.tsx b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts
similarity index 100%
rename from frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.tsx
rename to frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.ts
diff --git a/frontend/src/scenes/data-warehouse/external/forms/PostgresSchemaForm.tsx b/frontend/src/scenes/data-warehouse/external/forms/PostgresSchemaForm.tsx
new file mode 100644
index 0000000000000..423ca4fdbe016
--- /dev/null
+++ b/frontend/src/scenes/data-warehouse/external/forms/PostgresSchemaForm.tsx
@@ -0,0 +1,45 @@
+import { LemonSwitch, LemonTable } from '@posthog/lemon-ui'
+import { useActions, useMountedLogic, useValues } from 'kea'
+
+import { sourceModalLogic } from '../sourceModalLogic'
+import { sourceFormLogic } from './sourceFormLogic'
+
+export default function PostgresSchemaForm(): JSX.Element {
+    useMountedLogic(sourceFormLogic({ sourceType: 'Postgres' }))
+    const { selectSchema } = useActions(sourceModalLogic)
+    const { databaseSchema } = useValues(sourceModalLogic)
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div>
+                <LemonTable
+                    emptyState="No schemas found"
+                    dataSource={databaseSchema}
+                    columns={[
+                        {
+                            title: 'Table',
+                            key: 'table',
+                            render: function RenderTable(_, schema) {
+                                return schema.table
+                            },
+                        },
+                        {
+                            title: 'Sync',
+                            key: 'should_sync',
+                            render: function RenderShouldSync(_, schema) {
+                                return (
+                                    <LemonSwitch
+                                        checked={schema.should_sync}
+                                        onChange={() => {
+                                            selectSchema(schema)
+                                        }}
+                                    />
+                                )
+                            },
+                        },
+                    ]}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx b/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx
new file mode 100644
index 0000000000000..df83d79972b5d
--- /dev/null
+++ b/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx
@@ -0,0 +1,33 @@
+import { LemonInput } from '@posthog/lemon-ui'
+import { Form } from 'kea-forms'
+import { Field } from 'lib/forms/Field'
+
+import { ExternalDataSourceType } from '~/types'
+
+import { SOURCE_DETAILS } from '../sourceModalLogic'
+import { sourceFormLogic } from './sourceFormLogic'
+
+interface SourceFormProps {
+    sourceType: ExternalDataSourceType
+}
+
+export default function SourceForm({ sourceType }: SourceFormProps): JSX.Element {
+    return (
+        <Form
+            logic={sourceFormLogic}
+            props={{ sourceType }}
+            formKey={sourceType == 'Postgres' ? 'databaseSchemaForm' : 'externalDataSource'}
+            className="space-y-4"
+            enableFormOnSubmit
+        >
+            {SOURCE_DETAILS[sourceType].fields.map((field) => (
+                <Field key={field.name} name={['payload', field.name]} label={field.label}>
+                    <LemonInput className="ph-ignore-input" data-attr={field.name} />
+                </Field>
+            ))}
+            <Field name="prefix" label="Table Prefix (optional)">
+                <LemonInput className="ph-ignore-input" data-attr="prefix" placeholder="internal_" />
+            </Field>
+        </Form>
+    )
+}
diff --git a/frontend/src/scenes/data-warehouse/external/sourceFormLogic.tsx b/frontend/src/scenes/data-warehouse/external/forms/sourceFormLogic.ts
similarity index 61%
rename from frontend/src/scenes/data-warehouse/external/sourceFormLogic.tsx
rename to frontend/src/scenes/data-warehouse/external/forms/sourceFormLogic.ts
index a2be7fc80e4c7..7ed417510d1d7 100644
--- a/frontend/src/scenes/data-warehouse/external/sourceFormLogic.tsx
+++ b/frontend/src/scenes/data-warehouse/external/forms/sourceFormLogic.ts
@@ -3,74 +3,17 @@ import { actions, connect, kea, listeners, path, props } from 'kea'
 import { forms } from 'kea-forms'
 import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
-import { Link } from 'lib/lemon-ui/Link'
 import { urls } from 'scenes/urls'
 
 import { ExternalDataSourceCreatePayload, ExternalDataSourceType } from '~/types'
 
+import { getHubspotRedirectUri, sourceModalLogic } from '../sourceModalLogic'
 import type { sourceFormLogicType } from './sourceFormLogicType'
-import { getHubspotRedirectUri, sourceModalLogic } from './sourceModalLogic'
 
 export interface SourceFormProps {
     sourceType: ExternalDataSourceType
 }
 
-export interface SourceConfig {
-    name: ExternalDataSourceType
-    caption: string | JSX.Element
-    fields: FieldConfig[]
-    disabledReason?: string | null
-}
-interface FieldConfig {
-    name: string
-    label: string
-    type: string
-    required: boolean
-    placeholder: string
-}
-
-export const SOURCE_DETAILS: Record<string, SourceConfig> = {
-    Stripe: {
-        name: 'Stripe',
-        caption: (
-            <>
-                Enter your Stripe credentials to automatically pull your Stripe data into the PostHog Data warehouse.
-                <br />
-                You can find your account ID{' '}
-                <Link to="https://dashboard.stripe.com/settings/user" target="_blank">
-                    in your Stripe dashboard
-                </Link>
-                , and create a secret key{' '}
-                <Link to="https://dashboard.stripe.com/apikeys" target="_blank">
-                    here
-                </Link>
-                .
-            </>
-        ),
-        fields: [
-            {
-                name: 'account_id',
-                label: 'Account ID',
-                type: 'text',
-                required: true,
-                placeholder: 'acct_...',
-            },
-            {
-                name: 'client_secret',
-                label: 'Client Secret',
-                type: 'text',
-                required: true,
-                placeholder: 'sk_live_...',
-            },
-        ],
-    },
-    Hubspot: {
-        name: 'Hubspot',
-        fields: [],
-        caption: '',
-    },
-}
-
 const getPayloadDefaults = (sourceType: string): Record<string, any> => {
     switch (sourceType) {
         case 'Stripe':
@@ -101,16 +44,21 @@ export const sourceFormLogic = kea<sourceFormLogicType>([
     path(['scenes', 'data-warehouse', 'external', 'sourceFormLogic']),
     props({} as SourceFormProps),
     connect({
-        actions: [sourceModalLogic, ['onClear', 'toggleSourceModal', 'loadSources']],
+        actions: [
+            sourceModalLogic,
+            ['setDatabaseSchemas', 'onBack', 'onNext', 'selectConnector', 'toggleSourceModal', 'loadSources'],
+        ],
     }),
     actions({
-        onBack: true,
+        onCancel: true,
         handleRedirect: (kind: string, searchParams: any) => ({ kind, searchParams }),
+        onPostgresNext: true,
     }),
     listeners(({ actions }) => ({
-        onBack: () => {
+        onCancel: () => {
             actions.resetExternalDataSource()
-            actions.onClear()
+            actions.onBack()
+            actions.selectConnector(null)
         },
         submitExternalDataSourceSuccess: () => {
             lemonToast.success('New Data Resource Created')
@@ -119,6 +67,9 @@ export const sourceFormLogic = kea<sourceFormLogicType>([
             actions.loadSources()
             router.actions.push(urls.dataWarehouseSettings())
         },
+        submitDatabaseSchemaFormSuccess: () => {
+            actions.onNext()
+        },
         submitExternalDataSourceFailure: ({ error }) => {
             lemonToast.error(error?.message || 'Something went wrong')
         },
@@ -136,13 +87,14 @@ export const sourceFormLogic = kea<sourceFormLogicType>([
                     lemonToast.error(`Something went wrong.`)
             }
         },
+        onPostgresNext: async () => {},
     })),
     urlToAction(({ actions }) => ({
         '/data-warehouse/:kind/redirect': ({ kind = '' }, searchParams) => {
             actions.handleRedirect(kind, searchParams)
         },
     })),
-    forms(({ props }) => ({
+    forms(({ props, actions }) => ({
         externalDataSource: {
             defaults: {
                 prefix: '',
@@ -155,5 +107,51 @@ export const sourceFormLogic = kea<sourceFormLogicType>([
                 return newResource
             },
         },
+        databaseSchemaForm: {
+            defaults: {
+                prefix: '',
+                payload: {
+                    host: '',
+                    port: '',
+                    dbname: '',
+                    user: '',
+                    password: '',
+                    schema: '',
+                },
+            },
+            errors: ({ payload: { host, port, dbname, user, password, schema } }) => ({
+                payload: {
+                    host: !host && 'Please enter a host.',
+                    port: !port && 'Please enter a port.',
+                    dbname: !dbname && 'Please enter a dbname.',
+                    user: !user && 'Please enter a user.',
+                    password: !password && 'Please enter a password.',
+                    schema: !schema && 'Please enter a schema.',
+                },
+            }),
+            submit: async ({ payload: { host, port, dbname, user, password, schema }, prefix }) => {
+                const schemas = await api.externalDataSources.database_schema(
+                    host,
+                    port,
+                    dbname,
+                    user,
+                    password,
+                    schema
+                )
+                actions.setDatabaseSchemas(schemas)
+
+                return {
+                    payload: {
+                        host,
+                        port,
+                        dbname,
+                        user,
+                        password,
+                        schema,
+                    },
+                    prefix,
+                }
+            },
+        },
     })),
 ])
diff --git a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts
deleted file mode 100644
index 852406e2b1b02..0000000000000
--- a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-
-import { dataWarehouseTableLogic } from '../new_table/dataWarehouseTableLogic'
-import { dataWarehouseSettingsLogic } from '../settings/dataWarehouseSettingsLogic'
-import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
-import { SOURCE_DETAILS, SourceConfig } from './sourceFormLogic'
-import type { sourceModalLogicType } from './sourceModalLogicType'
-
-export const getHubspotRedirectUri = (): string => `${window.location.origin}/data-warehouse/hubspot/redirect`
-
-export const sourceModalLogic = kea<sourceModalLogicType>([
-    path(['scenes', 'data-warehouse', 'external', 'sourceModalLogic']),
-    actions({
-        selectConnector: (connector: SourceConfig | null) => ({ connector }),
-        toggleManualLinkFormVisible: (visible: boolean) => ({ visible }),
-        handleRedirect: (kind: string, searchParams: any) => ({ kind, searchParams }),
-        onClear: true,
-    }),
-    connect({
-        values: [
-            dataWarehouseTableLogic,
-            ['tableLoading'],
-            dataWarehouseSettingsLogic,
-            ['dataWarehouseSources'],
-            preflightLogic,
-            ['preflight'],
-        ],
-        actions: [
-            dataWarehouseSceneLogic,
-            ['toggleSourceModal'],
-            dataWarehouseTableLogic,
-            ['resetTable'],
-            dataWarehouseSettingsLogic,
-            ['loadSources'],
-        ],
-    }),
-    reducers({
-        selectedConnector: [
-            null as SourceConfig | null,
-            {
-                selectConnector: (_, { connector }) => connector,
-            },
-        ],
-        isManualLinkFormVisible: [
-            false,
-            {
-                toggleManualLinkFormVisible: (_, { visible }) => visible,
-            },
-        ],
-    }),
-    selectors({
-        showFooter: [
-            (s) => [s.selectedConnector, s.isManualLinkFormVisible],
-            (selectedConnector, isManualLinkFormVisible) => selectedConnector || isManualLinkFormVisible,
-        ],
-        connectors: [
-            (s) => [s.dataWarehouseSources],
-            (sources): SourceConfig[] => {
-                return Object.values(SOURCE_DETAILS).map((connector) => ({
-                    ...connector,
-                    disabledReason:
-                        sources && sources.results.find((source) => source.source_type === connector.name)
-                            ? 'Already linked'
-                            : null,
-                }))
-            },
-        ],
-        addToHubspotButtonUrl: [
-            (s) => [s.preflight],
-            (preflight) => {
-                return () => {
-                    const clientId = preflight?.data_warehouse_integrations?.hubspot.client_id
-
-                    if (!clientId) {
-                        return null
-                    }
-
-                    const scopes = [
-                        'crm.objects.contacts.read',
-                        'crm.objects.companies.read',
-                        'crm.objects.deals.read',
-                        'tickets',
-                        'crm.objects.quotes.read',
-                    ]
-
-                    const params = new URLSearchParams()
-                    params.set('client_id', clientId)
-                    params.set('redirect_uri', getHubspotRedirectUri())
-                    params.set('scope', scopes.join(' '))
-
-                    return `https://app.hubspot.com/oauth/authorize?${params.toString()}`
-                }
-            },
-        ],
-    }),
-    listeners(({ actions }) => ({
-        onClear: () => {
-            actions.selectConnector(null)
-            actions.toggleManualLinkFormVisible(false)
-            actions.resetTable()
-        },
-    })),
-])
diff --git a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.tsx b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.tsx
new file mode 100644
index 0000000000000..9c31f5f7e4811
--- /dev/null
+++ b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.tsx
@@ -0,0 +1,295 @@
+import { Link } from '@posthog/lemon-ui'
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { ExternalDataPostgresSchema, ExternalDataSourceType } from '~/types'
+
+import { dataWarehouseTableLogic } from '../new_table/dataWarehouseTableLogic'
+import { dataWarehouseSettingsLogic } from '../settings/dataWarehouseSettingsLogic'
+import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
+import { sourceFormLogic } from './forms/sourceFormLogic'
+import type { sourceModalLogicType } from './sourceModalLogicType'
+
+export const getHubspotRedirectUri = (): string => `${window.location.origin}/data-warehouse/hubspot/redirect`
+
+export interface SourceConfig {
+    name: ExternalDataSourceType
+    caption: string | React.ReactNode
+    fields: FieldConfig[]
+    disabledReason?: string | null
+}
+interface FieldConfig {
+    name: string
+    label: string
+    type: string
+    required: boolean
+    placeholder: string
+}
+
+export const SOURCE_DETAILS: Record<string, SourceConfig> = {
+    Stripe: {
+        name: 'Stripe',
+        caption: (
+            <>
+                Enter your Stripe credentials to automatically pull your Stripe data into the PostHog Data warehouse.
+                <br />
+                You can find your account ID{' '}
+                <Link to="https://dashboard.stripe.com/settings/user" target="_blank">
+                    in your Stripe dashboard
+                </Link>
+                , and create a secret key{' '}
+                <Link to="https://dashboard.stripe.com/apikeys" target="_blank">
+                    here
+                </Link>
+                .
+            </>
+        ),
+        fields: [
+            {
+                name: 'account_id',
+                label: 'Account ID',
+                type: 'text',
+                required: true,
+                placeholder: 'acct_...',
+            },
+            {
+                name: 'client_secret',
+                label: 'Client Secret',
+                type: 'text',
+                required: true,
+                placeholder: 'sk_live_...',
+            },
+        ],
+    },
+    Hubspot: {
+        name: 'Hubspot',
+        fields: [],
+        caption: '',
+    },
+    Postgres: {
+        name: 'Postgres',
+        caption: (
+            <>
+                Enter your Postgres credentials to automatically pull your Postgres data into the PostHog Data
+                warehouse.
+            </>
+        ),
+        fields: [
+            {
+                name: 'host',
+                label: 'Host',
+                type: 'text',
+                required: true,
+                placeholder: 'localhost',
+            },
+            {
+                name: 'port',
+                label: 'Port',
+                type: 'number',
+                required: true,
+                placeholder: '5432',
+            },
+            {
+                name: 'dbname',
+                label: 'Database',
+                type: 'text',
+                required: true,
+                placeholder: 'postgres',
+            },
+            {
+                name: 'user',
+                label: 'User',
+                type: 'text',
+                required: true,
+                placeholder: 'postgres',
+            },
+            {
+                name: 'password',
+                label: 'Password',
+                type: 'password',
+                required: true,
+                placeholder: 'password',
+            },
+            {
+                name: 'schema',
+                label: 'Schema',
+                type: 'text',
+                required: true,
+                placeholder: 'public',
+            },
+        ],
+    },
+}
+
+export const sourceModalLogic = kea<sourceModalLogicType>([
+    path(['scenes', 'data-warehouse', 'external', 'sourceModalLogic']),
+    actions({
+        selectConnector: (connector: SourceConfig | null) => ({ connector }),
+        toggleManualLinkFormVisible: (visible: boolean) => ({ visible }),
+        handleRedirect: (kind: string, searchParams: any) => ({ kind, searchParams }),
+        onClear: true,
+        onBack: true,
+        onNext: true,
+        onSubmit: true,
+        setDatabaseSchemas: (schemas: ExternalDataPostgresSchema[]) => ({ schemas }),
+        selectSchema: (schema: ExternalDataPostgresSchema) => ({ schema }),
+    }),
+    connect({
+        values: [
+            dataWarehouseTableLogic,
+            ['tableLoading'],
+            dataWarehouseSettingsLogic,
+            ['dataWarehouseSources'],
+            preflightLogic,
+            ['preflight'],
+        ],
+        actions: [
+            dataWarehouseSceneLogic,
+            ['toggleSourceModal'],
+            dataWarehouseTableLogic,
+            ['resetTable'],
+            dataWarehouseSettingsLogic,
+            ['loadSources'],
+        ],
+    }),
+    reducers({
+        selectedConnector: [
+            null as SourceConfig | null,
+            {
+                selectConnector: (_, { connector }) => connector,
+            },
+        ],
+        isManualLinkFormVisible: [
+            false,
+            {
+                toggleManualLinkFormVisible: (_, { visible }) => visible,
+            },
+        ],
+        currentStep: [
+            1,
+            {
+                onNext: (state) => state + 1,
+                onBack: (state) => state - 1,
+                onClear: () => 1,
+            },
+        ],
+        databaseSchema: [
+            [] as ExternalDataPostgresSchema[],
+            {
+                setDatabaseSchemas: (_, { schemas }) => schemas,
+                selectSchema: (state, { schema }) => {
+                    const newSchema = state.map((s) => ({
+                        ...s,
+                        should_sync: s.table === schema.table ? !s.should_sync : s.should_sync,
+                    }))
+                    return newSchema
+                },
+            },
+        ],
+    }),
+    selectors({
+        showFooter: [
+            (s) => [s.selectedConnector, s.isManualLinkFormVisible],
+            (selectedConnector, isManualLinkFormVisible) => selectedConnector || isManualLinkFormVisible,
+        ],
+        connectors: [
+            (s) => [s.dataWarehouseSources],
+            (sources): SourceConfig[] => {
+                return Object.values(SOURCE_DETAILS).map((connector) => ({
+                    ...connector,
+                    disabledReason:
+                        sources && sources.results.find((source) => source.source_type === connector.name)
+                            ? 'Already linked'
+                            : null,
+                }))
+            },
+        ],
+        addToHubspotButtonUrl: [
+            (s) => [s.preflight],
+            (preflight) => {
+                return () => {
+                    const clientId = preflight?.data_warehouse_integrations?.hubspot.client_id
+
+                    if (!clientId) {
+                        return null
+                    }
+
+                    const scopes = [
+                        'crm.objects.contacts.read',
+                        'crm.objects.companies.read',
+                        'crm.objects.deals.read',
+                        'tickets',
+                        'crm.objects.quotes.read',
+                    ]
+
+                    const params = new URLSearchParams()
+                    params.set('client_id', clientId)
+                    params.set('redirect_uri', getHubspotRedirectUri())
+                    params.set('scope', scopes.join(' '))
+
+                    return `https://app.hubspot.com/oauth/authorize?${params.toString()}`
+                }
+            },
+        ],
+        modalTitle: [
+            (s) => [s.currentStep],
+            (currentStep) => {
+                if (currentStep === 1) {
+                    return 'Select a data source to get started'
+                }
+                if (currentStep === 2) {
+                    return 'Link your data source'
+                }
+
+                if (currentStep === 3) {
+                    return 'Select tables to import'
+                }
+
+                return ''
+            },
+        ],
+        modalCaption: [
+            (s) => [s.selectedConnector, s.currentStep],
+            (selectedConnector, currentStep) => {
+                if (currentStep == 2 && selectedConnector) {
+                    return SOURCE_DETAILS[selectedConnector.name]?.caption
+                }
+
+                return ''
+            },
+        ],
+    }),
+    listeners(({ actions, values }) => ({
+        onClear: () => {
+            actions.selectConnector(null)
+            actions.toggleManualLinkFormVisible(false)
+            actions.resetTable()
+        },
+        onSubmit: () => {
+            // Shared function that triggers different actions depending on the current step
+
+            if (values.currentStep === 1) {
+                return
+            }
+
+            if (values.currentStep === 2) {
+                if (values.selectedConnector?.name === 'Postgres') {
+                    sourceFormLogic({ sourceType: 'Postgres' }).actions.submitDatabaseSchemaForm()
+                } else if (values.selectedConnector?.name) {
+                    sourceFormLogic({ sourceType: values.selectedConnector?.name }).actions.submitExternalDataSource()
+                }
+            }
+
+            if (values.currentStep === 3) {
+                const logic = sourceFormLogic({ sourceType: 'Postgres' })
+
+                logic.actions.setExternalDataSourceValue('payload', {
+                    ...logic.values.databaseSchemaForm.payload,
+                    schemas: values.databaseSchema.filter((schema) => schema.should_sync).map((schema) => schema.table),
+                })
+                logic.actions.setExternalDataSourceValue('prefix', logic.values.databaseSchemaForm.prefix)
+                logic.actions.submitExternalDataSource()
+            }
+        },
+    })),
+])
diff --git a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx
index ae6d5120d8316..bd00fa492c5ae 100644
--- a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx
+++ b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx
@@ -4,11 +4,7 @@ import { Field } from 'lib/forms/Field'
 
 import { dataWarehouseTableLogic } from './dataWarehouseTableLogic'
 
-interface DataWarehouseTableFormProps {
-    footer?: JSX.Element
-}
-
-export function DatawarehouseTableForm({ footer }: DataWarehouseTableFormProps): JSX.Element {
+export function DatawarehouseTableForm(): JSX.Element {
     return (
         <Form formKey="table" logic={dataWarehouseTableLogic} className="space-y-4" enableFormOnSubmit>
             <div className="flex flex-col gap-2 max-w-160">
@@ -76,7 +72,6 @@ export function DatawarehouseTableForm({ footer }: DataWarehouseTableFormProps):
                     />
                 </Field>
             </div>
-            {footer}
         </Form>
     )
 }
diff --git a/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx b/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx
index 217d776bb7236..89b23c525c094 100644
--- a/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx
+++ b/frontend/src/scenes/data-warehouse/redirect/DataWarehouseRedirectScene.tsx
@@ -1,7 +1,7 @@
 import { LemonButton, LemonInput } from '@posthog/lemon-ui'
 import { Form } from 'kea-forms'
 import { Field } from 'lib/forms/Field'
-import { sourceFormLogic } from 'scenes/data-warehouse/external/sourceFormLogic'
+import { sourceFormLogic } from 'scenes/data-warehouse/external/forms/sourceFormLogic'
 import { SceneExport } from 'scenes/sceneTypes'
 
 export const scene: SceneExport = {
diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
index 633259b80037c..e56c2b26b11d5 100644
--- a/frontend/src/scenes/experiments/Experiment.scss
+++ b/frontend/src/scenes/experiments/Experiment.scss
@@ -16,20 +16,6 @@
     .experiment-preview {
         margin-bottom: 1rem;
         border-bottom: 1px solid var(--border);
-
-        .mde-slider {
-            .ant-slider-handle {
-                border: none;
-            }
-
-            .ant-slider-rail {
-                background-color: var(--primary-3000-highlight);
-            }
-
-            .ant-slider-handle:focus {
-                box-shadow: 0 0 0 5px var(--primary-3000-highlight);
-            }
-        }
     }
 
     .variants {
@@ -151,14 +137,6 @@
             font-weight: 900;
             content: '\2022';
         }
-
-        .ant-progress-inner {
-            border-radius: var(--radius);
-
-            .ant-progress-bg {
-                border-radius: var(--radius);
-            }
-        }
     }
 
     .no-experiment-results {
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
index 21fc9b679639b..7625d2d9484ee 100644
--- a/frontend/src/scenes/experiments/Experiment.tsx
+++ b/frontend/src/scenes/experiments/Experiment.tsx
@@ -10,7 +10,7 @@ import {
     LemonTextArea,
     Tooltip,
 } from '@posthog/lemon-ui'
-import { Popconfirm, Progress } from 'antd'
+import { Popconfirm } from 'antd'
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
@@ -26,6 +26,7 @@ import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonCollapse } from 'lib/lemon-ui/LemonCollapse'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { Link } from 'lib/lemon-ui/Link'
 import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils'
 import { useEffect, useState } from 'react'
@@ -318,6 +319,7 @@ export function Experiment(): JSX.Element {
                                                             <LemonButton
                                                                 onClick={() => addExperimentGroup()}
                                                                 icon={<IconPlusMini />}
+                                                                data-attr="add-test-variant"
                                                             >
                                                                 Add test variant
                                                             </LemonButton>
@@ -407,6 +409,7 @@ export function Experiment(): JSX.Element {
                                             </div>
                                         </div>
                                         <LemonSelect
+                                            data-attr="experiment-goal-type-select"
                                             value={experimentInsightType}
                                             onChange={(val) => {
                                                 val &&
@@ -742,9 +745,8 @@ export function Experiment(): JSX.Element {
                                                     <div className="mb-2">
                                                         <b>Experiment progress</b>
                                                     </div>
-                                                    <Progress
-                                                        strokeWidth={20}
-                                                        showInfo={false}
+                                                    <LemonProgress
+                                                        size="large"
                                                         percent={experimentProgressPercent}
                                                         strokeColor="var(--success)"
                                                     />
diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
index de102b6c9868f..2066d8d73709c 100644
--- a/frontend/src/scenes/experiments/ExperimentPreview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -1,5 +1,4 @@
 import { LemonButton, LemonDivider, LemonInput, LemonModal, Tooltip } from '@posthog/lemon-ui'
-import { Slider } from 'antd'
 import { useActions, useValues } from 'kea'
 import { Field, Form } from 'kea-forms'
 import { InsightLabel } from 'lib/components/InsightLabel'
@@ -7,6 +6,7 @@ import { PropertyFilterButton } from 'lib/components/PropertyFilters/components/
 import { TZLabel } from 'lib/components/TZLabel'
 import { dayjs } from 'lib/dayjs'
 import { IconInfo } from 'lib/lemon-ui/icons'
+import { LemonSlider } from 'lib/lemon-ui/LemonSlider'
 import { humanFriendlyNumber } from 'lib/utils'
 import { groupFilters } from 'scenes/feature-flags/FeatureFlags'
 import { urls } from 'scenes/urls'
@@ -112,27 +112,24 @@ export function ExperimentPreview({
                                 <IconInfo className="ml-1 text-muted text-xl" />
                             </Tooltip>
                         </div>
-                        <div className="flex mde-slider">
-                            <div className="w-1/3">
-                                <Slider
-                                    defaultValue={5}
-                                    value={minimumDetectableChange}
-                                    min={1}
-                                    max={sliderMaxValue}
-                                    trackStyle={{ background: 'var(--primary-3000)' }}
-                                    handleStyle={{ background: 'var(--primary-3000)' }}
-                                    onChange={(value) => {
-                                        setExperiment({
-                                            parameters: {
-                                                ...experiment.parameters,
-                                                minimum_detectable_effect: value,
-                                            },
-                                        })
-                                    }}
-                                    tipFormatter={(value) => `${value}%`}
-                                />
-                            </div>
+                        <div className="flex gap-2">
+                            <LemonSlider
+                                value={minimumDetectableChange ?? 5}
+                                min={1}
+                                max={sliderMaxValue}
+                                step={1}
+                                onChange={(value) => {
+                                    setExperiment({
+                                        parameters: {
+                                            ...experiment.parameters,
+                                            minimum_detectable_effect: value,
+                                        },
+                                    })
+                                }}
+                                className="w-1/3"
+                            />
                             <LemonInput
+                                data-attr="min-acceptable-improvement"
                                 type="number"
                                 min={1}
                                 max={sliderMaxValue}
diff --git a/frontend/src/scenes/experiments/ExperimentResult.tsx b/frontend/src/scenes/experiments/ExperimentResult.tsx
index 8ba87a58b5f89..df92c3c9335b7 100644
--- a/frontend/src/scenes/experiments/ExperimentResult.tsx
+++ b/frontend/src/scenes/experiments/ExperimentResult.tsx
@@ -3,11 +3,12 @@ import './Experiment.scss'
 import { IconInfo } from '@posthog/icons'
 import { Tooltip } from '@posthog/lemon-ui'
 // eslint-disable-next-line no-restricted-imports
-import { Col, Progress } from 'antd'
+import { Col } from 'antd'
 import { useValues } from 'kea'
 import { getSeriesColor } from 'lib/colors'
 import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
 import { FunnelLayout } from 'lib/constants'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { capitalizeFirstLetter } from 'lib/utils'
 
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
@@ -131,10 +132,8 @@ export function ExperimentResult(): JSX.Element {
                                                 <span>{conversionRateForVariant(variant)}%</span>
                                             </div>
                                         )}
-                                        <Progress
+                                        <LemonProgress
                                             percent={Number((experimentResults.probability[variant] * 100).toFixed(1))}
-                                            size="small"
-                                            showInfo={false}
                                             strokeColor={getSeriesColor(
                                                 getIndexForVariant(variant, experimentInsightType)
                                             )}
diff --git a/frontend/src/scenes/experiments/MetricSelector.tsx b/frontend/src/scenes/experiments/MetricSelector.tsx
index 5b2a09f1e1eec..78919d0363b69 100644
--- a/frontend/src/scenes/experiments/MetricSelector.tsx
+++ b/frontend/src/scenes/experiments/MetricSelector.tsx
@@ -51,6 +51,7 @@ export function MetricSelector({
             <div className="flex items-center w-full gap-2 mb-4">
                 <span>Insight Type</span>
                 <LemonSelect
+                    data-attr="metrics-selector"
                     value={isTrends ? InsightType.TRENDS : InsightType.FUNNELS}
                     onChange={(val) => {
                         val && setPreviewInsight({ insight: val })
diff --git a/frontend/src/scenes/experiments/SecondaryMetrics.tsx b/frontend/src/scenes/experiments/SecondaryMetrics.tsx
index 0a8be6c983a1e..a3202c05dc055 100644
--- a/frontend/src/scenes/experiments/SecondaryMetrics.tsx
+++ b/frontend/src/scenes/experiments/SecondaryMetrics.tsx
@@ -153,7 +153,7 @@ export function SecondaryMetrics({
                     className="space-y-4"
                 >
                     <Field name="name" label="Name">
-                        <LemonInput />
+                        <LemonInput data-attr="secondary-metric-name" />
                     </Field>
                     <Field name="filters" label="Query">
                         <MetricSelector
@@ -230,7 +230,11 @@ export function SecondaryMetrics({
                         ))}
                         {metrics && !(metrics.length > 2) && (
                             <div className="mb-2 mt-4">
-                                <LemonButton type="secondary" onClick={openModalToCreateSecondaryMetric}>
+                                <LemonButton
+                                    data-attr="add-secondary-metric-btn"
+                                    type="secondary"
+                                    onClick={openModalToCreateSecondaryMetric}
+                                >
                                     Add metric
                                 </LemonButton>
                             </div>
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index c7d2db6d328ce..7f92c4acbed86 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -975,8 +975,11 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                         max={100}
                                                         value={value}
                                                         onChange={(changedValue) => {
-                                                            if (changedValue !== null && changedValue !== undefined) {
-                                                                const valueInt = parseInt(changedValue.toString())
+                                                            if (changedValue !== null) {
+                                                                const valueInt =
+                                                                    changedValue !== undefined
+                                                                        ? parseInt(changedValue.toString())
+                                                                        : 0
                                                                 if (!isNaN(valueInt)) {
                                                                     onChange(valueInt)
                                                                 }
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
index cc054dd7de160..b7144c132a488 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlagReleaseConditions.tsx
@@ -6,16 +6,17 @@ import { router } from 'kea-router'
 import { allOperatorsToHumanName } from 'lib/components/DefinitionPopover/utils'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
 import { isPropertyFilterWithOperator } from 'lib/components/PropertyFilters/utils'
-import { INSTANTLY_AVAILABLE_PROPERTIES } from 'lib/constants'
+import { FEATURE_FLAGS, INSTANTLY_AVAILABLE_PROPERTIES } from 'lib/constants'
 import { groupsAccessLogic, GroupsAccessStatus } from 'lib/introductions/groupsAccessLogic'
 import { GroupsIntroductionOption } from 'lib/introductions/GroupsIntroductionOption'
 import { IconCopy, IconDelete, IconErrorOutline, IconOpenInNew, IconPlus, IconSubArrowRight } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { LemonSlider } from 'lib/lemon-ui/LemonSlider'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils'
+import { capitalizeFirstLetter, dateFilterToText, dateStringToComponents, humanFriendlyNumber } from 'lib/utils'
 import { urls } from 'scenes/urls'
 
 import { cohortsModel } from '~/models/cohortsModel'
@@ -51,6 +52,7 @@ export function FeatureFlagReleaseConditions({
         affectedUsers,
         totalUsers,
         featureFlagTaxonomicOptions,
+        enabledFeatures,
     } = useValues(logic)
     const {
         setAggregationGroupTypeIndex,
@@ -147,48 +149,61 @@ export function FeatureFlagReleaseConditions({
                     {readOnly ? (
                         <>
                             {group.properties?.map((property, idx) => (
-                                <>
-                                    <div className="feature-flag-property-display" key={idx}>
-                                        {idx === 0 ? (
-                                            <LemonButton
-                                                icon={<IconSubArrowRight className="arrow-right" />}
-                                                size="small"
-                                            />
-                                        ) : (
-                                            <LemonButton icon={<span className="text-sm">&</span>} size="small" />
-                                        )}
-                                        <span className="simple-tag tag-light-blue text-primary-alt">
-                                            {property.type === 'cohort' ? 'Cohort' : property.key}{' '}
-                                        </span>
-                                        {isPropertyFilterWithOperator(property) ? (
-                                            <span>{allOperatorsToHumanName(property.operator)} </span>
-                                        ) : null}
+                                <div className="feature-flag-property-display" key={idx}>
+                                    {idx === 0 ? (
+                                        <LemonButton
+                                            icon={<IconSubArrowRight className="arrow-right" />}
+                                            size="small"
+                                        />
+                                    ) : (
+                                        <LemonButton icon={<span className="text-sm">&</span>} size="small" />
+                                    )}
+                                    <span className="simple-tag tag-light-blue text-primary-alt">
+                                        {property.type === 'cohort' ? 'Cohort' : property.key}{' '}
+                                    </span>
+                                    {isPropertyFilterWithOperator(property) ? (
+                                        <span>{allOperatorsToHumanName(property.operator)} </span>
+                                    ) : null}
 
-                                        {property.type === 'cohort' ? (
-                                            <LemonButton
-                                                type="secondary"
-                                                size="xsmall"
-                                                to={urls.cohort(property.value)}
-                                                sideIcon={<IconOpenInNew />}
-                                                targetBlank
-                                            >
-                                                {(property.value && cohortsById[property.value]?.name) ||
-                                                    `ID ${property.value}`}
-                                            </LemonButton>
-                                        ) : (
-                                            [
-                                                ...(Array.isArray(property.value) ? property.value : [property.value]),
-                                            ].map((val, idx) => (
+                                    {property.type === 'cohort' ? (
+                                        <LemonButton
+                                            type="secondary"
+                                            size="xsmall"
+                                            to={urls.cohort(property.value)}
+                                            sideIcon={<IconOpenInNew />}
+                                            targetBlank
+                                        >
+                                            {(property.value && cohortsById[property.value]?.name) ||
+                                                `ID ${property.value}`}
+                                        </LemonButton>
+                                    ) : (
+                                        [...(Array.isArray(property.value) ? property.value : [property.value])].map(
+                                            (val, idx) => (
                                                 <span
                                                     key={idx}
                                                     className="simple-tag tag-light-blue text-primary-alt display-value"
                                                 >
                                                     {val}
+                                                    {isPropertyFilterWithOperator(property) &&
+                                                    ['is_date_before', 'is_date_after'].includes(property.operator) &&
+                                                    dateStringToComponents(String(val)) // check it's a relative date
+                                                        ? ` ( ${dateFilterToText(
+                                                              String(val),
+                                                              undefined,
+                                                              '',
+                                                              [],
+                                                              false,
+                                                              String(val).slice(-1) === 'h'
+                                                                  ? 'MMMM D, YYYY HH:mm:ss'
+                                                                  : 'MMMM D, YYYY',
+                                                              true
+                                                          )} )`
+                                                        : ''}
                                                 </span>
-                                            ))
-                                        )}
-                                    </div>
-                                </>
+                                            )
+                                        )
+                                    )}
+                                </div>
                             ))}
                         </>
                     ) : (
@@ -206,6 +221,7 @@ export function FeatureFlagReleaseConditions({
                                 taxonomicFilterOptionsFromProp={featureFlagTaxonomicOptions}
                                 hasRowOperator={false}
                                 sendAllKeyUpdates
+                                allowRelativeDateOptions={!!enabledFeatures[FEATURE_FLAGS.NEW_FEATURE_FLAG_OPERATORS]}
                                 errorMessages={
                                     propertySelectErrors?.[index]?.properties?.some((message) => !!message.value)
                                         ? propertySelectErrors[index].properties?.map((message, index) => {
@@ -250,16 +266,27 @@ export function FeatureFlagReleaseConditions({
                         <div className="feature-flag-form-row gap-2">
                             <div className="flex items-center gap-1">
                                 Roll out to{' '}
+                                <LemonSlider
+                                    value={group.rollout_percentage ?? 100}
+                                    onChange={(value) => {
+                                        updateConditionSet(index, value)
+                                    }}
+                                    min={0}
+                                    max={100}
+                                    step={1}
+                                    className="ml-1.5 w-20"
+                                />
                                 <LemonInput
                                     data-attr="rollout-percentage"
                                     type="number"
-                                    className="mx-2"
+                                    className="ml-2 mr-1.5 max-w-30"
                                     onChange={(value): void => {
-                                        updateConditionSet(index, value || 100)
+                                        updateConditionSet(index, value === undefined ? 0 : value)
                                     }}
-                                    value={group.rollout_percentage != null ? group.rollout_percentage : 100}
+                                    value={group.rollout_percentage ?? 100}
                                     min={0}
                                     max={100}
+                                    step="any"
                                     suffix={<span>%</span>}
                                 />{' '}
                                 of <b>{aggregationTargetName}</b> in this set.{' '}
diff --git a/frontend/src/scenes/feature-flags/featureFlagLogic.ts b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
index 829084a53898b..8d8de11f4a888 100644
--- a/frontend/src/scenes/feature-flags/featureFlagLogic.ts
+++ b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
@@ -1026,21 +1026,6 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
                 return effectiveRolloutPercentage * (affectedUsers[index] / effectiveTotalUsers)
             },
         ],
-        approximateTotalBlastRadius: [
-            (s) => [s.computeBlastRadiusPercentage, s.featureFlag],
-            (computeBlastRadiusPercentage, featureFlag) => {
-                if (!featureFlag || !featureFlag.filters.groups) {
-                    return 0
-                }
-
-                let total = 0
-                featureFlag.filters.groups.forEach((group, index) => {
-                    total += computeBlastRadiusPercentage(group.rollout_percentage, index)
-                })
-
-                return Math.min(total, 100)
-            },
-        ],
         filteredDashboards: [
             (s) => [s.dashboards, s.featureFlag],
             (dashboards, featureFlag) => {
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
index 1294cac810b66..8b0eadf36c0d3 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
@@ -5,8 +5,9 @@ import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
 import { ConfigProvider, Empty, Table } from 'antd'
 import Column from 'antd/lib/table/Column'
 import { useActions, useValues } from 'kea'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { VisibilitySensor } from 'lib/components/VisibilitySensor/VisibilitySensor'
 import { IconSelectProperties, IconTrendingDown, IconTrendingUp } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
@@ -148,7 +149,8 @@ export function FunnelPropertyCorrelationTable(): JSX.Element | null {
                                 onClickOutside={() => setIsPropertiesOpen(false)}
                                 overlay={
                                     <div className="p-4">
-                                        <PersonPropertySelect
+                                        <PropertySelect
+                                            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
                                             onChange={setPropertyNames}
                                             selectedProperties={
                                                 propertyNames.length === 1 && propertyNames[0] === '$all'
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx b/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx
index 81896e494e251..838d8d0bc6c1e 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx
@@ -28,7 +28,7 @@ export function SeriesColumnItem({
     const showCountedByTag = !!indexedResults.find(({ action }) => action?.math && action.math !== 'total')
 
     return (
-        <div className="series-name-wrapper-col">
+        <div className="series-name-wrapper-col space-x-1">
             <InsightLabel
                 seriesColor={getSeriesColor(item.seriesIndex, compare || false)}
                 action={item.action}
diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
index 87728077e8a67..adbaab5f6a429 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
+++ b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
@@ -1,10 +1,10 @@
 import { Link } from '@posthog/lemon-ui'
-import { Progress } from 'antd'
 import { useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { IconPlayCircle, IconRefresh, IconReplay } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
+import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
 import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { LemonTag, LemonTagType } from 'lib/lemon-ui/LemonTag/LemonTag'
@@ -87,7 +87,7 @@ export function AsyncMigrations(): JSX.Element {
             const progress = asyncMigration.progress
             return (
                 <div>
-                    <Progress percent={progress} />
+                    <LemonProgress percent={progress} />
                 </div>
             )
         },
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
index dd9e194634abc..07073be4f5ef8 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -6,7 +6,7 @@ import { useActions, useMountedLogic, useValues } from 'kea'
 import { useEffect, useMemo } from 'react'
 import { notebookNodeLogic } from './notebookNodeLogic'
 import { NotebookNodeProps, NotebookNodeAttributeProperties } from '../Notebook/utils'
-import { containsHogQLQuery, isHogQLQuery, isNodeWithSource } from '~/queries/utils'
+import { containsHogQLQuery, isHogQLQuery, isInsightVizNode, isNodeWithSource } from '~/queries/utils'
 import { LemonButton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { urls } from 'scenes/urls'
@@ -226,7 +226,11 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
         },
     },
     href: (attrs) =>
-        attrs.query.kind === NodeKind.SavedInsightNode ? urls.insightView(attrs.query.shortId) : undefined,
+        attrs.query.kind === NodeKind.SavedInsightNode
+            ? urls.insightView(attrs.query.shortId)
+            : isInsightVizNode(attrs.query)
+            ? urls.insightNew(undefined, undefined, attrs.query)
+            : undefined,
     Settings,
     pasteOptions: {
         find: urls.insightView('(.+)' as InsightShortId),
diff --git a/frontend/src/scenes/notebooks/NotebookMenu.tsx b/frontend/src/scenes/notebooks/NotebookMenu.tsx
index c1e694b487c53..90eb59f515181 100644
--- a/frontend/src/scenes/notebooks/NotebookMenu.tsx
+++ b/frontend/src/scenes/notebooks/NotebookMenu.tsx
@@ -47,7 +47,6 @@ export function NotebookMenu({ shortId }: NotebookLogicProps): JSX.Element {
                         },
                     },
             ]}
-            actionable
         >
             <LemonButton aria-label="more" icon={<IconEllipsis />} size="small" />
         </LemonMenu>
diff --git a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
index 07c852c422b83..5696efcbe5ba2 100644
--- a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
+++ b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
@@ -81,7 +81,6 @@ export function NotebooksTable(): JSX.Element {
                                 },
                             },
                         ]}
-                        actionable
                     >
                         <LemonButton aria-label="more" icon={<IconEllipsis />} size="small" />
                     </LemonMenu>
diff --git a/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx b/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx
index e7a6c45bdd892..f97f7a19d0c5f 100644
--- a/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingInviteTeammates.tsx
@@ -13,6 +13,7 @@ export const OnboardingInviteTeammates = ({ stepKey }: { stepKey: OnboardingStep
     const { preflight } = useValues(preflightLogic)
     const { product } = useValues(onboardingLogic)
     const { inviteTeamMembers } = useActions(inviteLogic)
+    const { invitesToSend, canSubmit: canSubmitInvites } = useValues(inviteLogic)
 
     const titlePrefix = (): string => {
         switch (product?.type) {
@@ -49,7 +50,12 @@ export const OnboardingInviteTeammates = ({ stepKey }: { stepKey: OnboardingStep
             title={`${titlePrefix()} better with friends.`}
             stepKey={stepKey}
             hedgehog={<PhonePairHogs height={120} width={288} />}
-            continueAction={() => preflight?.email_service_available && inviteTeamMembers()}
+            continueAction={() =>
+                preflight?.email_service_available &&
+                invitesToSend[0]?.target_email &&
+                canSubmitInvites &&
+                inviteTeamMembers()
+            }
         >
             <div className="mb-6">
                 <p>
diff --git a/frontend/src/scenes/paths/PathNodeCard.tsx b/frontend/src/scenes/paths/PathNodeCard.tsx
index 2f999f94bef03..0e1f2e27055ce 100644
--- a/frontend/src/scenes/paths/PathNodeCard.tsx
+++ b/frontend/src/scenes/paths/PathNodeCard.tsx
@@ -25,11 +25,15 @@ export function PathNodeCard({ insightProps, node }: PathNodeCardProps): JSX.Ele
         return null
     }
 
+    // Attention: targetLinks are the incoming links, sourceLinks are the outgoing links
     const isPathStart = node.targetLinks.length === 0
     const isPathEnd = node.sourceLinks.length === 0
     const continuingCount = node.sourceLinks.reduce((prev, curr) => prev + curr.value, 0)
     const dropOffCount = node.value - continuingCount
-    const averageConversionTime = !isPathStart ? node.targetLinks[0].average_conversion_time / 1000 : null
+    const averageConversionTime = !isPathStart
+        ? node.targetLinks.reduce((prev, curr) => prev + curr.average_conversion_time / 1000, 0) /
+          node.targetLinks.length
+        : null
 
     return (
         <Tooltip title={pageUrl(node)} placement="right">
diff --git a/frontend/src/scenes/paths/pathsDataLogic.ts b/frontend/src/scenes/paths/pathsDataLogic.ts
index 5f54718e1900a..6493fd9f91dae 100644
--- a/frontend/src/scenes/paths/pathsDataLogic.ts
+++ b/frontend/src/scenes/paths/pathsDataLogic.ts
@@ -147,6 +147,9 @@ export const pathsDataLogic = kea<pathsDataLogicType>([
                         label: path_dropoff_key || path_start_key || path_end_key || 'Pageview',
                         isDropOff: Boolean(path_dropoff_key),
                     }),
+                    additionalFields: {
+                        value_at_data_point: 'event_count',
+                    },
                 })
             } else if (personsUrl) {
                 openPersonsModal({
diff --git a/frontend/src/scenes/pipeline/Destinations.tsx b/frontend/src/scenes/pipeline/Destinations.tsx
index 5e76505223f94..ff950643ca537 100644
--- a/frontend/src/scenes/pipeline/Destinations.tsx
+++ b/frontend/src/scenes/pipeline/Destinations.tsx
@@ -13,7 +13,7 @@ import { PipelineAppKind, ProductKey } from '~/types'
 import { AppMetricSparkLine } from './AppMetricSparkLine'
 import { DestinationType, pipelineDestinationsLogic } from './destinationsLogic'
 import { NewButton } from './NewButton'
-import { RenderApp } from './utils'
+import { RenderApp, RenderBatchExportIcon } from './utils'
 
 export function Destinations(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
@@ -79,7 +79,7 @@ function DestinationsTable(): JSX.Element {
                             if (destination.backend === 'plugin') {
                                 return <RenderApp plugin={destination.plugin} />
                             }
-                            return <></> // TODO: batch export
+                            return <RenderBatchExportIcon type={destination.data_storage_type} />
                         },
                     },
                     {
diff --git a/frontend/src/scenes/pipeline/destinations/BigQuery.png b/frontend/src/scenes/pipeline/destinations/BigQuery.png
new file mode 100644
index 0000000000000..97f805d46ddd4
Binary files /dev/null and b/frontend/src/scenes/pipeline/destinations/BigQuery.png differ
diff --git a/frontend/src/scenes/pipeline/destinations/Postgres.png b/frontend/src/scenes/pipeline/destinations/Postgres.png
new file mode 100644
index 0000000000000..b249db7b54038
Binary files /dev/null and b/frontend/src/scenes/pipeline/destinations/Postgres.png differ
diff --git a/frontend/src/scenes/pipeline/destinations/Redshift.svg b/frontend/src/scenes/pipeline/destinations/Redshift.svg
new file mode 100644
index 0000000000000..87f05da8eae34
--- /dev/null
+++ b/frontend/src/scenes/pipeline/destinations/Redshift.svg
@@ -0,0 +1,9 @@
+<svg width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.000488281" y="0.666016" width="40" height="42.6667" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="translate(-0.303569 -0.249997) scale(0.00313894 0.00292968)"/>
+</pattern>
+<image id="image0" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAgAElEQVR4Ae3db6xk9Xkf8Od35u7CLn92MRjwLnG9u3ZLSBpMDI0xMClNg02bqNgSlqKqLypVaRUpraGN12njmKpKnLLEi+MXVV/lTaNIobJpbYmWOCoaWEP8J7arWkml2kkbG9sI8HoJYPbeOae6uwzetXfv7p25vzvPufNBGp17Z+Y85zmfZ+b+vnfu7BDhPwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKLLlAWHcD5E5iHwO67Du++6so33jBu2m4ex890zDe9afcXP/2Bn/1upp70QmARBASARZiyc0wjsLrwXxzH39eVeN8lVx/YlaaxOTXSRoz3v+nqY6XEg8vtyx8VBOY0CIddSAEBYCHH7qQ3W+DUhX9QmhML/86r9m12G+mO17XR7n/znma1sa5tvyMIpBuRhrawgACwhYfr1OYvcKaFf9KVALC66Jd2/5vfcCIATFwEgYmELYG6AgJAXV/VF1RgrYV/QiIARHRdafcfOD0ATHwEgYmELYE6AgJAHVdVF1TgfBb+CY0AsHYAmDgJAhMJWwIbKyAAbKynagsqsJ6Ff0IkAJz4w3+378A15/lzaHx0HPFgO/7eg94sOHkU2RKYXuA8n3jTH8CeBLaywDQL/8RDAFh9BaDr9h/Yu86fQ4LA5DFkS2AWgXU+8WY5lH0JbB2BWRb+iYIAMG0AmAgKAhMJWwLTCAgA06jZZ2EFNmLhn+AJACcl9u3fMyGZcisITAlntwUXEAAW/AHg9M9PYCMX/skRBYCIKBH79s0aACaigsBEwpbA+QgIAOej5D4LK1Bj4Z9gCgAbHQAmsoLARMKWwFoCAsBaOm5bWIGaC/8EVQCoFQAmwoLARMKWwJkEBIAzqbhuYQU2Y+Gf4AoAtQPARFoQmEjYEjhVQAA4VcPXCyuwmQv/BFkA2KwAMBEXBCYStgRWBQQAj4OFFpjHwj8BFwA2OwBM5AWBiYTtYgsIAIs9/4U9+3ku/BN0AWBeAWAyAUFgImG7mAICwGLOfWHPOsPCP8EXAOYdACaTEAQmEraLJSAALNa8F/ZsMy38kyEIAFkCwGQigsBEwnYxBASAxZjzwp5lxoV/MgwBIFsAmExmfHTcNh9tu5cO+58OTUxst6KAALAVp+qcIvPCPxmPAJA1AEwmJAhMJGy3poAAsDXnurBn1YeFfzIcASB7AJhMShCYSNhuLQEBYGvNc2HPpk8L/2RIAkBfAsBkYoLARMJ2awgIAFtjjgt7Fn1c+CfDEgD6FgAmkxMEJhK2/RYQAPo9v4Xtvs8L/2RoAkBfA8BkgoLARMK2nwJL/Wxb14sucEks/0lpmn2L7uD85ykw2D1o4kPR7fxHEXFgnp04NoFpBJppdrIPgXkLtE3snHcPjk9gVWAQ3UUkCPRRQADo49T0TIAAAQIEZhQQAGYEtDsBAgQIEOijgADQx6npmQABAgQIzCggAMwIaHcCBAgQINBHAQGgj1PTMwECBAgQmFFAAJgR0O4ECBAgQKCPAgJAH6emZwIECBAgMKOAADAjoN0JECBAgEAfBQSAPk5NzwQIECBAYEYBAWBGQLsTIECAAIE+CggAfZyangkQIECAwIwCAsCMgHYnQIAAAQJ9FBAA+jg1PRMgQIAAgRkFBIAZAe1OgAABAgT6KCAA9HFqeiZAgAABAjMKCAAzAtqdAAECBAj0UUAA6OPU9EyAAAECBGYUEABmBLQ7AQIECBDoo4AA0Mep6ZkAAQIECMwoIADMCGh3AgQIECDQRwEBoI9T0zMBAgQIEJhRYGnG/e3eU4Hddx3e/aNvve66+O4lX3zy8Dte7ulpaJsAgWkF/vbvXnhg7/htP/KWA1957L7bj05bxn79FRAA+ju7qTpfXfgv7pbv6crxf7F9XJ6/cO9477sOHflsN47ROJZGL5ddnzly8NoXpipuJwIE0gq8/u5fuvjC43tviWbbsI1uGPHsTdFd/M0dFy3tvvP+Jw6//NLy7wgCacdXpTEBoAprvqKnLvxN0+yKKKtNPt90g+0RcWsZxK1NjP91E8+2dxz6zJ+UGI/G0YyOPf/yE5/98N99Lt8Z6YgAgbUELvmZX738kksuv21Q2mHXdbeVcdxQBs1gdZ/Byef/q7sPdkeJf7vjoqV7BIG1RLfebQLA1pvpaWd0loX/tPuc+s0gmtX3hdwYMbixibj38tftjDsPPfG/SpRR1zWjY90Ljx85eMfTp+7jawIE5i9wxTt/4w3bLxj8dFlqhk3XDCPG15XSldWwX8qJwH+OJk8Gge07tt97x6HHDx9/ceWjXhE4B1nPbxYAej7As7W/3oX/bHVOXt/8eBfx41G6X7q0XBx3Hnryq1FitNK2o3bb9tEfve/GP49SurVruJUAgY0UeON7Prx/3A6GUbphEzEspTnwWv0TT8fp3uM9aMquiMF923c09wgCr4luyS8EgC021o1d+M+G0x2ILg4slfKPY2U57jh05Bvl/qdGbXd8tDSO0SO/etufCgRns3M9gekErr77N68brGwflq4dRsRtEeWawYk1/nx+u1//MQWB9Zv1bQ8BoG8TO0u/qwv/RXH83ijH//kpf+M/y7039upBafZGtL/QlKVfiCbiXYeeerYc+szjbRuj5ZUyuvwtf/nlh9773vHGHlU1AltaoHnDz/3GW5vtqwt+M+yivXUwjtfH6m/25/Vy/sbZCAIbZ5mtkgCQbSLr7OfUhX9QVt/cN///SumuiIh3N028+4LtXRz7vz9y7J0PPHmktCujdjAY7Xpq1+cfeujHjs+/Ux0QyCHwtl/8j9u++fx3bmrGS8NoxsOujXe89nwubYomBYEUY9jQJgSADeXcvGIZF/6znX0T3aXRxZ1RBncO2ojv3njse3fc+MSTEWU0aJdGz7xu8NQX/umNL51tf9cT2HICN9+zY+/VV968+tt9NDF85tljb1+KwY4Tv+F3zav/SCfnWQsCOecyTVcCwDRqc9znjX//w5eNtzX3rL7U/9pvCHPsZ5pDD5ruwojm9oi4PZpxXHmsXXnXoac+10U3arvxqGtfPvLpD/zsd6epbR8CGQX23/1bu14Zx62lK7etvmFv3MWNg9JsO+1f42VsfI2eTgsC//7Ig8dfPv6gfzWwBljCmwSAhEM5U0uThX9corcL/5nO6+R13VKJ7uYScXNTmoNdubB75wNPfCnaMooYP969NHj80ftueebs+7uFQC6Bq2/7zdeXK5eGg7YbNk0zXF6Onxg00UwW/EGd9+3NBeFkEIgPbd+x/X13CAJzmcG0B91CD8NpCXLvN1n4o8LCv+/Hrv/znZdevC+3wMnuxlH+rOm6UWnKaFwGo68ceexzgyhX9aH3s/W486pe0J+t/Y25vkTs27dnY2rNq0rXfvt/PnXkxrISPx1LMWyiDCPKtfNqZz3H3XbhxX/x12+4/k3r2edc9x233eqrd14ROBdUgtu9ApBgCGdqYbLwb83f+M90xmtfN4ju2ihxbXTdLw66ldi2bTBul3O8OWrtzt261QWWl8dXDKL5y/DT9MSovSLQn0e8h2zSWa1sH9y/VMo/Sdre3NsqMRhECABzH4QGVj/y4sTH66I4XWASBHbu3HZ1RPyz02/1XQaB6T4qKkPnW7yHwfl9ducWV3B6BAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAImHozUCBAgQIFBLQACoJasuAQIECBBILCAAJB6O1ggQIECAQC0BAaCWrLoECBAgQCCxgACQeDhaI0CAAAECtQQEgFqy6hIgQIAAgcQCAkDi4WiNAAECBAjUEhAAasmqS4AAAQIEEgsIAEmH00b7e+M2vpy0PW0RIEDgnALtuP3ScjS/f847usNcBJbmclQHPafANz5+8H9EdDdc8+7ffnfXdb8+aOL6c+60xe/QRvu/o+1GS103Wl5+5XATzRVb/JSdXg8EmqWlZ9u2uacdtMMyjuGgib/Rg7artri68I8H5b5PH7zlv0YpXdWDKT61gAAwNd1m7Fi6r38iPh7RfWLRgkDXjruuK18uZTDqyvLo6PL2J/7437zj2xP1ve+5/4HJ17YE5inQRIy//vC//E8RsXqJq+6478qli3cMu7YblhgMm4i/WZpYiFdbf2jh/5V5TsaxzyUgAJxLKMXtpwSB9zxwV9fGh7beKwJlJbr4fBvtaNwujVa+98qRx+67/WgKfk0QWIfAtx+975mI+M+vXmL3XYd3X9S9fGtptw270g0jup8cNM22dZRMf1cLf/oRnbFBAeCMLFmvLN3XPx6fiOgevqbnQWDclu+VZvxUdEujMjg+attdTz36/utfzCqvLwLTChx9+J6jRyM+FScvEXccumjvpc3by/J4WEoZRhM/VSJ2TFt/nvtZ+OepP/uxBYDZDedQoY9BoH2hawdHmqYbdctl9LVvXvH5//Oxt7wyBzyHJDBfgUd/5cVvRPxRnLxE3P0H2/e88hc3laYbLnVluFK6WwZNc8l8m1z76Bb+tX36cqsA0JdJnbHP04NAU+LXo4u3nvGum35lea7t2sdLNKO2WRk9+qmVL8djt65sehsOSCC7wEPvPf50xJE4eflw3P0Hgzcuf/Wt4zIYLpUYtm25rTRxeYbTaEv7xXY8vu8PDw4/eeLNff7Gn2EsU/cgAExNl2nH+QeBLuLpiDJquxiVdjD67x+46U8jSptJSS8EeiHw0HvH/y/iC3HycjiiK1f//OHrBoOV4VLphm1phiViz2aey2sL//tfXfgPbubRHauWgABQS3YudTcvCIy77mul6UYxXho1x18c/bdf+ztf88995jJ0B93yAqX71ifjKxEnLv9h9XSvvPPfHbjgoguHpS3DLtphibK/BoOFv4ZqnpoCQJ5ZbGAn3w8Ce+767X+wNOg+NOufBsZt+5VBGTxeohu99FLz+GP3vf3rpzX8wdO+8w0BAhUFnnnkg1+NiNXL764e5vKf+8jeC5ZeGS4NmmE3boZR2h8tpSnTtmDhn1auX/sJAP2a1zq7Ld3TD8fDEd1/WU8QGEfbNjH4YnTdqF2J0XPbX3niCwdvf3adB3d3AgQ2SeC5T937jYhY/cS9E5+6t+fnH7ii2dbd1rQx7KIbRtNdX6IZnKsdC/+5hLbW7QLA1prnWc5m7SAwbrvlaLrPRrM0Gh9fHm1/+oXPPPKxv3fsLMVcTYBAcoGnP/mvVgP7J169xOv+4S9fuvPFvbeUZnBbxIlQcFMTZfvkNCz8E4nF2goACzXv04NAu9S9pYvx51741uCPnzx8y8sLReFkCSyQwPO/97Fjz0c8EicvETffs+Oaq/b81NKg+Vsr7fKf/aE39y3Qo+H7pzr134i+X8JXBDZfYO977v/WIMpVm3/kjTvizqv2bVyxvlYqEfv2beob2jdeqmu//cj7b7164wurSKCuwEJ8PnVdQtUJECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgUIECBAgED/BASA/s1MxwQIECBAYGYBAWBmQgXmIdB03V/N47iOSeAHBdpu8MIPXud7An0QEAD6MCU9/pDAtqXubV1bPtiV+M4P3egKApsgMC7t8xHl1/4qLvvJTTicQxDYcIGy4RUVJLCJAvvv/q1dy8tLvxyD7t7SxWWbeOiZD7Xzqn0z1+h9gRKxb9+eXp3G6sI/6AYfOdZe9jtHDl7rt/9eTU+zpwoIAKdq+Lq3An0MAgJARPQoAFj4e/vjQeNnERAAzgLj6n4K9CkICAD9CAAW/n7+LND1uQUEgHMbuUcPBfoQBASA3AHAwt/DJ76W1yUgAKyLy537JpA5CAgAOQOAhb9vz3L9TisgAEwrZ79eCWQMAgJArgBg4e/VU1qzGyAgAGwAohL9EcgUBASAHAHAwt+f569ON1ZAANhYT9V6IpAhCAgA8w0AFv6ePFm1WU1AAKhGq3AfBOYZBASA+QQAC38fnpl63AwBAWAzlB0jvcA8goAAsLkBwMKf/mmowU0WEAA2GdzhcgtsZhAQADYnAFj4cz/ndDc/AQFgfvaOnFhgM4KAAFA7AJTnVsua074AAASYSURBVMryR14aX/kxH9mb+MmmtbkJCABzo3fgPgjUDAICQK0AYOHvw3NLj/MXEADmPwMd9ECgRhAQADY6AFj4e/BU0mIiAQEg0TC0kl9gI4OAABDRdV23/8DeGX8OWfjzP3N0mFFgxidexlPSE4H6AhsRBASAWQOAhb/+I90RtrKAALCVp+vcqgvMEgQEgIjo2m7fgWvW+XPIwl/9ge0ACyGwzifeQpg4SQLrFpgmCAgAq68AtN3+8w4AFv51PzDtQGANAQFgDRw3EVivwHqCgACwGgBKu//AG5q1nS38a/u4lcB0AgLAdG72IrCmwPkEAQHgXAHAwr/mg8yNBGYUEABmBLQ7gbUE1goCAsDqWwBKu//NP/gKgIV/rceU2whslIAAsFGS6hBYQ+BMQUAAWA0A0e5/855X/wRg4V/jIeQmAhsuIABsOKmCBM4ucGoQuOjKfZed/Z6LcUsbMT6wf+9RH9m7GPN2lrkEBIBc89DNggisBoGlXX/tJ6LpugU55TOf5gWlvP6aG77ks/rPzONaAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKgp8P8B3lrb1eiBle4AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/frontend/src/scenes/pipeline/destinations/S3.png b/frontend/src/scenes/pipeline/destinations/S3.png
new file mode 100644
index 0000000000000..46cba574308b5
Binary files /dev/null and b/frontend/src/scenes/pipeline/destinations/S3.png differ
diff --git a/frontend/src/scenes/pipeline/destinations/Snowflake.png b/frontend/src/scenes/pipeline/destinations/Snowflake.png
new file mode 100644
index 0000000000000..30dceb9dad357
Binary files /dev/null and b/frontend/src/scenes/pipeline/destinations/Snowflake.png differ
diff --git a/frontend/src/scenes/pipeline/destinationsLogic.tsx b/frontend/src/scenes/pipeline/destinationsLogic.tsx
index ba5d7191bf2a5..afa56842ae4d3 100644
--- a/frontend/src/scenes/pipeline/destinationsLogic.tsx
+++ b/frontend/src/scenes/pipeline/destinationsLogic.tsx
@@ -9,6 +9,7 @@ import { userLogic } from 'scenes/userLogic'
 
 import {
     BatchExportConfiguration,
+    BatchExportDestination,
     PipelineAppKind,
     PipelineAppTab,
     PluginConfigTypeNew,
@@ -38,9 +39,10 @@ export enum PipelineAppBackend {
     Plugin = 'plugin',
 }
 
-export interface BatchExportDestination extends DestinationTypeBase {
+interface BatchExportDestinationType extends DestinationTypeBase {
     backend: PipelineAppBackend.BatchExport
     id: string
+    data_storage_type: BatchExportDestination['type']
     app_source_code_url?: never
 }
 export interface WebhookDestination extends DestinationTypeBase {
@@ -49,7 +51,7 @@ export interface WebhookDestination extends DestinationTypeBase {
     plugin: PluginType
     app_source_code_url?: string
 }
-export type DestinationType = BatchExportDestination | WebhookDestination
+export type DestinationType = BatchExportDestinationType | WebhookDestination
 
 export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
     path(['scenes', 'pipeline', 'destinationsLogic']),
@@ -189,6 +191,7 @@ export const pipelineDestinationsLogic = kea<pipelineDestinationsLogicType>([
                     id: batchExport.id,
                     name: batchExport.name,
                     description: `${batchExport.destination.type} batch export`, // TODO: add to backend
+                    data_storage_type: batchExport.destination.type,
                     enabled: !batchExport.paused,
                     config_url: urls.pipelineApp(
                         PipelineAppKind.Destination,
diff --git a/frontend/src/scenes/pipeline/utils.tsx b/frontend/src/scenes/pipeline/utils.tsx
index de7070605e359..d2d0a666cc30a 100644
--- a/frontend/src/scenes/pipeline/utils.tsx
+++ b/frontend/src/scenes/pipeline/utils.tsx
@@ -3,9 +3,20 @@ import api from 'lib/api'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import posthog from 'posthog-js'
+import BigQueryIcon from 'public/pipeline/BigQuery.png'
+import PostgresIcon from 'public/pipeline/Postgres.png'
+import RedshiftIcon from 'public/pipeline/Redshift.svg'
+import S3Icon from 'public/pipeline/S3.png'
+import SnowflakeIcon from 'public/pipeline/Snowflake.png'
 import { PluginImage, PluginImageSize } from 'scenes/plugins/plugin/PluginImage'
 
-import { BatchExportConfiguration, PluginConfigTypeNew, PluginLogEntryType, PluginType } from '~/types'
+import {
+    BatchExportConfiguration,
+    BatchExportDestination,
+    PluginConfigTypeNew,
+    PluginLogEntryType,
+    PluginType,
+} from '~/types'
 
 import { DestinationFrequency } from './destinationsLogic'
 import { PipelineAppLogLevel } from './pipelineAppLogsLogic'
@@ -120,6 +131,24 @@ export function RenderApp({ plugin, imageSize }: RenderAppProps): JSX.Element {
     )
 }
 
+export function RenderBatchExportIcon({ type }: { type: BatchExportDestination['type'] }): JSX.Element {
+    const icon = {
+        BigQuery: BigQueryIcon,
+        Postgres: PostgresIcon,
+        Redshift: RedshiftIcon,
+        S3: S3Icon,
+        Snowflake: SnowflakeIcon,
+    }[type]
+
+    return (
+        <div className="flex items-center gap-4">
+            <Link to={`https://posthog.com/docs/cdp/batch-exports/${type.toLowerCase()}`} target="_blank">
+                <img src={icon} alt={type} height={60} width={60} />
+            </Link>
+        </div>
+    )
+}
+
 export const logLevelToTypeFilter = (level: PipelineAppLogLevel): PluginLogEntryType => {
     switch (level) {
         case PipelineAppLogLevel.Debug:
diff --git a/frontend/src/scenes/plugins/edit/UploadField.tsx b/frontend/src/scenes/plugins/edit/UploadField.tsx
index 4be545f3e9d08..ee6367af038c7 100644
--- a/frontend/src/scenes/plugins/edit/UploadField.tsx
+++ b/frontend/src/scenes/plugins/edit/UploadField.tsx
@@ -1,29 +1,19 @@
-import { Button, Upload } from 'antd'
-import { UploadFile } from 'antd/lib/upload/interface'
+import { LemonButton, LemonFileInput } from '@posthog/lemon-ui'
 import { IconUploadFile } from 'lib/lemon-ui/icons'
 
-export function UploadField({
-    value,
-    onChange,
-}: {
-    value?: UploadFile | null
-    onChange?: (file?: UploadFile | null) => void
-}): JSX.Element {
+export function UploadField({ value, onChange }: { value?: File; onChange?: (file: File) => void }): JSX.Element {
     return (
-        <Upload
+        <LemonFileInput
+            accept={'image/*'}
             multiple={false}
-            fileList={value?.size ? [value] : []}
-            beforeUpload={(file) => {
-                onChange?.(file)
-                return false
-            }}
-            onRemove={() => {
-                onChange?.(null)
-                return false
-            }}
-            className="ph-ignore-input"
-        >
-            <Button icon={<IconUploadFile />}>Click to upload</Button>
-        </Upload>
+            onChange={(files) => onChange?.(files[0])}
+            value={value?.size ? [value] : []}
+            showUploadedFiles={false}
+            callToAction={
+                <LemonButton className="ph-ignore-input" icon={<IconUploadFile />}>
+                    Click to upload
+                </LemonButton>
+            }
+        />
     )
 }
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
index 80fc2804b870a..2c3a86bbbe817 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
@@ -2,7 +2,7 @@ import { TZLabel } from '@posthog/apps-common'
 import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
-import { IconGauge, IconTerminal, IconUnverifiedEvent } from 'lib/lemon-ui/icons'
+import { IconGauge, IconOffline, IconTerminal, IconUnverifiedEvent } from 'lib/lemon-ui/icons'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { ceilMsToClosestSecond, colonDelimitedDuration } from 'lib/utils'
 import { useEffect } from 'react'
@@ -36,6 +36,10 @@ const typeToIconAndDescription = {
         Icon: IconGauge,
         tooltip: 'Network event',
     },
+    ['offline-status']: {
+        Icon: IconOffline,
+        tooltip: 'browser went offline or returned online',
+    },
 }
 const PLAYER_INSPECTOR_LIST_ITEM_MARGIN = 4
 
@@ -157,6 +161,10 @@ export function PlayerInspectorListItem({
                     <ItemConsoleLog item={item} {...itemProps} />
                 ) : item.type === SessionRecordingPlayerTab.EVENTS ? (
                     <ItemEvent item={item} {...itemProps} />
+                ) : item.type === 'offline-status' ? (
+                    <div className="flex items-start p-2 text-xs">
+                        {item.offline ? 'Browser went offline' : 'Browser returned online'}
+                    </div>
                 ) : null}
 
                 {isExpanded ? (
diff --git a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts b/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
index 1cf1fc3f23c68..4e50077cc8bb4 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
@@ -1,4 +1,4 @@
-import { eventWithTime } from '@rrweb/types'
+import { customEvent, eventWithTime } from '@rrweb/types'
 import FuseClass from 'fuse.js'
 import { actions, connect, events, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
@@ -69,7 +69,16 @@ export type InspectorListItemPerformance = InspectorListItemBase & {
     data: PerformanceEvent
 }
 
-export type InspectorListItem = InspectorListItemEvent | InspectorListItemConsole | InspectorListItemPerformance
+export type InspectorListOfflineStatusChange = InspectorListItemBase & {
+    type: 'offline-status'
+    offline: boolean
+}
+
+export type InspectorListItem =
+    | InspectorListItemEvent
+    | InspectorListItemConsole
+    | InspectorListItemPerformance
+    | InspectorListOfflineStatusChange
 
 export interface PlayerInspectorLogicProps extends SessionRecordingPlayerLogicProps {
     matchingEventsMatchType?: MatchingEventsMatchType
@@ -191,6 +200,41 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
             },
         ],
 
+        offlineStatusChanges: [
+            (s) => [s.start, s.sessionPlayerData],
+            (start, sessionPlayerData): InspectorListOfflineStatusChange[] => {
+                const logs: InspectorListOfflineStatusChange[] = []
+
+                const startMs = start?.valueOf() ?? 0
+                Object.entries(sessionPlayerData.snapshotsByWindowId).forEach(([windowId, snapshots]) => {
+                    snapshots.forEach((snapshot: eventWithTime) => {
+                        if (
+                            snapshot.type === 5 // RRWeb custom event type
+                        ) {
+                            const customEvent = snapshot as customEvent
+                            const tag = customEvent.data.tag
+
+                            if (['browser offline', 'browser online'].includes(tag)) {
+                                const timestamp = dayjs(snapshot.timestamp)
+                                const timeInRecording = timestamp.valueOf() - startMs
+                                logs.push({
+                                    type: 'offline-status',
+                                    offline: tag === 'browser offline',
+                                    timestamp: timestamp,
+                                    timeInRecording: timeInRecording,
+                                    search: tag,
+                                    windowId: windowId,
+                                    highlightColor: 'warning',
+                                } satisfies InspectorListOfflineStatusChange)
+                            }
+                        }
+                    })
+                })
+
+                return logs
+            },
+        ],
+
         consoleLogs: [
             (s) => [s.sessionPlayerData],
             (sessionPlayerData): RecordingConsoleLogV2[] => {
@@ -253,8 +297,22 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
         ],
 
         allItems: [
-            (s) => [s.start, s.allPerformanceEvents, s.consoleLogs, s.sessionEventsData, s.matchingEventUUIDs],
-            (start, performanceEvents, consoleLogs, eventsData, matchingEventUUIDs): InspectorListItem[] => {
+            (s) => [
+                s.start,
+                s.allPerformanceEvents,
+                s.consoleLogs,
+                s.sessionEventsData,
+                s.matchingEventUUIDs,
+                s.offlineStatusChanges,
+            ],
+            (
+                start,
+                performanceEvents,
+                consoleLogs,
+                eventsData,
+                matchingEventUUIDs,
+                offlineStatusChanges
+            ): InspectorListItem[] => {
                 // NOTE: Possible perf improvement here would be to have a selector to parse the items
                 // and then do the filtering of what items are shown, elsewhere
                 // ALSO: We could move the individual filtering logic into the MiniFilters themselves
@@ -263,6 +321,11 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
 
                 const startMs = start?.valueOf() ?? 0
 
+                // no conversion needed for offlineStatusChanges, they're ready to roll
+                for (const event of offlineStatusChanges || []) {
+                    items.push(event)
+                }
+
                 // PERFORMANCE EVENTS
                 const performanceEventsArr = performanceEvents || []
                 for (const event of performanceEventsArr) {
@@ -372,6 +435,10 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                 for (const item of allItems) {
                     let include = false
 
+                    if (item.type === 'offline-status') {
+                        include = true
+                    }
+
                     // EVENTS
                     if (item.type === SessionRecordingPlayerTab.EVENTS) {
                         if (tab !== SessionRecordingPlayerTab.EVENTS && tab !== SessionRecordingPlayerTab.ALL) {
diff --git a/frontend/src/scenes/settings/project/CorrelationConfig.tsx b/frontend/src/scenes/settings/project/CorrelationConfig.tsx
index fd2af0493a6e1..cbd519c357d4f 100644
--- a/frontend/src/scenes/settings/project/CorrelationConfig.tsx
+++ b/frontend/src/scenes/settings/project/CorrelationConfig.tsx
@@ -1,7 +1,8 @@
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { EventSelect } from 'lib/components/EventSelect/EventSelect'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { IconPlus, IconSelectEvents, IconSelectProperties } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
@@ -48,7 +49,8 @@ export function CorrelationConfig(): JSX.Element {
                             <IconSelectProperties className="text-lg" />
                             Excluded person properties
                         </h3>
-                        <PersonPropertySelect
+                        <PropertySelect
+                            taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
                             onChange={(properties) => handleChange(properties)}
                             selectedProperties={funnelCorrelationConfig.excluded_person_property_names || []}
                             addText="Add exclusion"
diff --git a/frontend/src/scenes/settings/project/PersonDisplayNameProperties.tsx b/frontend/src/scenes/settings/project/PersonDisplayNameProperties.tsx
index 14a070b3e66d9..365fd58b875fe 100644
--- a/frontend/src/scenes/settings/project/PersonDisplayNameProperties.tsx
+++ b/frontend/src/scenes/settings/project/PersonDisplayNameProperties.tsx
@@ -1,6 +1,7 @@
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
+import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { PERSON_DEFAULT_DISPLAY_NAME_PROPERTIES } from 'lib/constants'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { useEffect, useState } from 'react'
@@ -27,7 +28,8 @@ export function PersonDisplayNameProperties(): JSX.Element {
                 property to be found on the Person will be used. Drag the items to re-order the priority.
             </p>
             <div className="space-y-4">
-                <PersonPropertySelect
+                <PropertySelect
+                    taxonomicFilterGroup={TaxonomicFilterGroupType.PersonProperties}
                     onChange={(properties) => setValue(properties)}
                     selectedProperties={value || []}
                     addText="Add"
diff --git a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
index 08935f72f1cad..b04a7de59d952 100644
--- a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
+++ b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
@@ -26,7 +26,6 @@ import { sessionPlayerModalLogic } from 'scenes/session-recordings/player/modal/
 import { teamLogic } from 'scenes/teamLogic'
 
 import { Noun } from '~/models/groupsModel'
-import { InsightActorsQuery } from '~/queries/schema'
 import {
     ActorType,
     ExporterFormat,
@@ -35,13 +34,11 @@ import {
     SessionRecordingType,
 } from '~/types'
 
-import { personsModalLogic } from './personsModalLogic'
+import { PersonModalLogicProps, personsModalLogic } from './personsModalLogic'
 import { SaveCohortModal } from './SaveCohortModal'
 
-export interface PersonsModalProps extends Pick<LemonModalProps, 'inline'> {
+export interface PersonsModalProps extends PersonModalLogicProps, Pick<LemonModalProps, 'inline'> {
     onAfterClose?: () => void
-    query?: InsightActorsQuery | null
-    url?: string | null
     urlsIndex?: number
     urls?: {
         label: string | JSX.Element
@@ -58,6 +55,7 @@ export function PersonsModal({
     title,
     onAfterClose,
     inline,
+    additionalFields,
 }: PersonsModalProps): JSX.Element {
     const [selectedUrlIndex, setSelectedUrlIndex] = useState(urlsIndex || 0)
     const originalUrl = (urls || [])[selectedUrlIndex]?.value || _url || ''
@@ -65,10 +63,11 @@ export function PersonsModal({
     const logic = personsModalLogic({
         url: originalUrl,
         query: _query,
+        additionalFields,
     })
 
     const {
-        query: query,
+        query,
         actors,
         actorsResponseLoading,
         actorsResponse,
@@ -80,7 +79,7 @@ export function PersonsModal({
         missingActorsCount,
         propertiesTimelineFilterFromUrl,
         exploreUrl,
-        ActorsQuery,
+        actorsQuery,
     } = useValues(logic)
     const { updateActorsQuery, setSearchTerm, saveAsCohort, setIsCohortModalOpen, closeModal, loadNextActors } =
         useActions(logic)
@@ -227,7 +226,7 @@ export function PersonsModal({
                                     void triggerExport({
                                         export_format: ExporterFormat.CSV,
                                         export_context: query
-                                            ? { source: ActorsQuery as Record<string, any> }
+                                            ? { source: actorsQuery as Record<string, any> }
                                             : { path: originalUrl },
                                     })
                                 }}
diff --git a/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts b/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
index 314863f85ecde..49c8e66ab7adf 100644
--- a/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
+++ b/frontend/src/scenes/trends/persons-modal/personsModalLogic.ts
@@ -23,6 +23,7 @@ import {
     ActorType,
     BreakdownType,
     ChartDisplayType,
+    CommonActorType,
     IntervalType,
     PersonActorType,
     PropertiesTimelineFilterType,
@@ -35,6 +36,7 @@ const RESULTS_PER_PAGE = 100
 export interface PersonModalLogicProps {
     query?: InsightActorsQuery | null
     url?: string | null
+    additionalFields?: Partial<Record<keyof CommonActorType, string>>
 }
 
 export interface ListActorsResponse {
@@ -61,16 +63,19 @@ export const personsModalLogic = kea<personsModalLogicType>([
             query,
             clear,
             offset,
+            additionalFields,
         }: {
             url?: string | null
             query?: InsightActorsQuery | null
             clear?: boolean
             offset?: number
+            additionalFields?: PersonModalLogicProps['additionalFields']
         }) => ({
             url,
             query,
             clear,
             offset,
+            additionalFields,
         }),
         loadNextActors: true,
         updateActorsQuery: (query: Partial<InsightActorsQuery>) => ({ query }),
@@ -85,7 +90,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
         actorsResponse: [
             null as ListActorsResponse | null,
             {
-                loadActors: async ({ url, query, clear, offset }, breakpoint) => {
+                loadActors: async ({ url, query, clear, offset, additionalFields }, breakpoint) => {
                     if (url) {
                         url += '&include_recordings=true'
 
@@ -102,28 +107,41 @@ export const personsModalLogic = kea<personsModalLogicType>([
                         return res
                     } else if (query) {
                         const response = await performQuery({
-                            ...values.ActorsQuery,
+                            ...values.actorsQuery,
                             limit: RESULTS_PER_PAGE + 1,
                             offset: offset || 0,
                         } as ActorsQuery)
                         breakpoint()
+
+                        const assembledSelectFields = values.selectFields
+                        const additionalFieldIndices = Object.values(additionalFields || {}).map((field) =>
+                            assembledSelectFields.indexOf(field)
+                        )
                         const newResponse: ListActorsResponse = {
                             results: [
                                 {
                                     count: response.results.length,
-                                    people: response.results.slice(0, RESULTS_PER_PAGE).map(
-                                        (result): PersonActorType => ({
-                                            type: 'person',
-                                            id: result[0].id,
-                                            uuid: result[0].id,
-                                            distinct_ids: result[0].distinct_ids,
-                                            is_identified: result[0].is_identified,
-                                            properties: result[0].properties,
-                                            created_at: result[0].created_at,
-                                            matched_recordings: [],
-                                            value_at_data_point: null,
-                                        })
-                                    ),
+                                    people: response.results
+                                        .slice(0, RESULTS_PER_PAGE)
+                                        .map((result): PersonActorType => {
+                                            const person: PersonActorType = {
+                                                type: 'person',
+                                                id: result[0].id,
+                                                uuid: result[0].id,
+                                                distinct_ids: result[0].distinct_ids,
+                                                is_identified: result[0].is_identified,
+                                                properties: result[0].properties,
+                                                created_at: result[0].created_at,
+                                                matched_recordings: [],
+                                                value_at_data_point: null,
+                                            }
+
+                                            Object.keys(additionalFields || {}).forEach((field, index) => {
+                                                person[field] = result[additionalFieldIndices[index]]
+                                            })
+
+                                            return person
+                                        }),
                                 },
                             ],
                         }
@@ -213,8 +231,8 @@ export const personsModalLogic = kea<personsModalLogicType>([
                 is_static: true,
                 name: cohortName,
             }
-            if (values.ActorsQuery) {
-                const cohort = await api.create('api/cohort', { ...cohortParams, query: values.ActorsQuery })
+            if (values.actorsQuery) {
+                const cohort = await api.create('api/cohort', { ...cohortParams, query: values.actorsQuery })
                 cohortsModel.actions.cohortCreated(cohort)
                 lemonToast.success('Cohort saved', {
                     toastId: `cohort-saved-${cohort.id}`,
@@ -299,28 +317,35 @@ export const personsModalLogic = kea<personsModalLogicType>([
                 return cleanFilters(filter)
             },
         ],
-        ActorsQuery: [
-            (s) => [s.query, s.searchTerm],
-            (query, searchTerm): ActorsQuery | null => {
+        selectFields: [
+            () => [(_, p) => p.additionalFields],
+            (additionalFields: PersonModalLogicProps['additionalFields']): string[] => {
+                const extra = Object.values(additionalFields || {})
+                return ['person', 'created_at', ...extra]
+            },
+        ],
+        actorsQuery: [
+            (s) => [(_, p) => p.query, s.searchTerm, s.selectFields],
+            (query, searchTerm, selectFields): ActorsQuery | null => {
                 if (!query) {
                     return null
                 }
                 return {
                     kind: NodeKind.ActorsQuery,
                     source: query,
-                    select: ['person', 'created_at'],
+                    select: selectFields,
                     orderBy: ['created_at DESC'],
                     search: searchTerm,
                 }
             },
         ],
         exploreUrl: [
-            (s) => [s.ActorsQuery],
-            (ActorsQuery): string | null => {
-                if (!ActorsQuery) {
+            (s) => [s.actorsQuery],
+            (actorsQuery): string | null => {
+                if (!actorsQuery) {
                     return null
                 }
-                const { select: _select, ...source } = ActorsQuery
+                const { select: _select, ...source } = actorsQuery
                 const query: DataTableNode = {
                     kind: NodeKind.DataTableNode,
                     source,
@@ -332,7 +357,7 @@ export const personsModalLogic = kea<personsModalLogicType>([
     }),
 
     afterMount(({ actions, props }) => {
-        actions.loadActors({ query: props.query, url: props.url })
+        actions.loadActors({ query: props.query, url: props.url, additionalFields: props.additionalFields })
 
         actions.reportPersonsModalViewed({
             url: props.url,
diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts
index 691dfe4717363..49112e30f70cb 100644
--- a/frontend/src/scenes/urls.ts
+++ b/frontend/src/scenes/urls.ts
@@ -67,10 +67,14 @@ export const urls = {
     batchExportEdit: (id: string): string => `/batch_exports/${id}/edit`,
     ingestionWarnings: (): string => '/data-management/ingestion-warnings',
     insights: (): string => '/insights',
-    insightNew: (filters?: AnyPartialFilterType, dashboardId?: DashboardType['id'] | null, query?: string): string =>
+    insightNew: (
+        filters?: AnyPartialFilterType,
+        dashboardId?: DashboardType['id'] | null,
+        query?: string | Record<string, any>
+    ): string =>
         combineUrl('/insights/new', dashboardId ? { dashboard: dashboardId } : {}, {
             ...(filters ? { filters } : {}),
-            ...(query ? { q: query } : {}),
+            ...(query ? { q: typeof query === 'string' ? query : JSON.stringify(query) } : {}),
         }).url,
     insightNewHogQL: (query: string): string =>
         urls.insightNew(
diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
index 0f516690afc7d..8f7942c0fbb21 100644
--- a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
+++ b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
@@ -15,6 +15,7 @@ import {
     WebAnalyticsPropertyFilters,
     WebStatsBreakdown,
 } from '~/queries/schema'
+import { isWebAnalyticsPropertyFilters } from '~/queries/schema-guards'
 import {
     BaseMathType,
     ChartDisplayType,
@@ -997,8 +998,10 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
             _,
             { filters, date_from, date_to, interval, device_tab, source_tab, graphs_tab, path_tab, geography_tab }
         ) => {
+            const parsedFilters = isWebAnalyticsPropertyFilters(filters) ? filters : initialWebAnalyticsFilter
+
             actions.setStateFromUrl({
-                filters: filters || initialWebAnalyticsFilter,
+                filters: parsedFilters,
                 dateFrom: date_from || null,
                 dateTo: date_to || null,
                 interval: interval || null,
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index f830326306f98..f3d49b5da9388 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -478,6 +478,19 @@ body {
     --tooltip-bg: var(--bg-charcoal);
     --data-color-1-hover: #1d4affe5;
 
+    // Remove below once we're using Tailwind's base
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: var(--bg-light);
+    --tw-ring-color: var(--primary-3000);
+    --tw-ring-inset: ;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+
     touch-action: manipulation; // Disable double-tap-to-zoom on mobile, making taps slightly snappier
 
     &.posthog-3000[theme='light'] {
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 4e03c2ae463fb..89560928dfa39 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,6 +1,5 @@
 import { PluginConfigSchema } from '@posthog/plugin-scaffold'
 import { eventWithTime } from '@rrweb/types'
-import { UploadFile } from 'antd/lib/upload/interface'
 import { ChartDataset, ChartType, InteractionItem } from 'chart.js'
 import { LogicWrapper } from 'kea'
 import { DashboardCompatibleScenes } from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic'
@@ -891,7 +890,7 @@ export interface MatchedRecording {
     events: MatchedRecordingEvent[]
 }
 
-interface CommonActorType {
+export interface CommonActorType {
     id: string | number
     properties: Record<string, any>
     /** @format date-time */
@@ -977,7 +976,7 @@ export interface CohortType {
     last_calculation?: string
     is_static?: boolean
     name?: string
-    csv?: UploadFile
+    csv?: File
     groups: CohortGroupType[] // To be deprecated once `filter` takes over
     filters: {
         properties: CohortCriteriaGroupFilter
@@ -2896,7 +2895,7 @@ interface BreadcrumbBase {
     /** Symbol, e.g. a lettermark or a profile picture. */
     symbol?: React.ReactNode
     /** Whether to show a custom popover */
-    popover?: Pick<PopoverProps, 'overlay' | 'sameWidth' | 'actionable'>
+    popover?: Pick<PopoverProps, 'overlay' | 'sameWidth'>
 }
 interface LinkBreadcrumb extends BreadcrumbBase {
     /** Path to link to. */
@@ -3398,7 +3397,7 @@ export interface DataWarehouseViewLink {
     from_join_key?: string
 }
 
-export type ExternalDataSourceType = 'Stripe' | 'Hubspot'
+export type ExternalDataSourceType = 'Stripe' | 'Hubspot' | 'Postgres'
 
 export interface ExternalDataSourceCreatePayload {
     source_type: ExternalDataSourceType
@@ -3422,6 +3421,11 @@ export interface SimpleExternalDataSourceSchema {
     last_synced_at?: Dayjs
 }
 
+export interface ExternalDataPostgresSchema {
+    table: string
+    should_sync: boolean
+}
+
 export interface ExternalDataSourceSchema extends SimpleExternalDataSourceSchema {
     table?: SimpleDataWarehouseTable
 }
@@ -3512,6 +3516,9 @@ export type BatchExportDestinationRedshift = {
     }
 }
 
+// When adding a new option here also add a icon for it to
+// src/scenes/pipeline/icons/
+// and update RenderBatchExportIcon
 export type BatchExportDestination =
     | BatchExportDestinationS3
     | BatchExportDestinationSnowflake
diff --git a/latest_migrations.manifest b/latest_migrations.manifest
index 81538fe8c3352..b60532a5c5307 100644
--- a/latest_migrations.manifest
+++ b/latest_migrations.manifest
@@ -5,7 +5,7 @@ contenttypes: 0002_remove_content_type_name
 ee: 0015_add_verified_properties
 otp_static: 0002_throttling
 otp_totp: 0002_auto_20190420_0723
-posthog: 0386_add_session_replay_config_to_team
+posthog: 0387_alter_externaldatasource_source_type
 sessions: 0001_initial
 social_django: 0010_uid_db_index
 two_factor: 0007_auto_20201201_1019
diff --git a/package.json b/package.json
index 1b50182275788..668c38e4e0afb 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
         "pmtiles": "^2.11.0",
         "postcss": "^8.4.31",
         "postcss-preset-env": "^9.3.0",
-        "posthog-js": "1.101.0",
+        "posthog-js": "1.103.0",
         "posthog-js-lite": "2.5.0",
         "prettier": "^2.8.8",
         "prop-types": "^15.7.2",
@@ -319,6 +319,10 @@
             "eslint -c .eslintrc.js --fix",
             "prettier --write"
         ],
+        "ee/frontend/**/*.{js,jsx,mjs,ts,tsx}": [
+            "eslint -c .eslintrc.js --fix",
+            "prettier --write"
+        ],
         "plugin-server/**/*.{js,jsx,mjs,ts,tsx}": [
             "pnpm --dir plugin-server exec eslint --fix",
             "pnpm --dir plugin-server exec prettier --write"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5bab6c632e9aa..0d513fba26527 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -245,8 +245,8 @@ dependencies:
     specifier: ^9.3.0
     version: 9.3.0(postcss@8.4.31)
   posthog-js:
-    specifier: 1.101.0
-    version: 1.101.0
+    specifier: 1.103.0
+    version: 1.103.0
   posthog-js-lite:
     specifier: 2.5.0
     version: 2.5.0
@@ -17238,8 +17238,8 @@ packages:
     resolution: {integrity: sha512-Urvlp0Vu9h3td0BVFWt0QXFJDoOZcaAD83XM9d91NKMKTVPZtfU0ysoxstIf5mw/ce9ZfuMgpWPaagrZI4rmSg==}
     dev: false
 
-  /posthog-js@1.101.0:
-    resolution: {integrity: sha512-mzwYSSWr9FdEMDeVpc+diLfc85+10r/LgELGtsW/HaYk+0du/GEql6szpqG8YXMMgb2dE4dnj0JICZFIJd7K3w==}
+  /posthog-js@1.103.0:
+    resolution: {integrity: sha512-NldabkbCB9a/2JLszoB7vk5XZr93iBoGEgEEKn201oDD3QkRn1nC+c+e1HQ3S9oMs5oZIhKmPNBCje1J9prYRg==}
     dependencies:
       fflate: 0.4.8
       preact: 10.19.3
diff --git a/posthog/api/mixins.py b/posthog/api/mixins.py
index a23a2424b30bf..69b83d3469e01 100644
--- a/posthog/api/mixins.py
+++ b/posthog/api/mixins.py
@@ -3,6 +3,7 @@
 from pydantic import BaseModel, ValidationError
 
 from rest_framework.exceptions import ParseError
+from sentry_sdk import capture_exception
 
 T = TypeVar("T", bound=BaseModel)
 
@@ -12,4 +13,5 @@ def get_model(self, data: dict, model: Type[T]) -> T:
         try:
             return model.model_validate(data)
         except ValidationError as exc:
+            capture_exception(exc)
             raise ParseError("JSON parse error - %s" % str(exc))
diff --git a/posthog/hogql/database/test/test_database.py b/posthog/hogql/database/test/test_database.py
index c0817ee2c9861..fae4a5c88928e 100644
--- a/posthog/hogql/database/test/test_database.py
+++ b/posthog/hogql/database/test/test_database.py
@@ -39,14 +39,22 @@ def test_can_select_from_each_table_at_all(self, poe_enabled: bool) -> None:
             serialized_database = serialize_database(create_hogql_database(team_id=self.team.pk))
             for table, possible_columns in serialized_database.items():
                 if table == "numbers":
-                    execute_hogql_query("SELECT number FROM numbers(10) LIMIT 100", self.team)
+                    execute_hogql_query(
+                        "SELECT number FROM numbers(10) LIMIT 100",
+                        self.team,
+                        pretty=False,
+                    )
                 else:
                     columns = [
                         x["key"]
                         for x in possible_columns
                         if "table" not in x and "chain" not in x and "fields" not in x
                     ]
-                    execute_hogql_query(f"SELECT {','.join(columns)} FROM {table}", team=self.team)
+                    execute_hogql_query(
+                        f"SELECT {','.join(columns)} FROM {table}",
+                        team=self.team,
+                        pretty=False,
+                    )
 
     @patch("posthog.hogql.query.sync_execute", return_value=(None, None))
     @pytest.mark.usefixtures("unittest_snapshot")
@@ -66,6 +74,7 @@ def test_database_with_warehouse_tables(self, patch_execute):
         response = execute_hogql_query(
             "select * from whatever",
             team=self.team,
+            pretty=False,
         )
 
         self.assertEqual(
diff --git a/posthog/hogql/functions/test/test_cohort.py b/posthog/hogql/functions/test/test_cohort.py
index 1c5460bc9176d..427cf0db342cd 100644
--- a/posthog/hogql/functions/test/test_cohort.py
+++ b/posthog/hogql/functions/test/test_cohort.py
@@ -49,6 +49,7 @@ def test_in_cohort_dynamic(self):
             f"SELECT event FROM events WHERE person_id IN COHORT {cohort.pk} AND event='{random_uuid}'",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia="subquery"),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
         self.assertEqual(len(response.results), 1)
@@ -65,6 +66,7 @@ def test_in_cohort_static(self):
             f"SELECT event FROM events WHERE person_id IN COHORT {cohort.pk}",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia="subquery"),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
 
@@ -80,6 +82,7 @@ def test_in_cohort_strings(self):
             f"SELECT event FROM events WHERE person_id IN COHORT 'my cohort'",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia="subquery"),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
 
diff --git a/posthog/hogql/functions/test/test_sparkline.py b/posthog/hogql/functions/test/test_sparkline.py
index 2a5c24d90b1af..74a00392e9c8d 100644
--- a/posthog/hogql/functions/test/test_sparkline.py
+++ b/posthog/hogql/functions/test/test_sparkline.py
@@ -5,7 +5,7 @@
 
 class TestSparkline(BaseTest):
     def test_sparkline(self):
-        response = execute_hogql_query("select sparkline([1,2,3])", self.team)
+        response = execute_hogql_query("select sparkline([1,2,3])", self.team, pretty=False)
         self.assertEqual(
             response.clickhouse,
             f"SELECT tuple(%(hogql_val_0)s, %(hogql_val_1)s, %(hogql_val_2)s, [1, 2, 3]) LIMIT 100 SETTINGS readonly=2, max_execution_time=60, allow_experimental_object_type=1",
diff --git a/posthog/hogql/printer.py b/posthog/hogql/printer.py
index 650d53b366026..74341e76b6839 100644
--- a/posthog/hogql/printer.py
+++ b/posthog/hogql/printer.py
@@ -304,7 +304,7 @@ def visit_select_query(self, node: ast.SelectQuery):
 
         clauses = [
             f"SELECT{space}{'DISTINCT ' if node.distinct else ''}{comma.join(columns)}",
-            f"FROM{space}{' '.join(joined_tables)}" if len(joined_tables) > 0 else None,
+            f"FROM{space}{space.join(joined_tables)}" if len(joined_tables) > 0 else None,
             array_join if array_join else None,
             f"PREWHERE{space}" + prewhere if prewhere else None,
             f"WHERE{space}" + where if where else None,
diff --git a/posthog/hogql/property.py b/posthog/hogql/property.py
index ce4ea3bdfe14f..cd57b43d8f70d 100644
--- a/posthog/hogql/property.py
+++ b/posthog/hogql/property.py
@@ -151,6 +151,7 @@ def property_to_expr(
                             type=property.type,
                             key=property.key,
                             operator=property.operator,
+                            group_type_index=property.group_type_index,
                             value=v,
                         ),
                         team,
@@ -263,6 +264,7 @@ def property_to_expr(
                             type=property.type,
                             key=property.key,
                             operator=property.operator,
+                            group_type_index=property.group_type_index,
                             value=v,
                         ),
                         team,
diff --git a/posthog/hogql/query.py b/posthog/hogql/query.py
index 34706606f3753..42ba19eaa9618 100644
--- a/posthog/hogql/query.py
+++ b/posthog/hogql/query.py
@@ -37,6 +37,7 @@ def execute_hogql_query(
     limit_context: Optional[LimitContext] = LimitContext.QUERY,
     timings: Optional[HogQLTimings] = None,
     explain: Optional[bool] = False,
+    pretty: Optional[bool] = True,
 ) -> HogQLQueryResponse:
     if timings is None:
         timings = HogQLTimings()
@@ -95,7 +96,9 @@ def execute_hogql_query(
             )
 
         with timings.measure("print_ast"):
-            hogql = print_prepared_ast(select_query_hogql, hogql_query_context, "hogql")
+            hogql = print_prepared_ast(
+                select_query_hogql, hogql_query_context, "hogql", pretty=pretty if pretty is not None else True
+            )
             print_columns = []
             columns_query = (
                 select_query_hogql.select_queries[0]
@@ -133,6 +136,7 @@ def execute_hogql_query(
             context=clickhouse_context,
             dialect="clickhouse",
             settings=settings,
+            pretty=pretty if pretty is not None else True,
         )
 
     timings_dict = timings.to_dict()
diff --git a/posthog/hogql/test/__snapshots__/test_printer.ambr b/posthog/hogql/test/__snapshots__/test_printer.ambr
index ee6947efb744f..cf8678d33ca0d 100644
--- a/posthog/hogql/test/__snapshots__/test_printer.ambr
+++ b/posthog/hogql/test/__snapshots__/test_printer.ambr
@@ -19,7 +19,8 @@
               (SELECT
                   minus(dateTrunc('day', assumeNotNull(toDateTime('2023-10-19 23:59:59'))), toIntervalDay(number)) AS start_of_period
               FROM
-                  numbers(dateDiff('day', dateTrunc('day', assumeNotNull(toDateTime('2023-09-19 00:00:00'))), dateTrunc('day', plus(assumeNotNull(toDateTime('2023-10-19 23:59:59')), toIntervalDay(1))))) AS numbers) AS periods CROSS JOIN (SELECT
+                  numbers(dateDiff('day', dateTrunc('day', assumeNotNull(toDateTime('2023-09-19 00:00:00'))), dateTrunc('day', plus(assumeNotNull(toDateTime('2023-10-19 23:59:59')), toIntervalDay(1))))) AS numbers) AS periods
+              CROSS JOIN (SELECT
                   status
               FROM
                   (SELECT
diff --git a/posthog/hogql/test/test_modifiers.py b/posthog/hogql/test/test_modifiers.py
index fc31cfe99eea8..eba1f5195ab3d 100644
--- a/posthog/hogql/test/test_modifiers.py
+++ b/posthog/hogql/test/test_modifiers.py
@@ -81,6 +81,7 @@ def test_modifiers_persons_on_events_mode_mapping(self):
                 query,
                 team=self.team,
                 modifiers=HogQLQueryModifiers(personsOnEventsMode=mode),
+                pretty=False,
             )
             assert f"SELECT {', '.join(expected)} FROM" in response.clickhouse, f"PoE mode: {mode}"
 
@@ -158,6 +159,7 @@ def test_modifiers_materialization_mode(self):
             "SELECT properties.$browser FROM events",
             team=self.team,
             modifiers=HogQLQueryModifiers(materializationMode=MaterializationMode.auto),
+            pretty=False,
         )
         assert (
             "SELECT nullIf(nullIf(events.`mat_$browser`, ''), 'null') AS `$browser` FROM events" in response.clickhouse
@@ -167,6 +169,7 @@ def test_modifiers_materialization_mode(self):
             "SELECT properties.$browser FROM events",
             team=self.team,
             modifiers=HogQLQueryModifiers(materializationMode=MaterializationMode.legacy_null_as_null),
+            pretty=False,
         )
         assert (
             "SELECT nullIf(nullIf(events.`mat_$browser`, ''), 'null') AS `$browser` FROM events" in response.clickhouse
@@ -176,6 +179,7 @@ def test_modifiers_materialization_mode(self):
             "SELECT properties.$browser FROM events",
             team=self.team,
             modifiers=HogQLQueryModifiers(materializationMode=MaterializationMode.legacy_null_as_string),
+            pretty=False,
         )
         assert "SELECT nullIf(events.`mat_$browser`, '') AS `$browser` FROM events" in response.clickhouse
 
@@ -183,6 +187,7 @@ def test_modifiers_materialization_mode(self):
             "SELECT properties.$browser FROM events",
             team=self.team,
             modifiers=HogQLQueryModifiers(materializationMode=MaterializationMode.disabled),
+            pretty=False,
         )
         assert (
             "SELECT replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(events.properties, %(hogql_val_0)s), ''), 'null'), '^\"|\"$', '') AS `$browser` FROM events"
diff --git a/posthog/hogql/test/test_property.py b/posthog/hogql/test/test_property.py
index 52e57d9c61c76..9e82e06dc5a2a 100644
--- a/posthog/hogql/test/test_property.py
+++ b/posthog/hogql/test/test_property.py
@@ -82,12 +82,16 @@ def test_property_to_expr_group(self):
                 {"type": "group", "group_type_index": 0, "key": "a", "value": "b", "operator": "is_not_set"}
             ),
         )
+        self.assertEqual(
+            self._property_to_expr(Property(type="group", group_type_index=0, key="a", value=["b", "c"])),
+            self._parse_expr("group_0.properties.a = 'b' OR group_0.properties.a = 'c'"),
+        )
 
         with self.assertRaises(Exception) as e:
             self._property_to_expr({"type": "group", "key": "a", "value": "b"})
         self.assertEqual(
             str(e.exception),
-            "Missing required key group_type_index for property type group",
+            "Missing required attr group_type_index for property type group with key a",
         )
 
     def test_property_to_expr_event(self):
diff --git a/posthog/hogql/test/test_query.py b/posthog/hogql/test/test_query.py
index 3c1969d3198cb..ef81e32ae1836 100644
--- a/posthog/hogql/test/test_query.py
+++ b/posthog/hogql/test/test_query.py
@@ -64,6 +64,7 @@ def test_query(self):
                 "select count(), event from events where properties.random_uuid = {random_uuid} group by event",
                 placeholders={"random_uuid": ast.Constant(value=random_uuid)},
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results, [(2, "random event")])
@@ -77,6 +78,7 @@ def test_subquery(self):
                 "select count, event from (select count() as count, event from events where properties.random_uuid = {random_uuid} group by event) group by count, event",
                 placeholders={"random_uuid": ast.Constant(value=random_uuid)},
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results, [(2, "random event")])
@@ -90,6 +92,7 @@ def test_subquery_alias(self):
                 "select count, event from (select count(*) as count, event from events where properties.random_uuid = {random_uuid} group by event) as c group by count, event",
                 placeholders={"random_uuid": ast.Constant(value=random_uuid)},
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results, [(2, "random event")])
@@ -103,6 +106,7 @@ def test_query_distinct(self):
                 "select distinct properties.sneaky_mail from persons where properties.random_uuid = {random_uuid}",
                 placeholders={"random_uuid": ast.Constant(value=random_uuid)},
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results, [("tim@posthog.com",)])
@@ -114,6 +118,7 @@ def test_query_person_distinct_ids(self):
             response = execute_hogql_query(
                 f"select distinct person_id, distinct_id from person_distinct_ids",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertTrue(len(response.results) > 0)
@@ -125,6 +130,7 @@ def test_query_timings(self):
                 "select count(), event from events where properties.random_uuid = {random_uuid} group by event",
                 placeholders={"random_uuid": ast.Constant(value=random_uuid)},
                 team=self.team,
+                pretty=False,
             )
             self.assertTrue(isinstance(response.timings, list) and len(response.timings) > 0)
             self.assertTrue(isinstance(response.timings[0], QueryTiming))
@@ -145,6 +151,7 @@ def test_query_joins_simple(self):
                 ON p.id = pdi.person_id
                 """,
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -169,6 +176,7 @@ def test_query_joins_pdi(self):
                     ON e.distinct_id = pdi.distinct_id
                     """,
                 self.team,
+                pretty=False,
             )
 
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
@@ -182,6 +190,7 @@ def test_query_joins_events_pdi(self):
             response = execute_hogql_query(
                 "SELECT event, timestamp, pdi.distinct_id, pdi.person_id FROM events LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -196,6 +205,7 @@ def test_query_joins_events_e_pdi(self):
             response = execute_hogql_query(
                 "SELECT event, e.timestamp, e.pdi.distinct_id, pdi.person_id FROM events e LIMIT 10",
                 self.team,
+                pretty=False,
             )
             self.assertEqual(
                 response.hogql,
@@ -214,6 +224,7 @@ def test_query_joins_pdi_persons(self):
             response = execute_hogql_query(
                 "SELECT pdi.distinct_id, pdi.person.created_at FROM person_distinct_ids pdi LIMIT 10",
                 self.team,
+                pretty=False,
             )
             self.assertEqual(
                 response.hogql,
@@ -234,6 +245,7 @@ def test_query_joins_pdi_person_properties(self):
             response = execute_hogql_query(
                 "SELECT pdi.distinct_id, pdi.person.properties.sneaky_mail FROM person_distinct_ids pdi LIMIT 10",
                 self.team,
+                pretty=False,
             )
             self.assertEqual(
                 response.hogql,
@@ -251,6 +263,7 @@ def test_query_joins_events_pdi_person(self):
             response = execute_hogql_query(
                 "SELECT event, timestamp, pdi.distinct_id, pdi.person.id FROM events LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -266,6 +279,7 @@ def test_query_joins_events_pdi_person_properties(self):
             response = execute_hogql_query(
                 "SELECT event, timestamp, pdi.distinct_id, pdi.person.properties.sneaky_mail FROM events LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -280,6 +294,7 @@ def test_query_joins_events_pdi_e_person_properties(self):
             response = execute_hogql_query(
                 "SELECT event, e.timestamp, pdi.distinct_id, e.pdi.person.properties.sneaky_mail FROM events e LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -294,6 +309,7 @@ def test_query_joins_events_person_properties(self):
             response = execute_hogql_query(
                 "SELECT event, e.timestamp, e.pdi.person.properties.sneaky_mail FROM events e LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -306,6 +322,7 @@ def test_query_joins_events_person_properties_in_aggregration(self):
             response = execute_hogql_query(
                 "SELECT s.pdi.person.properties.sneaky_mail, count() FROM events s GROUP BY s.pdi.person.properties.sneaky_mail LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "tim@posthog.com")
@@ -317,6 +334,7 @@ def test_select_person_on_events(self):
             response = execute_hogql_query(
                 "SELECT poe.properties.sneaky_mail, count() FROM events s GROUP BY poe.properties.sneaky_mail LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "tim@posthog.com")
@@ -330,6 +348,7 @@ def test_query_select_person_with_joins_without_poe(self):
             response = execute_hogql_query(
                 "SELECT event, timestamp, person.id, person.properties.sneaky_mail FROM events LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -345,6 +364,7 @@ def test_query_select_person_with_poe_without_joins(self):
             response = execute_hogql_query(
                 "SELECT event, timestamp, person.id, person.properties.sneaky_mail FROM events LIMIT 10",
                 self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             self.assertEqual(response.results[0][0], "random event")
@@ -403,6 +423,7 @@ def test_prop_cohort_basic(self):
                             self.team,
                         )
                     },
+                    pretty=False,
                 )
                 assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
                 self.assertEqual(response.results, [("$pageview", 2)])
@@ -417,6 +438,7 @@ def test_prop_cohort_basic(self):
                             self.team,
                         )
                     },
+                    pretty=False,
                 )
                 assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
                 self.assertEqual(response.results, [("$pageview", 2)])
@@ -460,6 +482,7 @@ def test_prop_cohort_static(self):
                             self.team,
                         )
                     },
+                    pretty=False,
                 )
                 self.assertEqual(response.results, [("$pageview", 1)])
                 assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
@@ -474,6 +497,7 @@ def test_prop_cohort_static(self):
                             self.team,
                         )
                     },
+                    pretty=False,
                 )
                 assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
                 self.assertEqual(response.results, [("$pageview", 1)])
@@ -508,6 +532,7 @@ def test_join_with_property_materialized_session_id(self):
             response = execute_hogql_query(
                 "select e.event, s.session_id from events e left join session_replay_events s on s.session_id = e.properties.$session_id where e.properties.$session_id is not null limit 10",
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             assert pretty_print_in_tests(response.hogql, self.team.pk) == self.snapshot
@@ -516,6 +541,7 @@ def test_join_with_property_materialized_session_id(self):
             response = execute_hogql_query(
                 "select e.event, s.session_id from session_replay_events s left join events e on e.properties.$session_id = s.session_id where e.properties.$session_id is not null limit 10",
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             assert pretty_print_in_tests(response.hogql, self.team.pk) == self.snapshot
@@ -551,6 +577,7 @@ def test_join_with_property_not_materialized(self):
             response = execute_hogql_query(
                 "select e.event, s.session_id from events e left join session_replay_events s on s.session_id = e.properties.$$$session_id where e.properties.$$$session_id is not null limit 10",
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             assert pretty_print_in_tests(response.hogql, self.team.pk) == self.snapshot
@@ -559,6 +586,7 @@ def test_join_with_property_not_materialized(self):
             response = execute_hogql_query(
                 "select e.event, s.session_id from session_replay_events s left join events e on e.properties.$$$session_id = s.session_id where e.properties.$$$session_id is not null limit 10",
                 team=self.team,
+                pretty=False,
             )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             assert pretty_print_in_tests(response.hogql, self.team.pk) == self.snapshot
@@ -570,6 +598,7 @@ def test_hogql_lambdas(self):
             response = execute_hogql_query(
                 "SELECT arrayMap(x -> x * 2, [1, 2, 3]), 1",
                 team=self.team,
+                pretty=False,
             )
             self.assertEqual(response.results, [([2, 4, 6], 1)])
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
@@ -580,6 +609,7 @@ def test_hogql_arrays(self):
             response = execute_hogql_query(
                 "SELECT [1, 2, 3], [10,11,12][1]",
                 team=self.team,
+                pretty=False,
             )
             # Following SQL tradition, ClickHouse array indexes start at 1, not from zero.
             self.assertEqual(response.results, [([1, 2, 3], 10)])
@@ -607,6 +637,7 @@ def test_tuple_access(self):
             response = execute_hogql_query(
                 query,
                 team=self.team,
+                pretty=False,
             )
             self.assertEqual(
                 response.results,
@@ -871,6 +902,7 @@ def test_with_pivot_table_1_level(self):
             response = execute_hogql_query(
                 query,
                 team=self.team,
+                pretty=False,
             )
             self.assertEqual(
                 response.results,
@@ -910,6 +942,7 @@ def test_with_pivot_table_2_levels(self):
             response = execute_hogql_query(
                 query,
                 team=self.team,
+                pretty=False,
             )
             self.assertEqual(
                 response.results,
@@ -955,7 +988,11 @@ def test_property_access_with_arrays(self):
             ]
             columns = ",".join(alternatives)
             query = f"SELECT {columns} FROM events WHERE properties.string = '{random_uuid}'"
-            response = execute_hogql_query(query, team=self.team)
+            response = execute_hogql_query(
+                query,
+                team=self.team,
+                pretty=False,
+            )
             self.assertEqual(
                 response.clickhouse,
                 f"SELECT "
@@ -1143,6 +1180,7 @@ def test_regex_functions(self):
         response = execute_hogql_query(
             query,
             team=self.team,
+            pretty=False,
         )
 
         self.assertEqual(
@@ -1332,13 +1370,25 @@ def test_hogql_query_filters(self):
                 properties=[EventPropertyFilter(key="index", operator="exact", value="4", type="event")]
             )
             placeholders = {"distinct_id": ast.Constant(value=random_uuid)}
-            response = execute_hogql_query(query, team=self.team, filters=filters, placeholders=placeholders)
+            response = execute_hogql_query(
+                query,
+                team=self.team,
+                filters=filters,
+                placeholders=placeholders,
+                pretty=False,
+            )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             assert pretty_print_in_tests(response.hogql, self.team.pk) == self.snapshot
             self.assertEqual(len(response.results), 1)
 
             filters.dateRange = DateRange(date_from="2020-01-01", date_to="2020-01-02")
-            response = execute_hogql_query(query, team=self.team, filters=filters, placeholders=placeholders)
+            response = execute_hogql_query(
+                query,
+                team=self.team,
+                filters=filters,
+                placeholders=placeholders,
+                pretty=False,
+            )
             assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot
             assert pretty_print_in_tests(response.hogql, self.team.pk) == self.snapshot
             self.assertEqual(len(response.results), 0)
@@ -1349,7 +1399,11 @@ def test_hogql_query_filters(self):
 
     def test_hogql_query_filters_empty_true(self):
         query = "SELECT event from events where {filters}"
-        response = execute_hogql_query(query, team=self.team)
+        response = execute_hogql_query(
+            query,
+            team=self.team,
+            pretty=False,
+        )
         self.assertEqual(response.hogql, "SELECT event FROM events WHERE true LIMIT 100")
 
     def test_hogql_query_filters_double_error(self):
@@ -1380,7 +1434,12 @@ def test_hogql_query_filters_alias(self):
                     )
                 ]
             )
-            response = execute_hogql_query(query, team=self.team, filters=filters)
+            response = execute_hogql_query(
+                query,
+                team=self.team,
+                filters=filters,
+                pretty=False,
+            )
             self.assertEqual(
                 response.hogql,
                 f"SELECT event, distinct_id FROM events AS e WHERE equals(properties.random_uuid, '{random_uuid}') LIMIT 100",
@@ -1391,7 +1450,11 @@ def test_hogql_query_filters_alias(self):
     @pytest.mark.usefixtures("unittest_snapshot")
     def test_hogql_union_all_limits(self):
         query = "SELECT event FROM events UNION ALL SELECT event FROM events"
-        response = execute_hogql_query(query, team=self.team)
+        response = execute_hogql_query(
+            query,
+            team=self.team,
+            pretty=False,
+        )
         self.assertEqual(
             response.hogql,
             f"SELECT event FROM events LIMIT 100 UNION ALL SELECT event FROM events LIMIT 100",
diff --git a/posthog/hogql/transforms/test/test_in_cohort.py b/posthog/hogql/transforms/test/test_in_cohort.py
index 2fe6b6cc16c13..25e847d70cbc1 100644
--- a/posthog/hogql/transforms/test/test_in_cohort.py
+++ b/posthog/hogql/transforms/test/test_in_cohort.py
@@ -49,6 +49,7 @@ def test_in_cohort_dynamic(self):
             f"SELECT event FROM events WHERE person_id IN COHORT {cohort.pk} AND event='{random_uuid}'",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot  # type: ignore
         self.assertEqual(len(response.results or []), 1)
@@ -65,6 +66,7 @@ def test_in_cohort_static(self):
             f"SELECT event FROM events WHERE person_id IN COHORT {cohort.pk}",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot  # type: ignore
 
@@ -80,6 +82,7 @@ def test_in_cohort_strings(self):
             f"SELECT event FROM events WHERE person_id IN COHORT 'my cohort'",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot  # type: ignore
 
@@ -91,6 +94,7 @@ def test_in_cohort_error(self):
                 f"SELECT event FROM events WHERE person_id IN COHORT true",
                 self.team,
                 modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.subquery),
+                pretty=False,
             )
         self.assertEqual(str(e.exception), "cohort() takes exactly one string or integer argument")
 
@@ -99,6 +103,7 @@ def test_in_cohort_error(self):
                 f"SELECT event FROM events WHERE person_id IN COHORT 'blabla'",
                 self.team,
                 modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.subquery),
+                pretty=False,
             )
         self.assertEqual(str(e.exception), "Could not find a cohort with the name 'blabla'")
 
@@ -114,6 +119,7 @@ def test_in_cohort_conjoined_string(self):
             f"SELECT event FROM events WHERE person_id IN COHORT 'my cohort'",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin_conjoined),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot  # type: ignore
 
@@ -128,6 +134,7 @@ def test_in_cohort_conjoined_int(self):
             f"SELECT event FROM events WHERE person_id IN COHORT {cohort.pk}",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin_conjoined),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot  # type: ignore
 
@@ -144,6 +151,7 @@ def test_in_cohort_conjoined_dynamic(self):
             f"SELECT event FROM events WHERE person_id IN COHORT {cohort.pk} AND event='{random_uuid}'",
             self.team,
             modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin_conjoined),
+            pretty=False,
         )
         assert pretty_print_response_in_tests(response, self.team.pk) == self.snapshot  # type: ignore
         self.assertEqual(len(response.results or []), 1)
@@ -157,6 +165,7 @@ def test_in_cohort_conjoined_error(self):
                 f"SELECT event FROM events WHERE person_id IN COHORT true",
                 self.team,
                 modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin_conjoined),
+                pretty=False,
             )
         self.assertEqual(str(e.exception), "cohort() takes exactly one string or integer argument")
 
@@ -165,5 +174,6 @@ def test_in_cohort_conjoined_error(self):
                 f"SELECT event FROM events WHERE person_id IN COHORT 'blabla'",
                 self.team,
                 modifiers=HogQLQueryModifiers(inCohortVia=InCohortVia.leftjoin_conjoined),
+                pretty=False,
             )
         self.assertEqual(str(e.exception), "Could not find a cohort with the name 'blabla'")
diff --git a/posthog/hogql_queries/insights/paths_query_runner.py b/posthog/hogql_queries/insights/paths_query_runner.py
index 154649a8a6b29..3932d315908e9 100644
--- a/posthog/hogql_queries/insights/paths_query_runner.py
+++ b/posthog/hogql_queries/insights/paths_query_runner.py
@@ -504,23 +504,23 @@ def to_actors_query(self) -> ast.SelectQuery | ast.SelectUnionQuery:
         if self.query.pathsFilter.pathDropoffKey:
             conditions.append(
                 parse_expr(
-                    "path_dropoff_key = {path_dropoff_key} AND path_dropoff_key = path_key",
-                    {"path_dropoff_key": ast.Constant(value=self.query.pathsFilter.pathDropoffKey)},
+                    "path_dropoff_key = {key} AND path_dropoff_key = path_key",
+                    {"key": ast.Constant(value=self.query.pathsFilter.pathDropoffKey)},
                 )
             )
         else:
             if self.query.pathsFilter.pathStartKey:
                 conditions.append(
                     parse_expr(
-                        "last_path_key = {path_start_key}",
-                        {"path_start_key": ast.Constant(value=self.query.pathsFilter.pathStartKey)},
+                        "last_path_key = {key}",
+                        {"key": ast.Constant(value=self.query.pathsFilter.pathStartKey)},
                     )
                 )
             if self.query.pathsFilter.pathEndKey:
                 conditions.append(
                     parse_expr(
-                        "path_key = {path_end_key}",
-                        {"path_end_key": ast.Constant(value=self.query.pathsFilter.pathEndKey)},
+                        "path_key = {key}",
+                        {"key": ast.Constant(value=self.query.pathsFilter.pathEndKey)},
                     )
                 )
             else:
@@ -531,10 +531,12 @@ def to_actors_query(self) -> ast.SelectQuery | ast.SelectUnionQuery:
 
         actors_query = parse_select(
             """
-                SELECT DISTINCT
-                    person_id as actor_id
+                SELECT
+                    person_id as actor_id,
+                    COUNT(*) as event_count
                 FROM {paths_per_person_query}
                 WHERE {conditions}
+                GROUP BY person_id
                 ORDER BY actor_id
             """,
             placeholders={
diff --git a/posthog/migrations/0387_alter_externaldatasource_source_type.py b/posthog/migrations/0387_alter_externaldatasource_source_type.py
new file mode 100644
index 0000000000000..649710d87a6cf
--- /dev/null
+++ b/posthog/migrations/0387_alter_externaldatasource_source_type.py
@@ -0,0 +1,19 @@
+# Generated by Django 3.2.19 on 2024-01-16 19:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("posthog", "0386_add_session_replay_config_to_team"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="externaldatasource",
+            name="source_type",
+            field=models.CharField(
+                choices=[("Stripe", "Stripe"), ("Hubspot", "Hubspot"), ("Postgres", "Postgres")], max_length=128
+            ),
+        ),
+    ]
diff --git a/posthog/models/property/property.py b/posthog/models/property/property.py
index 31e8425c205d9..0db92dcf7fc17 100644
--- a/posthog/models/property/property.py
+++ b/posthog/models/property/property.py
@@ -253,14 +253,14 @@ def __init__(
         if self.type not in VALIDATE_PROP_TYPES.keys():
             raise ValueError(f"Invalid property type: {self.type}")
 
-        for key in VALIDATE_PROP_TYPES[self.type]:
-            if getattr(self, key, None) is None:
-                raise ValueError(f"Missing required key {key} for property type {self.type}")
+        for attr in VALIDATE_PROP_TYPES[self.type]:
+            if getattr(self, attr, None) is None:
+                raise ValueError(f"Missing required attr {attr} for property type {self.type} with key {self.key}")
 
         if self.type == "behavioral":
-            for key in VALIDATE_BEHAVIORAL_PROP_TYPES[cast(BehavioralPropertyType, self.value)]:
-                if getattr(self, key, None) is None:
-                    raise ValueError(f"Missing required key {key} for property type {self.type}::{self.value}")
+            for attr in VALIDATE_BEHAVIORAL_PROP_TYPES[cast(BehavioralPropertyType, self.value)]:
+                if getattr(self, attr, None) is None:
+                    raise ValueError(f"Missing required attr {attr} for property type {self.type}::{self.value}")
 
     def __repr__(self):
         params_repr = ", ".join(f"{key}={repr(value)}" for key, value in self.to_dict().items())
diff --git a/posthog/tasks/warehouse.py b/posthog/tasks/warehouse.py
index 10a56ed424ad4..46040b58a96a9 100644
--- a/posthog/tasks/warehouse.py
+++ b/posthog/tasks/warehouse.py
@@ -55,7 +55,7 @@ def check_synced_row_limits_of_team(team_id: int) -> None:
             job.pipeline.status = ExternalDataSource.Status.PAUSED
             job.pipeline.save()
     else:
-        all_sources = ExternalDataSource.objects.filter(team_id=team_id)
+        all_sources = ExternalDataSource.objects.filter(team_id=team_id, status=ExternalDataSource.Status.PAUSED)
         for source in all_sources:
             try:
                 unpause_external_data_schedule(source)
diff --git a/posthog/temporal/data_imports/external_data_job.py b/posthog/temporal/data_imports/external_data_job.py
index 0f380f0a542b4..b9a12ade6b236 100644
--- a/posthog/temporal/data_imports/external_data_job.py
+++ b/posthog/temporal/data_imports/external_data_job.py
@@ -24,9 +24,11 @@
     sync_old_schemas_with_new_schemas,
     ExternalDataSource,
 )
+from posthog.warehouse.models.external_data_schema import get_postgres_schemas
 from posthog.temporal.common.logger import bind_temporal_worker_logger
 from typing import Tuple
 import asyncio
+from django.conf import settings
 
 
 @dataclasses.dataclass
@@ -49,9 +51,21 @@ async def create_external_data_job_model(inputs: CreateExternalDataJobInputs) ->
     source.status = "Running"
     await sync_to_async(source.save)()  # type: ignore
 
-    # Sync schemas if they have changed
+    if source.source_type == ExternalDataSource.Type.POSTGRES:
+        host = source.job_inputs.get("host")
+        port = source.job_inputs.get("port")
+        user = source.job_inputs.get("user")
+        password = source.job_inputs.get("password")
+        database = source.job_inputs.get("database")
+        schema = source.job_inputs.get("schema")
+        schemas_to_sync = await sync_to_async(get_postgres_schemas)(  # type: ignore
+            host, port, database, user, password, schema
+        )
+    else:
+        schemas_to_sync = list(PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[source.source_type])
+
     await sync_to_async(sync_old_schemas_with_new_schemas)(  # type: ignore
-        list(PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[source.source_type]),  # type: ignore
+        schemas_to_sync,
         source_id=inputs.external_data_source_id,
         team_id=inputs.team_id,
     )
@@ -175,6 +189,27 @@ async def run_external_data_job(inputs: ExternalDataJobInputs) -> None:
             team_id=inputs.team_id,
             endpoints=tuple(inputs.schemas),
         )
+    elif model.pipeline.source_type == ExternalDataSource.Type.POSTGRES:
+        from posthog.temporal.data_imports.pipelines.postgres import postgres_source
+
+        host = model.pipeline.job_inputs.get("host")
+        port = model.pipeline.job_inputs.get("port")
+        user = model.pipeline.job_inputs.get("user")
+        password = model.pipeline.job_inputs.get("password")
+        database = model.pipeline.job_inputs.get("database")
+        schema = model.pipeline.job_inputs.get("schema")
+
+        source = postgres_source(
+            host=host,
+            port=port,
+            user=user,
+            password=password,
+            database=database,
+            sslmode="prefer" if settings.TEST or settings.DEBUG else "require",
+            schema=schema,
+            table_names=inputs.schemas,
+        )
+
     else:
         raise ValueError(f"Source type {model.pipeline.source_type} not supported")
 
diff --git a/posthog/temporal/data_imports/pipelines/postgres/__init__.py b/posthog/temporal/data_imports/pipelines/postgres/__init__.py
new file mode 100644
index 0000000000000..438b25fbe9dac
--- /dev/null
+++ b/posthog/temporal/data_imports/pipelines/postgres/__init__.py
@@ -0,0 +1,72 @@
+"""Source that loads tables form any SQLAlchemy supported database, supports batching requests and incremental loads."""
+
+from typing import List, Optional, Union, Iterable, Any
+from sqlalchemy import MetaData, Table, text
+from sqlalchemy.engine import Engine
+
+import dlt
+from dlt.sources import DltResource, DltSource
+
+
+from dlt.sources.credentials import ConnectionStringCredentials
+
+from .helpers import (
+    table_rows,
+    engine_from_credentials,
+    get_primary_key,
+    SqlDatabaseTableConfiguration,
+    SqlTableResourceConfiguration,
+)
+
+
+def postgres_source(
+    host: str, port: int, user: str, password: str, database: str, sslmode: str, schema: str, table_names: list[str]
+) -> DltSource:
+    credentials = ConnectionStringCredentials(
+        f"postgresql://{user}:{password}@{host}:{port}/{database}?sslmode={sslmode}"
+    )
+    db_source = sql_database(credentials, schema=schema, table_names=table_names)
+
+    return db_source
+
+
+@dlt.source
+def sql_database(
+    credentials: Union[ConnectionStringCredentials, Engine, str] = dlt.secrets.value,
+    schema: Optional[str] = dlt.config.value,
+    metadata: Optional[MetaData] = None,
+    table_names: Optional[List[str]] = dlt.config.value,
+) -> Iterable[DltResource]:
+    """
+    A DLT source which loads data from an SQL database using SQLAlchemy.
+    Resources are automatically created for each table in the schema or from the given list of tables.
+
+    Args:
+        credentials (Union[ConnectionStringCredentials, Engine, str]): Database credentials or an `sqlalchemy.Engine` instance.
+        schema (Optional[str]): Name of the database schema to load (if different from default).
+        metadata (Optional[MetaData]): Optional `sqlalchemy.MetaData` instance. `schema` argument is ignored when this is used.
+        table_names (Optional[List[str]]): A list of table names to load. By default, all tables in the schema are loaded.
+
+    Returns:
+        Iterable[DltResource]: A list of DLT resources for each table to be loaded.
+    """
+
+    # set up alchemy engine
+    engine = engine_from_credentials(credentials)
+    engine.execution_options(stream_results=True)
+    metadata = metadata or MetaData(schema=schema)
+
+    # use provided tables or all tables
+    if table_names:
+        tables = [Table(name, metadata, autoload_with=engine) for name in table_names]
+    else:
+        metadata.reflect(bind=engine)
+        tables = list(metadata.tables.values())
+
+    for table in tables:
+        yield dlt.resource(
+            table_rows,
+            name=table.name,
+            primary_key=get_primary_key(table),
+            spec=SqlDatabaseTableConfiguration,
+        )(engine, table)
diff --git a/posthog/temporal/data_imports/pipelines/postgres/helpers.py b/posthog/temporal/data_imports/pipelines/postgres/helpers.py
new file mode 100644
index 0000000000000..7d45a6df7e302
--- /dev/null
+++ b/posthog/temporal/data_imports/pipelines/postgres/helpers.py
@@ -0,0 +1,124 @@
+"""SQL database source helpers"""
+
+from typing import (
+    Any,
+    List,
+    Optional,
+    Iterator,
+    Union,
+)
+import operator
+
+import dlt
+from dlt.sources.credentials import ConnectionStringCredentials
+from dlt.common.configuration.specs import BaseConfiguration, configspec
+from dlt.common.typing import TDataItem
+from .settings import DEFAULT_CHUNK_SIZE
+
+from sqlalchemy import Table, create_engine, Column
+from sqlalchemy.engine import Engine
+from sqlalchemy.sql import Select
+
+
+class TableLoader:
+    def __init__(
+        self,
+        engine: Engine,
+        table: Table,
+        chunk_size: int = 1000,
+        incremental: Optional[dlt.sources.incremental[Any]] = None,
+    ) -> None:
+        self.engine = engine
+        self.table = table
+        self.chunk_size = chunk_size
+        self.incremental = incremental
+        if incremental:
+            try:
+                self.cursor_column: Optional[Column[Any]] = table.c[incremental.cursor_path]
+            except KeyError as e:
+                raise KeyError(
+                    f"Cursor column '{incremental.cursor_path}' does not exist in table '{table.name}'"
+                ) from e
+            self.last_value = incremental.last_value
+        else:
+            self.cursor_column = None
+            self.last_value = None
+
+    def make_query(self) -> Select[Any]:
+        table = self.table
+        query = table.select()
+        if not self.incremental:
+            return query
+        last_value_func = self.incremental.last_value_func
+        if last_value_func is max:  # Query ordered and filtered according to last_value function
+            order_by = self.cursor_column.asc()  # type: ignore
+            filter_op = operator.ge
+        elif last_value_func is min:
+            order_by = self.cursor_column.desc()  # type: ignore
+            filter_op = operator.le
+        else:  # Custom last_value, load everything and let incremental handle filtering
+            return query
+        query = query.order_by(order_by)
+        if self.last_value is None:
+            return query
+        return query.where(filter_op(self.cursor_column, self.last_value))  # type: ignore
+
+    def load_rows(self) -> Iterator[List[TDataItem]]:
+        query = self.make_query()
+        with self.engine.connect() as conn:
+            result = conn.execution_options(yield_per=self.chunk_size).execute(query)
+            for partition in result.partitions(size=self.chunk_size):
+                yield [dict(row._mapping) for row in partition]
+
+
+def table_rows(
+    engine: Engine,
+    table: Table,
+    chunk_size: int = DEFAULT_CHUNK_SIZE,
+    incremental: Optional[dlt.sources.incremental[Any]] = None,
+) -> Iterator[TDataItem]:
+    """
+    A DLT source which loads data from an SQL database using SQLAlchemy.
+    Resources are automatically created for each table in the schema or from the given list of tables.
+
+    Args:
+        credentials (Union[ConnectionStringCredentials, Engine, str]): Database credentials or an `sqlalchemy.Engine` instance.
+        schema (Optional[str]): Name of the database schema to load (if different from default).
+        metadata (Optional[MetaData]): Optional `sqlalchemy.MetaData` instance. `schema` argument is ignored when this is used.
+        table_names (Optional[List[str]]): A list of table names to load. By default, all tables in the schema are loaded.
+
+    Returns:
+        Iterable[DltResource]: A list of DLT resources for each table to be loaded.
+    """
+    loader = TableLoader(engine, table, incremental=incremental, chunk_size=chunk_size)
+    yield from loader.load_rows()
+
+    engine.dispose()
+
+
+def engine_from_credentials(credentials: Union[ConnectionStringCredentials, Engine, str]) -> Engine:
+    if isinstance(credentials, Engine):
+        return credentials
+    if isinstance(credentials, ConnectionStringCredentials):
+        credentials = credentials.to_native_representation()
+    return create_engine(credentials)
+
+
+def get_primary_key(table: Table) -> List[str]:
+    return [c.name for c in table.primary_key]
+
+
+@configspec
+class SqlDatabaseTableConfiguration(BaseConfiguration):
+    incremental: Optional[dlt.sources.incremental] = None
+
+
+@configspec
+class SqlTableResourceConfiguration(BaseConfiguration):
+    credentials: ConnectionStringCredentials
+    table: str
+    incremental: Optional[dlt.sources.incremental] = None
+    schema: Optional[str]
+
+
+__source_name__ = "sql_database"
diff --git a/posthog/temporal/data_imports/pipelines/postgres/settings.py b/posthog/temporal/data_imports/pipelines/postgres/settings.py
new file mode 100644
index 0000000000000..f1aa2d4b26401
--- /dev/null
+++ b/posthog/temporal/data_imports/pipelines/postgres/settings.py
@@ -0,0 +1,3 @@
+"""Sql Database source settings and constants"""
+
+DEFAULT_CHUNK_SIZE = 1000
diff --git a/posthog/temporal/data_imports/pipelines/schemas.py b/posthog/temporal/data_imports/pipelines/schemas.py
index eaaa431d7aef9..371f8087b7966 100644
--- a/posthog/temporal/data_imports/pipelines/schemas.py
+++ b/posthog/temporal/data_imports/pipelines/schemas.py
@@ -5,4 +5,5 @@
 PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING = {
     ExternalDataSource.Type.STRIPE: STRIPE_ENDPOINTS,
     ExternalDataSource.Type.HUBSPOT: HUBSPOT_ENDPOINTS,
+    ExternalDataSource.Type.POSTGRES: (),
 }
diff --git a/posthog/temporal/tests/external_data/conftest.py b/posthog/temporal/tests/external_data/conftest.py
new file mode 100644
index 0000000000000..1d2fbcf47b8f0
--- /dev/null
+++ b/posthog/temporal/tests/external_data/conftest.py
@@ -0,0 +1,71 @@
+import psycopg
+import pytest_asyncio
+from psycopg import sql
+
+
+@pytest_asyncio.fixture
+async def setup_postgres_test_db(postgres_config):
+    """Fixture to manage a database for Redshift export testing.
+
+    Managing a test database involves the following steps:
+    1. Creating a test database.
+    2. Initializing a connection to that database.
+    3. Creating a test schema.
+    4. Yielding the connection to be used in tests.
+    5. After tests, drop the test schema and any tables in it.
+    6. Drop the test database.
+    """
+    connection = await psycopg.AsyncConnection.connect(
+        user=postgres_config["user"],
+        password=postgres_config["password"],
+        host=postgres_config["host"],
+        port=postgres_config["port"],
+    )
+    await connection.set_autocommit(True)
+
+    async with connection.cursor() as cursor:
+        await cursor.execute(
+            sql.SQL("SELECT 1 FROM pg_database WHERE datname = %s"),
+            (postgres_config["database"],),
+        )
+
+        if await cursor.fetchone() is None:
+            await cursor.execute(sql.SQL("CREATE DATABASE {}").format(sql.Identifier(postgres_config["database"])))
+
+    await connection.close()
+
+    # We need a new connection to connect to the database we just created.
+    connection = await psycopg.AsyncConnection.connect(
+        user=postgres_config["user"],
+        password=postgres_config["password"],
+        host=postgres_config["host"],
+        port=postgres_config["port"],
+        dbname=postgres_config["database"],
+    )
+    await connection.set_autocommit(True)
+
+    async with connection.cursor() as cursor:
+        await cursor.execute(
+            sql.SQL("CREATE SCHEMA IF NOT EXISTS {}").format(sql.Identifier(postgres_config["schema"]))
+        )
+
+    yield
+
+    async with connection.cursor() as cursor:
+        await cursor.execute(sql.SQL("DROP SCHEMA {} CASCADE").format(sql.Identifier(postgres_config["schema"])))
+
+    await connection.close()
+
+    # We need a new connection to drop the database, as we cannot drop the current database.
+    connection = await psycopg.AsyncConnection.connect(
+        user=postgres_config["user"],
+        password=postgres_config["password"],
+        host=postgres_config["host"],
+        port=postgres_config["port"],
+    )
+    await connection.set_autocommit(True)
+
+    async with connection.cursor() as cursor:
+        await cursor.execute(sql.SQL("DROP DATABASE {}").format(sql.Identifier(postgres_config["database"])))
+
+    await connection.close()
diff --git a/posthog/temporal/tests/test_external_data_job.py b/posthog/temporal/tests/external_data/test_external_data_job.py
similarity index 81%
rename from posthog/temporal/tests/test_external_data_job.py
rename to posthog/temporal/tests/external_data/test_external_data_job.py
index 1af196f368831..a4574502ff9d4 100644
--- a/posthog/temporal/tests/test_external_data_job.py
+++ b/posthog/temporal/tests/external_data/test_external_data_job.py
@@ -41,6 +41,7 @@
 import functools
 from django.conf import settings
 import asyncio
+import psycopg
 
 BUCKET_NAME = "test-external-data-jobs"
 SESSION = aioboto3.Session()
@@ -89,6 +90,33 @@ async def minio_client(bucket_name):
         await minio_client.delete_bucket(Bucket=bucket_name)
 
 
+@pytest.fixture
+def postgres_config():
+    return {
+        "user": settings.PG_USER,
+        "password": settings.PG_PASSWORD,
+        "database": "external_data_database",
+        "schema": "external_data_schema",
+        "host": settings.PG_HOST,
+        "port": int(settings.PG_PORT),
+    }
+
+
+@pytest_asyncio.fixture
+async def postgres_connection(postgres_config, setup_postgres_test_db):
+    connection = await psycopg.AsyncConnection.connect(
+        user=postgres_config["user"],
+        password=postgres_config["password"],
+        dbname=postgres_config["database"],
+        host=postgres_config["host"],
+        port=postgres_config["port"],
+    )
+
+    yield connection
+
+    await connection.close()
+
+
 @pytest.mark.django_db(transaction=True)
 @pytest.mark.asyncio
 async def test_create_external_job_activity(activity_environment, team, **kwargs):
@@ -110,15 +138,14 @@ async def test_create_external_job_activity(activity_environment, team, **kwargs
 
     runs = ExternalDataJob.objects.filter(id=run_id)
     assert await sync_to_async(runs.exists)()  # type:ignore
-    assert len(schemas) == len(PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[new_source.source_type])
+    assert len(schemas) == 0
+    count = await sync_to_async(ExternalDataSchema.objects.filter(source_id=new_source.pk).count)()  # type:ignore
+    assert count == len(PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[new_source.source_type])
 
 
 @pytest.mark.django_db(transaction=True)
 @pytest.mark.asyncio
 async def test_create_external_job_activity_schemas_exist(activity_environment, team, **kwargs):
-    """
-    Test that the create external job activity creates a new job
-    """
     new_source = await sync_to_async(ExternalDataSource.objects.create)(
         source_id=uuid.uuid4(),
         connection_id=uuid.uuid4(),
@@ -147,8 +174,10 @@ async def test_create_external_job_activity_schemas_exist(activity_environment,
 
     runs = ExternalDataJob.objects.filter(id=run_id)
     assert await sync_to_async(runs.exists)()  # type:ignore
-    # one less schema because one of the schemas is turned off
-    assert len(schemas) == len(PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[new_source.source_type]) - 1
+    assert len(schemas) == 1
+    # doesn't overlap
+    count = await sync_to_async(ExternalDataSchema.objects.filter(source_id=new_source.pk).count)()  # type:ignore
+    assert count == len(PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[new_source.source_type])
 
 
 @pytest.mark.django_db(transaction=True)
@@ -444,6 +473,14 @@ async def test_external_data_job_workflow_with_schema(team, **kwargs):
         external_data_source_id=new_source.pk,
     )
 
+    schemas = PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[new_source.source_type]
+    for schema in schemas:
+        await sync_to_async(ExternalDataSchema.objects.create)(  # type: ignore
+            name=schema,
+            team_id=team.id,
+            source_id=new_source.pk,
+        )
+
     async def mock_async_func(inputs):
         pass
 
@@ -480,3 +517,70 @@ async def mock_async_func(inputs):
     assert await sync_to_async(DataWarehouseTable.objects.filter(external_data_source_id=new_source.pk).count)() == len(  # type: ignore
         PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[new_source.source_type]
     )
+
+
+@pytest.mark.django_db(transaction=True)
+@pytest.mark.asyncio
+async def test_run_postgres_job(
+    activity_environment, team, minio_client, postgres_connection, postgres_config, **kwargs
+):
+    await postgres_connection.execute(
+        "CREATE TABLE IF NOT EXISTS {schema}.posthog_test (id integer)".format(schema=postgres_config["schema"])
+    )
+    await postgres_connection.execute(
+        "INSERT INTO {schema}.posthog_test (id) VALUES (1)".format(schema=postgres_config["schema"])
+    )
+    await postgres_connection.commit()
+
+    async def setup_job_1():
+        new_source = await sync_to_async(ExternalDataSource.objects.create)(
+            source_id=uuid.uuid4(),
+            connection_id=uuid.uuid4(),
+            destination_id=uuid.uuid4(),
+            team=team,
+            status="running",
+            source_type="Postgres",
+            job_inputs={
+                "host": postgres_config["host"],
+                "port": postgres_config["port"],
+                "database": postgres_config["database"],
+                "user": postgres_config["user"],
+                "password": postgres_config["password"],
+                "schema": postgres_config["schema"],
+            },
+        )  # type: ignore
+
+        new_job: ExternalDataJob = await sync_to_async(ExternalDataJob.objects.create)(  # type: ignore
+            team_id=team.id,
+            pipeline_id=new_source.pk,
+            status=ExternalDataJob.Status.RUNNING,
+            rows_synced=0,
+        )
+
+        new_job = await sync_to_async(ExternalDataJob.objects.filter(id=new_job.id).prefetch_related("pipeline").get)()  # type: ignore
+
+        schemas = ["posthog_test"]
+        inputs = ExternalDataJobInputs(
+            team_id=team.id,
+            run_id=new_job.pk,
+            source_id=new_source.pk,
+            schemas=schemas,
+        )
+
+        return new_job, inputs
+
+    job_1, job_1_inputs = await setup_job_1()
+
+    with override_settings(
+        BUCKET_URL=f"s3://{BUCKET_NAME}",
+        AIRBYTE_BUCKET_KEY=settings.OBJECT_STORAGE_ACCESS_KEY_ID,
+        AIRBYTE_BUCKET_SECRET=settings.OBJECT_STORAGE_SECRET_ACCESS_KEY,
+    ):
+        await asyncio.gather(
+            activity_environment.run(run_external_data_job, job_1_inputs),
+        )
+
+        job_1_team_objects = await minio_client.list_objects_v2(
+            Bucket=BUCKET_NAME, Prefix=f"{job_1.folder_path}/posthog_test/"
+        )
+        assert len(job_1_team_objects["Contents"]) == 1
diff --git a/posthog/utils.py b/posthog/utils.py
index 894e90aff09c7..b8c8d8b9e52f7 100644
--- a/posthog/utils.py
+++ b/posthog/utils.py
@@ -291,9 +291,9 @@ def render_template(
     if sentry_environment := os.environ.get("SENTRY_ENVIRONMENT"):
         context["sentry_environment"] = sentry_environment
 
+    context["git_rev"] = get_git_commit()  # Include commit in prod for the `console.info()` message
     if settings.DEBUG and not settings.TEST:
         context["debug"] = True
-        context["git_rev"] = get_git_commit()
         context["git_branch"] = get_git_branch()
 
     if settings.E2E_TESTING:
diff --git a/posthog/warehouse/api/external_data_source.py b/posthog/warehouse/api/external_data_source.py
index 843821e2f2749..6078e9d8cd6da 100644
--- a/posthog/warehouse/api/external_data_source.py
+++ b/posthog/warehouse/api/external_data_source.py
@@ -28,8 +28,13 @@
 from posthog.temporal.data_imports.pipelines.hubspot.auth import (
     get_access_token_from_code,
 )
+from posthog.warehouse.models.external_data_schema import get_postgres_schemas
+
 import temporalio
 
+from posthog.cloud_utils import is_cloud
+from posthog.utils import get_instance_region
+
 logger = structlog.get_logger(__name__)
 
 
@@ -133,10 +138,23 @@ def create(self, request: Request, *args: Any, **kwargs: Any) -> Response:
             new_source_model = self._handle_stripe_source(request, *args, **kwargs)
         elif source_type == ExternalDataSource.Type.HUBSPOT:
             new_source_model = self._handle_hubspot_source(request, *args, **kwargs)
+        elif source_type == ExternalDataSource.Type.POSTGRES:
+            try:
+                new_source_model, table_names = self._handle_postgres_source(request, *args, **kwargs)
+            except InternalPostgresError:
+                return Response(
+                    status=status.HTTP_400_BAD_REQUEST, data={"message": "Cannot use internal Postgres database"}
+                )
+            except Exception:
+                raise
         else:
             raise NotImplementedError(f"Source type {source_type} not implemented")
 
-        schemas = PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[source_type]
+        if source_type == ExternalDataSource.Type.POSTGRES:
+            schemas = tuple(table_names)
+        else:
+            schemas = PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING[source_type]
+
         for schema in schemas:
             ExternalDataSchema.objects.create(
                 name=schema,
@@ -200,6 +218,43 @@ def _handle_hubspot_source(self, request: Request, *args: Any, **kwargs: Any) ->
 
         return new_source_model
 
+    def _handle_postgres_source(self, request: Request, *args: Any, **kwargs: Any) -> tuple[ExternalDataSource, list]:
+        payload = request.data["payload"]
+        prefix = request.data.get("prefix", None)
+        source_type = request.data["source_type"]
+
+        host = payload.get("host")
+        port = payload.get("port")
+        database = payload.get("dbname")
+
+        user = payload.get("user")
+        password = payload.get("password")
+        schema = payload.get("schema")
+        table_names = payload.get("schemas")
+
+        if not self._validate_postgres_host(host, self.team_id):
+            raise InternalPostgresError()
+
+        new_source_model = ExternalDataSource.objects.create(
+            source_id=str(uuid.uuid4()),
+            connection_id=str(uuid.uuid4()),
+            destination_id=str(uuid.uuid4()),
+            team=self.team,
+            status="Running",
+            source_type=source_type,
+            job_inputs={
+                "host": host,
+                "port": port,
+                "database": database,
+                "user": user,
+                "password": password,
+                "schema": schema,
+            },
+            prefix=prefix,
+        )
+
+        return new_source_model, table_names
+
     def prefix_required(self, source_type: str) -> bool:
         source_type_exists = ExternalDataSource.objects.filter(team_id=self.team.pk, source_type=source_type).exists()
         return source_type_exists
@@ -262,3 +317,45 @@ def reload(self, request: Request, *args: Any, **kwargs: Any):
         instance.status = "Running"
         instance.save()
         return Response(status=status.HTTP_200_OK)
+
+    @action(methods=["GET"], detail=False)
+    def database_schema(self, request: Request, *arg: Any, **kwargs: Any):
+        host = request.query_params.get("host")
+        port = request.query_params.get("port")
+        database = request.query_params.get("dbname")
+
+        user = request.query_params.get("user")
+        password = request.query_params.get("password")
+        schema = request.query_params.get("schema")
+
+        if not host or not port or not database or not user or not password or not schema:
+            return Response(
+                status=status.HTTP_400_BAD_REQUEST,
+                data={"message": "Missing required parameters: host, port, database, user, password, schema"},
+            )
+
+        # Validate internal postgres
+        if not self._validate_postgres_host(host, self.team_id):
+            return Response(
+                status=status.HTTP_400_BAD_REQUEST,
+                data={"message": "Cannot use internal Postgres database"},
+            )
+
+        result = get_postgres_schemas(host, port, database, user, password, schema)
+        result_mapped_to_options = [{"table": row, "should_sync": False} for row in result]
+        return Response(status=status.HTTP_200_OK, data=result_mapped_to_options)
+
+    def _validate_postgres_host(self, host: str, team_id: int) -> bool:
+        if host.startswith("172") or host.startswith("10") or host.startswith("localhost"):
+            if is_cloud():
+                region = get_instance_region()
+                if (region == "US" and team_id == 2) or (region == "EU" and team_id == 1):
+                    return True
+                else:
+                    return False
+
+        return True
+
+
+class InternalPostgresError(Exception):
+    pass
diff --git a/posthog/warehouse/api/test/test_external_data_source.py b/posthog/warehouse/api/test/test_external_data_source.py
index 955c032c0373e..07ce645788d58 100644
--- a/posthog/warehouse/api/test/test_external_data_source.py
+++ b/posthog/warehouse/api/test/test_external_data_source.py
@@ -5,6 +5,11 @@
 from posthog.temporal.data_imports.pipelines.schemas import (
     PIPELINE_TYPE_SCHEMA_DEFAULT_MAPPING,
 )
+from django.test import override_settings
+from django.conf import settings
+from posthog.cloud_utils import TEST_clear_cloud_cache
+from posthog.models import Team
+import psycopg
 
 
 class TestSavedQuery(APIBaseTest):
@@ -135,3 +140,122 @@ def test_reload_external_data_source(self, mock_trigger):
         self.assertEqual(mock_trigger.call_count, 1)
         self.assertEqual(response.status_code, 200)
         self.assertEqual(source.status, "Running")
+
+    def test_database_schema(self):
+        postgres_connection = psycopg.connect(
+            host=settings.PG_HOST,
+            port=settings.PG_PORT,
+            dbname=settings.PG_DATABASE,
+            user=settings.PG_USER,
+            password=settings.PG_PASSWORD,
+        )
+
+        with postgres_connection.cursor() as cursor:
+            cursor.execute(
+                """
+                CREATE TABLE IF NOT EXISTS posthog_test (
+                    id SERIAL PRIMARY KEY,
+                    name VARCHAR(50)
+                );
+                """
+            )
+
+            postgres_connection.commit()
+
+        response = self.client.get(
+            f"/api/projects/{self.team.id}/external_data_sources/database_schema/",
+            data={
+                "host": settings.PG_HOST,
+                "port": int(settings.PG_PORT),
+                "dbname": settings.PG_DATABASE,
+                "user": settings.PG_USER,
+                "password": settings.PG_PASSWORD,
+                "schema": "public",
+            },
+        )
+        results = response.json()
+
+        self.assertEqual(response.status_code, 200)
+
+        table_names = [table["table"] for table in results]
+        self.assertTrue("posthog_test" in table_names)
+
+        with postgres_connection.cursor() as cursor:
+            cursor.execute(
+                """
+                DROP TABLE posthog_test;
+                """
+            )
+            postgres_connection.commit()
+
+        postgres_connection.close()
+
+    @patch("posthog.warehouse.api.external_data_source.get_postgres_schemas")
+    def test_internal_postgres(self, patch_get_postgres_schemas):
+        patch_get_postgres_schemas.return_value = ["table_1"]
+
+        TEST_clear_cloud_cache(True)
+
+        with override_settings(REGION="US"):
+            team_2, _ = Team.objects.get_or_create(id=2, organization=self.team.organization)
+            response = self.client.get(
+                f"/api/projects/{team_2.id}/external_data_sources/database_schema/",
+                data={
+                    "host": "172.16.0.0",
+                    "port": int(settings.PG_PORT),
+                    "dbname": settings.PG_DATABASE,
+                    "user": settings.PG_USER,
+                    "password": settings.PG_PASSWORD,
+                    "schema": "public",
+                },
+            )
+            self.assertEqual(response.status_code, 200)
+            self.assertEqual(response.json(), [{"should_sync": False, "table": "table_1"}])
+
+            new_team = Team.objects.create(name="new_team", organization=self.team.organization)
+
+            response = self.client.get(
+                f"/api/projects/{new_team.id}/external_data_sources/database_schema/",
+                data={
+                    "host": "172.16.0.0",
+                    "port": int(settings.PG_PORT),
+                    "dbname": settings.PG_DATABASE,
+                    "user": settings.PG_USER,
+                    "password": settings.PG_PASSWORD,
+                    "schema": "public",
+                },
+            )
+            self.assertEqual(response.status_code, 400)
+            self.assertEqual(response.json(), {"message": "Cannot use internal Postgres database"})
+
+        with override_settings(REGION="EU"):
+            team_1, _ = Team.objects.get_or_create(id=1, organization=self.team.organization)
+            response = self.client.get(
+                f"/api/projects/{team_1.id}/external_data_sources/database_schema/",
+                data={
+                    "host": "172.16.0.0",
+                    "port": int(settings.PG_PORT),
+                    "dbname": settings.PG_DATABASE,
+                    "user": settings.PG_USER,
+                    "password": settings.PG_PASSWORD,
+                    "schema": "public",
+                },
+            )
+            self.assertEqual(response.status_code, 200)
+            self.assertEqual(response.json(), [{"should_sync": False, "table": "table_1"}])
+
+            new_team = Team.objects.create(name="new_team", organization=self.team.organization)
+
+            response = self.client.get(
+                f"/api/projects/{new_team.id}/external_data_sources/database_schema/",
+                data={
+                    "host": "172.16.0.0",
+                    "port": int(settings.PG_PORT),
+                    "dbname": settings.PG_DATABASE,
+                    "user": settings.PG_USER,
+                    "password": settings.PG_PASSWORD,
+                    "schema": "public",
+                },
+            )
+            self.assertEqual(response.status_code, 400)
+            self.assertEqual(response.json(), {"message": "Cannot use internal Postgres database"})
diff --git a/posthog/warehouse/models/external_data_schema.py b/posthog/warehouse/models/external_data_schema.py
index 29419fbb7acd2..8a4ac00e81416 100644
--- a/posthog/warehouse/models/external_data_schema.py
+++ b/posthog/warehouse/models/external_data_schema.py
@@ -3,6 +3,8 @@
 from posthog.models.team import Team
 from posthog.models.utils import CreatedMetaFields, UUIDModel, sane_repr
 import uuid
+import psycopg
+from django.conf import settings
 
 
 class ExternalDataSchema(CreatedMetaFields, UUIDModel):
@@ -43,4 +45,26 @@ def sync_old_schemas_with_new_schemas(new_schemas: list, source_id: uuid.UUID, t
     schemas_to_create = [schema for schema in new_schemas if schema not in old_schemas]
 
     for schema in schemas_to_create:
-        ExternalDataSchema.objects.create(name=schema, team_id=team_id, source_id=source_id)
+        ExternalDataSchema.objects.create(name=schema, team_id=team_id, source_id=source_id, should_sync=False)
+
+
+def get_postgres_schemas(host: str, port: str, database: str, user: str, password: str, schema: str):
+    connection = psycopg.Connection.connect(
+        host=host,
+        port=int(port),
+        dbname=database,
+        user=user,
+        password=password,
+        sslmode="prefer" if settings.TEST or settings.DEBUG else "require",
+    )
+
+    with connection.cursor() as cursor:
+        cursor.execute(
+            "SELECT table_name FROM information_schema.tables WHERE table_schema = %(schema)s", {"schema": schema}
+        )
+        result = cursor.fetchall()
+        result = [row[0] for row in result]
+
+    connection.close()
+
+    return result
diff --git a/posthog/warehouse/models/external_data_source.py b/posthog/warehouse/models/external_data_source.py
index 5d8f736a77b94..667ba244aca99 100644
--- a/posthog/warehouse/models/external_data_source.py
+++ b/posthog/warehouse/models/external_data_source.py
@@ -9,6 +9,7 @@ class ExternalDataSource(CreatedMetaFields, UUIDModel):
     class Type(models.TextChoices):
         STRIPE = "Stripe", "Stripe"
         HUBSPOT = "Hubspot", "Hubspot"
+        POSTGRES = "Postgres", "Postgres"
 
     class Status(models.TextChoices):
         RUNNING = "Running", "Running"