diff --git a/.eslintrc.js b/.eslintrc.js
index 9d54f523057d0..9d6792f0fd652 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -86,7 +86,7 @@ module.exports = {
             },
         ],
         'react/forbid-dom-props': [
-            1,
+            'warn',
             {
                 forbid: [
                     {
@@ -98,7 +98,7 @@ module.exports = {
             },
         ],
         'posthog/warn-elements': [
-            1,
+            'warn',
             {
                 forbid: [
                     {
@@ -146,7 +146,7 @@ module.exports = {
             },
         ],
         'react/forbid-elements': [
-            2,
+            'error',
             {
                 forbid: [
                     {
@@ -200,9 +200,9 @@ module.exports = {
                 ],
             },
         ],
-        'no-constant-condition': 0,
-        'no-prototype-builtins': 0,
-        'no-irregular-whitespace': 0,
+        'no-constant-condition': 'off',
+        'no-prototype-builtins': 'off',
+        'no-irregular-whitespace': 'off',
     },
     overrides: [
         {
diff --git a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png
index 363659a9b5866..d6139bbdf9627 100644
Binary files a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png and b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png
index 0aead0fac3794..500762ca60561 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png
index 772ae64573f6a..77cc5d1496a9c 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png differ
diff --git a/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts b/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts
new file mode 100644
index 0000000000000..d2136d8d8a682
--- /dev/null
+++ b/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts
@@ -0,0 +1,144 @@
+import { kea, props, key, path, connect, actions, reducers, listeners } from 'kea'
+import { objectsEqual, dateMapping } from 'lib/utils'
+import type { intervalFilterLogicType } from './intervalFilterLogicType'
+import { IntervalKeyType, Intervals, intervals } from 'lib/components/IntervalFilter/intervals'
+import { BaseMathType, InsightLogicProps, IntervalType } from '~/types'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { dayjs } from 'lib/dayjs'
+import { InsightQueryNode, TrendsQuery } from '~/queries/schema'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { BASE_MATH_DEFINITIONS } from 'scenes/trends/mathsLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+
+export const intervalFilterLogic = kea<intervalFilterLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    path((key) => ['lib', 'components', 'IntervalFilter', 'intervalFilterLogic', key]),
+    connect((props: InsightLogicProps) => ({
+        actions: [insightVizDataLogic(props), ['updateQuerySource']],
+        values: [insightVizDataLogic(props), ['interval', 'querySource']],
+    })),
+    actions(() => ({
+        setInterval: (interval: IntervalKeyType) => ({ interval }),
+        setEnabledIntervals: (enabledIntervals: Intervals) => ({ enabledIntervals }),
+    })),
+    reducers(() => ({
+        enabledIntervals: [
+            { ...intervals } as Intervals,
+            {
+                setEnabledIntervals: (_, { enabledIntervals }) => enabledIntervals,
+            },
+        ],
+    })),
+    listeners(({ values, actions, selectors }) => ({
+        setInterval: ({ interval }) => {
+            if (values.interval !== interval) {
+                actions.updateQuerySource({ interval } as Partial<InsightQueryNode>)
+            }
+        },
+        updateQuerySource: ({ querySource }, _, __, previousState) => {
+            const { date_from, date_to } = querySource.dateRange || {}
+            const previousDateRange = selectors.querySource(previousState)?.dateRange || {}
+
+            let activeUsersMath: BaseMathType.WeeklyActiveUsers | BaseMathType.MonthlyActiveUsers | null = null
+
+            // We disallow grouping by certain intervals for weekly active users and monthly active users views
+            // e.g. WAUs grouped by month. Here, look for the first event/action running WAUs/MAUs math and
+            // pass that down to the interval filter to determine what groupings are allowed.
+            for (const series of (values.querySource as TrendsQuery)?.series || []) {
+                if (series.math === BaseMathType.WeeklyActiveUsers) {
+                    activeUsersMath = BaseMathType.WeeklyActiveUsers
+                    break
+                }
+
+                if (series.math === BaseMathType.MonthlyActiveUsers) {
+                    activeUsersMath = BaseMathType.MonthlyActiveUsers
+                    break
+                }
+            }
+
+            const enabledIntervals: Intervals = { ...intervals }
+
+            if (activeUsersMath) {
+                // Disallow grouping by hour for WAUs/MAUs as it's an expensive query that produces a view that's not useful for users
+                enabledIntervals.hour = {
+                    ...enabledIntervals.hour,
+                    disabledReason:
+                        'Grouping by hour is not supported on insights with weekly or monthly active users series.',
+                }
+
+                // Disallow grouping by month for WAUs as the resulting view is misleading to users
+                if (activeUsersMath === BaseMathType.WeeklyActiveUsers) {
+                    enabledIntervals.month = {
+                        ...enabledIntervals.month,
+                        disabledReason:
+                            'Grouping by month is not supported on insights with weekly active users series.',
+                    }
+                }
+            }
+
+            actions.setEnabledIntervals(enabledIntervals)
+
+            // If the user just flipped an event action to use WAUs/MAUs math and their
+            // current interval is unsupported by the math type, switch their interval
+            // to an appropriate allowed interval and inform them of the change via a toast
+            if (
+                activeUsersMath &&
+                (values.querySource as TrendsQuery)?.interval &&
+                enabledIntervals[(values.querySource as TrendsQuery).interval as IntervalType].disabledReason
+            ) {
+                if (values.interval === 'hour') {
+                    lemonToast.info(
+                        `Switched to grouping by day, because "${BASE_MATH_DEFINITIONS[activeUsersMath].name}" does not support grouping by ${values.interval}.`
+                    )
+                    actions.updateQuerySource({ interval: 'day' } as Partial<InsightQueryNode>)
+                } else {
+                    lemonToast.info(
+                        `Switched to grouping by week, because "${BASE_MATH_DEFINITIONS[activeUsersMath].name}" does not support grouping by ${values.interval}.`
+                    )
+                    actions.updateQuerySource({ interval: 'week' } as Partial<InsightQueryNode>)
+                }
+                return
+            }
+
+            if (
+                !date_from ||
+                (objectsEqual(date_from, previousDateRange.date_from) &&
+                    objectsEqual(date_to, previousDateRange.date_to))
+            ) {
+                return
+            }
+
+            // automatically set an interval for fixed date ranges
+            if (
+                date_from &&
+                date_to &&
+                dayjs(querySource.dateRange?.date_from).isValid() &&
+                dayjs(querySource.dateRange?.date_to).isValid()
+            ) {
+                if (dayjs(date_to).diff(dayjs(date_from), 'day') <= 3) {
+                    actions.updateQuerySource({ interval: 'hour' } as Partial<InsightQueryNode>)
+                } else if (dayjs(date_to).diff(dayjs(date_from), 'month') <= 3) {
+                    actions.updateQuerySource({ interval: 'day' } as Partial<InsightQueryNode>)
+                } else {
+                    actions.updateQuerySource({ interval: 'month' } as Partial<InsightQueryNode>)
+                }
+                return
+            }
+            // get a defaultInterval for dateOptions that have a default value
+            let interval: IntervalType = 'day'
+            for (const { key, values, defaultInterval } of dateMapping) {
+                if (
+                    values[0] === date_from &&
+                    values[1] === (date_to || undefined) &&
+                    key !== 'Custom' &&
+                    defaultInterval
+                ) {
+                    interval = defaultInterval
+                    break
+                }
+            }
+            actions.updateQuerySource({ interval } as Partial<InsightQueryNode>)
+        },
+    })),
+])
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
index d981c95aad5a7..d14d233f90f3b 100644
--- a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
+++ b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
@@ -36,6 +36,7 @@ const SortableProperty = ({
             className={clsx(sortable ? 'cursor-move' : 'cursor-auto')}
             {...attributes}
             {...listeners}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 transform: CSS.Translate.toString(transform),
                 transition,
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
index fb925b583c669..484b294b29b47 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
@@ -38,7 +38,6 @@ export function ComparingPropertyFilters(): JSX.Element {
                 propertyFilters={[...propertyFilters]}
                 onChange={() => {}}
                 pageKey={'pageKey'}
-                style={{ marginBottom: 0 }}
                 showNestedArrow
                 eventNames={[]}
             />
@@ -48,7 +47,6 @@ export function ComparingPropertyFilters(): JSX.Element {
                 propertyFilters={[...propertyFilters]}
                 onChange={() => {}}
                 pageKey={'pageKey'}
-                style={{ marginBottom: 0 }}
                 eventNames={[]}
                 disablePopover={true}
             />
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
index 18415dba6c362..dc9506368a0cd 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useValues, BindLogic, useActions } from 'kea'
 import { propertyFilterLogic } from './propertyFilterLogic'
 import { FilterRow } from './components/FilterRow'
@@ -15,7 +15,6 @@ interface PropertyFiltersProps {
     pageKey: string
     showConditionBadge?: boolean
     disablePopover?: boolean
-    style?: CSSProperties
     taxonomicGroupTypes?: TaxonomicFilterGroupType[]
     hogQLTable?: string
     showNestedArrow?: boolean
@@ -39,7 +38,6 @@ export function PropertyFilters({
     disablePopover = false, // use bare PropertyFilter without popover
     taxonomicGroupTypes,
     hogQLTable,
-    style = {},
     showNestedArrow = false,
     eventNames = [],
     orFiltering = false,
@@ -62,7 +60,7 @@ export function PropertyFilters({
     }, [propertyFilters])
 
     return (
-        <div className="PropertyFilters" style={style}>
+        <div className="PropertyFilters">
             {showNestedArrow && !disablePopover && <div className="PropertyFilters__prefix">{<>&#8627;</>}</div>}
             <div className="PropertyFilters__content">
                 <BindLogic logic={propertyFilterLogic} props={logicProps}>
diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
index 838569a81c8ab..817677a1f7f8a 100644
--- a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -126,7 +126,7 @@ export function OperatorValueSelect({
                 />
             </div>
             {!isOperatorFlag(currentOperator || PropertyOperator.Exact) && type && propkey && (
-                <div className="flex-1" style={{ minWidth: '10rem' }} data-attr="taxonomic-value-select">
+                <div className="flex-1 min-w-40" data-attr="taxonomic-value-select">
                     <PropertyValue
                         type={type}
                         key={propkey}
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
index e1cb0816c0533..1db0201362ea1 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
@@ -1,15 +1,9 @@
-import { CSSProperties } from 'react'
 import { AnyPropertyFilter } from '~/types'
 import { PropertyFilterButton } from './PropertyFilterButton'
 
-type Props = {
-    filters: AnyPropertyFilter[]
-    style?: CSSProperties
-}
-
-const PropertyFiltersDisplay: React.FunctionComponent<Props> = ({ filters, style }: Props) => {
+const PropertyFiltersDisplay = ({ filters }: { filters: AnyPropertyFilter[] }): JSX.Element => {
     return (
-        <div className="PropertyFilters mb-4" style={style}>
+        <div className="PropertyFilters flex-wrap">
             {filters &&
                 filters.map((item) => {
                     return <PropertyFilterButton key={item.key} item={item} />
diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
index f0d26edd7c1a4..30d7c835ccf9f 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
+++ b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -113,7 +113,6 @@ export function PropertyGroupFilters({
                                                             ? (group.values as AnyPropertyFilter[])
                                                             : null
                                                     }
-                                                    style={{ marginBottom: 0 }}
                                                     onChange={(properties) => {
                                                         setPropertyFilters(properties, propertyGroupIndex)
                                                     }}
diff --git a/frontend/src/lib/components/SeriesGlyph.tsx b/frontend/src/lib/components/SeriesGlyph.tsx
index a34d6337951e7..156ebcf5f367b 100644
--- a/frontend/src/lib/components/SeriesGlyph.tsx
+++ b/frontend/src/lib/components/SeriesGlyph.tsx
@@ -10,6 +10,7 @@ interface SeriesGlyphProps {
 
 export function SeriesGlyph({ className, style, children, variant }: SeriesGlyphProps): JSX.Element {
     return (
+        // eslint-disable-next-line react/forbid-dom-props
         <div className={`graph-series-glyph ${variant || ''} ${className}`} style={style}>
             {children}
         </div>
diff --git a/frontend/src/lib/components/Table/Table.tsx b/frontend/src/lib/components/Table/Table.tsx
index 6fc3d67005941..bc8a41e524eec 100644
--- a/frontend/src/lib/components/Table/Table.tsx
+++ b/frontend/src/lib/components/Table/Table.tsx
@@ -13,7 +13,7 @@ export function createdAtColumn<T extends Record<string, any> = Record<string, a
         render: function RenderCreatedAt(_, item): JSX.Element | undefined | '' {
             return (
                 item.created_at && (
-                    <div style={{ whiteSpace: 'nowrap' }}>
+                    <div className="whitespace-nowrap">
                         <TZLabel time={item.created_at} />
                     </div>
                 )
@@ -33,6 +33,7 @@ export function createdByColumn<T extends Record<string, any> = Record<string, a
                     {item.created_by && (
                         <ProfilePicture name={item.created_by.first_name} email={item.created_by.email} size="md" />
                     )}
+                    {/* eslint-disable-next-line react/forbid-dom-props */}
                     <div style={{ maxWidth: 250, width: 'auto', verticalAlign: 'middle', marginLeft: 8 }}>
                         {item.created_by ? item.created_by.first_name || item.created_by.email : '-'}
                     </div>
diff --git a/frontend/src/lib/components/Table/utils.tsx b/frontend/src/lib/components/Table/utils.tsx
index 877dbd3ec43b0..8bd296810ae6f 100644
--- a/frontend/src/lib/components/Table/utils.tsx
+++ b/frontend/src/lib/components/Table/utils.tsx
@@ -2,7 +2,7 @@ import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { getBreakpoint } from 'lib/utils/responsiveUtils'
 
 export function normalizeColumnTitle(title: string | JSX.Element): JSX.Element {
-    return <span style={{ whiteSpace: 'nowrap' }}>{title}</span>
+    return <span className="whitespace-nowrap">{title}</span>
 }
 
 // Returns a boolean indicating whether table should be scrolling or not given a specific
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
index 5496ec2b95e6e..777e11cf0c6ff 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
@@ -107,7 +107,7 @@ export function InfiniteSelectResults({
             </div>
             {taxonomicGroupTypes.map((groupType) => {
                 return (
-                    <div key={groupType} style={{ display: groupType === openTab ? 'block' : 'none', marginTop: 8 }}>
+                    <div key={groupType} className={clsx('mt-2', groupType === openTab ? 'block' : 'hidden')}>
                         <BindLogic
                             logic={infiniteListLogic}
                             props={{ ...taxonomicFilterLogicProps, listGroupType: groupType }}
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
index ba37e4da25460..f86c3b9fed7b0 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
@@ -62,7 +62,7 @@ SectionedOptions.args = {
             options: [{ value: 'tomato', label: 'Tomato??', disabled: true }],
             footer: (
                 <div className="bg-side rounded p-2">
-                    <p className="text-muted" style={{ maxWidth: '15rem' }}>
+                    <p className="text-muted max-w-60">
                         I am a custom footer! <br />
                         This might be a good time to tell you about our premium features...
                     </p>
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
index c97db6270d428..4e855d4ba00b7 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import md5 from 'md5'
-import { CSSProperties, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { userLogic } from 'scenes/userLogic'
 import { IconRobot } from '../icons'
 import { Lettermark, LettermarkColor } from '../Lettermark/Lettermark'
@@ -13,7 +13,6 @@ export interface ProfilePictureProps {
     email?: string
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
     showName?: boolean
-    style?: CSSProperties
     className?: string
     title?: string
     index?: number
@@ -25,7 +24,6 @@ export function ProfilePicture({
     email,
     size = 'lg',
     showName,
-    style,
     className,
     index,
     title,
@@ -64,7 +62,6 @@ export function ProfilePicture({
                 src={gravatarUrl}
                 title={title || `This is the Gravatar for ${combinedNameAndEmail}`}
                 alt=""
-                style={style}
             />
         )
     } else {
@@ -72,7 +69,7 @@ export function ProfilePicture({
             type === 'bot' ? (
                 <IconRobot className={clsx(pictureClass, 'p-0.5')} />
             ) : (
-                <span className={pictureClass} style={style}>
+                <span className={pictureClass}>
                     <Lettermark
                         name={combinedNameAndEmail}
                         index={index}
diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
index e0fb582536b20..e841ec72c7323 100644
--- a/frontend/src/lib/taxonomy.tsx
+++ b/frontend/src/lib/taxonomy.tsx
@@ -142,8 +142,8 @@ export const KEY_MAPPING: KeyMappingInterface = {
             description: (
                 <span>
                     This variable will be set to the distinct ID if you've called{' '}
-                    <pre style={{ display: 'inline' }}>posthog.identify('distinct id')</pre>. If the user is anonymous,
-                    it'll be empty.
+                    <pre className="inline">posthog.identify('distinct id')</pre>. If the user is anonymous, it'll be
+                    empty.
                 </span>
             ),
         },
diff --git a/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx b/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
index f3788bc9a87cb..d7dc068310111 100644
--- a/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
+++ b/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
@@ -36,7 +36,6 @@ export function EventPropertyFilters({ query, setQuery }: EventPropertyFiltersPr
                 }
             }}
             pageKey={`EventPropertyFilters.${id}`}
-            style={{ marginBottom: 0, marginTop: 0 }}
             eventNames={eventNames}
         />
     ) : (
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
index a21ea23176bf9..ba0abd3be7b46 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -101,7 +101,6 @@ export function PropertyGroupFilters({
                                                             ? (group.values as AnyPropertyFilter[])
                                                             : null
                                                     }
-                                                    style={{ marginBottom: 0 }}
                                                     onChange={(properties) => {
                                                         setPropertyFilters(properties, propertyGroupIndex)
                                                     }}
diff --git a/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx b/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx
index e99c2c68b7ffd..f8ddaa48b44b1 100644
--- a/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx
+++ b/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx
@@ -33,7 +33,6 @@ export function PersonPropertyFilters({ query, setQuery }: PersonPropertyFilters
                     : [TaxonomicFilterGroupType.PersonProperties]
             }
             hogQLTable="persons"
-            style={{ marginBottom: 0, marginTop: 0 }}
         />
     ) : (
         <div>Error: property groups are not supported.</div>
diff --git a/frontend/src/scenes/ResourcePermissionModal.tsx b/frontend/src/scenes/ResourcePermissionModal.tsx
index de8706a13e266..7e4f9a1ca9a9d 100644
--- a/frontend/src/scenes/ResourcePermissionModal.tsx
+++ b/frontend/src/scenes/ResourcePermissionModal.tsx
@@ -181,12 +181,7 @@ export function ResourcePermission({
                 <>
                     <h5 className="mt-4">Roles</h5>
                     {roles.length > 0 ? (
-                        <div
-                            className="pb-2 rounded overflow-y-auto"
-                            style={{
-                                maxHeight: 300,
-                            }}
-                        >
+                        <div className="pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
                             {roles.map((role) => {
                                 return (
                                     <RoleRow
diff --git a/frontend/src/scenes/batch_exports/BatchExportScene.tsx b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
index b386c14819d6e..148297c77d355 100644
--- a/frontend/src/scenes/batch_exports/BatchExportScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
@@ -272,6 +272,7 @@ function BatchExportLogEntryLevelDisplay(type: BatchExportLogEntryLevel): JSX.El
         default:
             break
     }
+    // eslint-disable-next-line react/forbid-dom-props
     return <span style={{ color }}>{type}</span>
 }
 
diff --git a/frontend/src/scenes/billing/BillingGauge.tsx b/frontend/src/scenes/billing/BillingGauge.tsx
index cce1c0b9663a4..27e41faf153d5 100644
--- a/frontend/src/scenes/billing/BillingGauge.tsx
+++ b/frontend/src/scenes/billing/BillingGauge.tsx
@@ -14,12 +14,8 @@ type BillingGaugeItemProps = {
 
 const BillingGaugeItem = ({ width, className, tooltip, top, value }: BillingGaugeItemProps): JSX.Element => {
     return (
-        <div
-            className={`BillingGaugeItem absolute top-0 left-0 bottom-0 h-2 ${className}`}
-            style={{
-                width: width,
-            }}
-        >
+        // eslint-disable-next-line react/forbid-dom-props
+        <div className={`BillingGaugeItem absolute top-0 left-0 bottom-0 h-2 ${className}`} style={{ width: width }}>
             <div className="absolute right-0 w-px h-full bg-bg-light" />
             <Tooltip title={value.toLocaleString()} placement={'right'}>
                 <div
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
index 44c2c7e6a0bc5..1535f6974e591 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
@@ -47,7 +47,7 @@ export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element
                                                 onChange={(value) => setInnerGroupType(value, groupIndex)}
                                                 value={group.type}
                                             />
-                                            <div style={{ flex: 1, minWidth: '0.5rem' }} />
+                                            <div className="flex-1 min-w-2" />
                                             <LemonButton
                                                 icon={<IconCopy />}
                                                 status="primary-alt"
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
index 83f133b41035b..4f7209a7d5583 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
@@ -121,7 +121,7 @@ export function CohortCriteriaRowBuilder({
                             />
                         )}
                     </div>
-                    <div style={{ display: 'flex' }}>
+                    <div className="flex">
                         <div>
                             <span className="CohortCriteriaRow__Criteria__arrow">&#8627;</span>
                         </div>
diff --git a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
index 2c91d4ff3000c..4f13b597f8fee 100644
--- a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
+++ b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
@@ -88,12 +88,7 @@ export function DashboardCollaboration({ dashboardId }: { dashboardId: Dashboard
                                 </div>
                             )}
                             <h5 className="mt-4">Project members with access</h5>
-                            <div
-                                className="mt-2 pb-2 rounded overflow-y-auto"
-                                style={{
-                                    maxHeight: 300,
-                                }}
-                            >
+                            <div className="mt-2 pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
                                 {allCollaborators.map((collaborator) => (
                                     <CollaboratorRow
                                         key={collaborator.user.uuid}
diff --git a/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx b/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
index d238d6276f645..e7a29f4cfa63b 100644
--- a/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
+++ b/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
@@ -21,7 +21,7 @@ export const NoDashboards = (): JSX.Element => {
                         })
                     }
                 >
-                    <div style={{ textAlign: 'center', fontSize: 40 }}>
+                    <div className="text-4xl text-center">
                         <AppstoreAddOutlined />
                     </div>
                 </Card>
@@ -36,7 +36,7 @@ export const NoDashboards = (): JSX.Element => {
                         })
                     }
                 >
-                    <div style={{ textAlign: 'center', fontSize: 40 }}>
+                    <div className="text-4xl text-center">
                         <AppstoreAddOutlined />
                     </div>
                 </Card>
diff --git a/frontend/src/scenes/events/Owner.tsx b/frontend/src/scenes/events/Owner.tsx
index 1417abc637831..600be23efbe12 100644
--- a/frontend/src/scenes/events/Owner.tsx
+++ b/frontend/src/scenes/events/Owner.tsx
@@ -6,12 +6,14 @@ export function Owner({ user, style = {} }: { user?: UserBasicType | null; style
     return (
         <>
             {user?.uuid ? (
-                <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
+                <div className="flex items-center flex-row">
                     <ProfilePicture name={user.first_name} email={user.email} size="sm" />
-                    <span style={{ paddingLeft: 8, ...style }}>{user.first_name}</span>
+                    <span className="pl-2" style={style}>
+                        {user.first_name}
+                    </span>
                 </div>
             ) : (
-                <span className="text-muted" style={{ fontStyle: 'italic', ...style }}>
+                <span className="text-muted italic" style={style}>
                     No owner
                 </span>
             )}
diff --git a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
index 9653d430b1682..8582017bb7bcb 100644
--- a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
+++ b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
@@ -111,7 +111,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
             title={<span className="card-secondary">Feature flag usage and implementation</span>}
             className="experiment-implementation-details"
         >
-            <div style={{ justifyContent: 'space-between' }} className="flex mb-2">
+            <div className="flex mb-2 justify-between">
                 <div>
                     <span className="mr-2">Variant group</span>
                     <Select
diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
index 928d4e6d3a97f..ce953235e00de 100644
--- a/frontend/src/scenes/experiments/ExperimentPreview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -225,7 +225,7 @@ export function ExperimentPreview({
                         </Col>
                         <Col span={12}>
                             <div className="card-secondary">Participants</div>
-                            <div style={{ display: 'inline-block' }}>
+                            <div className="inline-block">
                                 {targetingProperties ? (
                                     <>
                                         {groupFilters(targetingProperties, undefined, aggregationLabel)}
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index 4f12c9f925bed..18805d37a2fbc 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -903,7 +903,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                             <Col span={4}>Variant key</Col>
                             <Col span={6}>Description</Col>
                             <Col span={8}>
-                                <div style={{ display: 'flex', flexDirection: 'column', fontWeight: 'normal' }}>
+                                <div className="flex flex-col" style={{ fontWeight: 'normal' }}>
                                     <b>Payload</b>
                                     <span className="text-muted">
                                         Specify return payload when the variant key matches
diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
index 3768568688784..31ecffd72bbfc 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlags.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
@@ -426,10 +426,7 @@ export function groupFilters(
             ) : (
                 <div className="flex items-center">
                     <span className="shrink-0 mr-2">{rollout_percentage ?? 100}% of</span>
-                    <PropertyFiltersDisplay
-                        filters={properties as AnyPropertyFilter[]}
-                        style={{ margin: 0, flexDirection: 'column' }}
-                    />
+                    <PropertyFiltersDisplay filters={properties as AnyPropertyFilter[]} />
                 </div>
             )
         } else if (rollout_percentage !== null) {
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
index c99395631187e..7863e7770d3b3 100644
--- a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
+++ b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
@@ -1,6 +1,6 @@
 export function MetricRow({ title, value }: { title: string; value: string | number }): JSX.Element {
     return (
-        <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+        <div className="flex justify-between w-full">
             <div>{title}</div>
             <div>
                 <strong style={{ paddingLeft: 6 }}>{value}</strong>
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
index 921f18b586f22..80b792f3e4dd2 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
@@ -321,6 +321,7 @@ export function ActionFilterRow({
             className={'ActionFilterRow'}
             ref={setNodeRef}
             {...attributes}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 zIndex: isDragging ? 1 : undefined,
@@ -458,7 +459,6 @@ export function ActionFilterRow({
                         pageKey={`${index}-${value}-${typeKey}-filter`}
                         propertyFilters={filter.properties}
                         onChange={(properties) => updateFilterProperty({ properties, index })}
-                        style={{ margin: 0 }}
                         showNestedArrow={showNestedArrow}
                         disablePopover={!propertyFiltersPopover}
                         taxonomicGroupTypes={propertiesTaxonomicGroupTypes}
diff --git a/frontend/src/scenes/insights/filters/InsightDateFilter/insightDateFilterLogic.ts b/frontend/src/scenes/insights/filters/InsightDateFilter/insightDateFilterLogic.ts
new file mode 100644
index 0000000000000..76c8b4da0321c
--- /dev/null
+++ b/frontend/src/scenes/insights/filters/InsightDateFilter/insightDateFilterLogic.ts
@@ -0,0 +1,37 @@
+import { kea, props, key, path, connect, actions, selectors, listeners } from 'kea'
+import type { insightDateFilterLogicType } from './insightDateFilterLogicType'
+import { InsightLogicProps } from '~/types'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+
+export const insightDateFilterLogic = kea<insightDateFilterLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    path((key) => ['scenes', 'insights', 'InsightDateFilter', 'insightDateFilterLogic', key]),
+    connect((props: InsightLogicProps) => ({
+        actions: [insightVizDataLogic(props), ['updateQuerySource']],
+        values: [insightVizDataLogic(props), ['dateRange']],
+    })),
+    actions(() => ({
+        setDates: (dateFrom: string | undefined | null, dateTo: string | undefined | null) => ({
+            dateFrom,
+            dateTo,
+        }),
+    })),
+    selectors({
+        dates: [
+            (s) => [s.dateRange],
+            (dateRange) => ({ dateFrom: dateRange?.date_from || null, dateTo: dateRange?.date_to || null }),
+        ],
+    }),
+    listeners(({ actions }) => ({
+        setDates: ({ dateFrom, dateTo }) => {
+            actions.updateQuerySource({
+                dateRange: {
+                    date_from: dateFrom || null,
+                    date_to: dateTo || null,
+                },
+            })
+        },
+    })),
+])
diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
index d3abb1548470c..11671e289ecae 100644
--- a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
+++ b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
@@ -260,5 +260,6 @@ export function Histogram({
 
     /* minWidth required to enforce d3's width calculations on the div wrapping the svg
      so that scrolling horizontally works */
+    //  eslint-disable-next-line react/forbid-dom-props
     return <div className="histogram-container" ref={ref} style={{ minWidth: config.width }} />
 }
diff --git a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
index 6a2a344c78ef9..901500d92a6c4 100644
--- a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
+++ b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
@@ -71,12 +71,7 @@ export function MetricsTab(): JSX.Element {
                         }}
                         embedded
                     />
-                    <div
-                        style={{
-                            margin: '1rem',
-                            textAlign: 'center',
-                        }}
-                    >
+                    <div className="m-4 text-center">
                         <Button
                             disabled={rowsPerMetric[row.key].length % ROWS_LIMIT !== 0}
                             onClick={() => loadMoreRows(row.key)}
diff --git a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
index 7094709a14eaa..a61d9eb7e20cb 100644
--- a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
@@ -10,13 +10,11 @@ export function KafkaInspectorTab(): JSX.Element {
 
     return (
         <div>
-            <h3 className="l3" style={{ marginTop: 16 }}>
-                Kafka Inspector
-            </h3>
+            <h3 className="l3 mt-4">Kafka Inspector</h3>
             <div className="mb-4">Debug Kafka messages using the inspector tool.</div>
             <Divider style={{ margin: 0, marginBottom: 16 }} />
             <section>
-                <div style={{ display: 'flex', marginBottom: '0.75rem' }}>
+                <div className="flex mb-3">
                     <Form
                         logic={kafkaInspectorLogic}
                         formKey="fetchKafkaMessage"
diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
index 627f303ba7f08..3605857912d5d 100644
--- a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -68,16 +68,11 @@ export function StaffUsersTab(): JSX.Element {
                                 okType: 'primary',
                                 okButtonProps: { className: 'btn-danger' },
                                 content: (
-                                    <div style={{ border: '' }}>
+                                    <div className="border-none">
                                         {myself?.uuid === user.uuid ? (
                                             <>
                                                 Please confirm you want to <b>remove yourself</b> as a staff user.
-                                                <div
-                                                    style={{
-                                                        fontWeight: 'normal',
-                                                        color: 'var(--muted-alt)',
-                                                    }}
-                                                >
+                                                <div className="font-normal" style={{ color: 'var(--muted-alt)' }}>
                                                     Only another staff user will be able to add you again.
                                                 </div>
                                             </>
@@ -100,9 +95,7 @@ export function StaffUsersTab(): JSX.Element {
 
     return (
         <div>
-            <h3 className="l3" style={{ marginTop: 16 }}>
-                Staff Users
-            </h3>
+            <h3 className="l3 mt-4">Staff Users</h3>
             <div className="mb-4">
                 Users who have permissions to manage instance-wide settings. Staff user permissions are set at the{' '}
                 <b>instance-level and are independent of any organization or project permissions.</b>{' '}
@@ -118,7 +111,7 @@ export function StaffUsersTab(): JSX.Element {
             <Divider style={{ margin: 0, marginBottom: 16 }} />
             <section>
                 <div className="flex gap-2 mb-4">
-                    <div className="flex flex-1">
+                    <div className="flex-1">
                         <LemonSelectMultiple
                             placeholder="Add staff users here…"
                             loading={allUsersLoading}
diff --git a/frontend/src/scenes/organization/Settings/Invites.tsx b/frontend/src/scenes/organization/Settings/Invites.tsx
index 4fe50084b5b95..ada95fcca7147 100644
--- a/frontend/src/scenes/organization/Settings/Invites.tsx
+++ b/frontend/src/scenes/organization/Settings/Invites.tsx
@@ -98,7 +98,7 @@ export function Invites(): JSX.Element {
 
     return (
         <div>
-            <h2 id="invites" className="subtitle" style={{ justifyContent: 'space-between' }}>
+            <h2 id="invites" className="subtitle justify-between">
                 Pending Invites
                 <LemonButton type="primary" onClick={showInviteModal} data-attr="invite-teammate-button">
                     Invite team member
diff --git a/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx b/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
index 65213ed128481..7adcbed6a3621 100644
--- a/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
+++ b/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
@@ -54,7 +54,7 @@ export function Permissions({ isRestricted }: RestrictedComponentProps): JSX.Ele
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="roles" className="subtitle">
                         Permission Defaults
                     </h2>
diff --git a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
index 50ca6b37b6214..915433298a2d3 100644
--- a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
+++ b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
@@ -58,7 +58,7 @@ export function Roles({ isRestricted }: RestrictedComponentProps): JSX.Element {
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="roles" className="subtitle">
                         Roles
                     </h2>
diff --git a/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx b/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
index 62610b74d3461..f911bb31128bb 100644
--- a/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
+++ b/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
@@ -27,7 +27,7 @@ export function VerifiedDomains(): JSX.Element {
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="authentication-domains" className="subtitle">
                         Authentication domains
                     </h2>
diff --git a/frontend/src/scenes/persons/Persons.tsx b/frontend/src/scenes/persons/Persons.tsx
index 866c46b513640..2393c765e76bc 100644
--- a/frontend/src/scenes/persons/Persons.tsx
+++ b/frontend/src/scenes/persons/Persons.tsx
@@ -94,7 +94,7 @@ export function PersonsScene({
                                             icon={<IconExport style={{ color: 'var(--primary)' }} />}
                                         >
                                             {listFilters.properties && listFilters.properties.length > 0 ? (
-                                                <div style={{ display: 'block' }}>
+                                                <div className="block">
                                                     Export (<strong>{listFilters.properties.length}</strong> filter)
                                                 </div>
                                             ) : (
diff --git a/frontend/src/scenes/plugins/edit/PluginField.tsx b/frontend/src/scenes/plugins/edit/PluginField.tsx
index b57d47e1da5b2..af6438f790e06 100644
--- a/frontend/src/scenes/plugins/edit/PluginField.tsx
+++ b/frontend/src/scenes/plugins/edit/PluginField.tsx
@@ -77,7 +77,7 @@ export function PluginField({
             ))}
         </Select>
     ) : (
-        <strong style={{ color: 'var(--danger)' }}>
+        <strong className="text-danger">
             Unknown field type "<code>{fieldConfig.type}</code>".
             <br />
             You may need to upgrade PostHog!
diff --git a/frontend/src/scenes/plugins/plugin/PluginImage.tsx b/frontend/src/scenes/plugins/plugin/PluginImage.tsx
index 67120a11074d8..9fec8b6275e9e 100644
--- a/frontend/src/scenes/plugins/plugin/PluginImage.tsx
+++ b/frontend/src/scenes/plugins/plugin/PluginImage.tsx
@@ -42,6 +42,7 @@ export function PluginImage({
     ) : (
         <div
             className="plugin-image shrink-0"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: pixelSize,
                 height: pixelSize,
diff --git a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
index 741ba55fdc2ea..11275bcab2da5 100644
--- a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
+++ b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
@@ -9,24 +9,24 @@ function PluginLogEntryTypeDisplay(type: PluginLogEntryType): JSX.Element {
     let color: string | undefined
     switch (type) {
         case PluginLogEntryType.Debug:
-            color = 'var(--muted)'
+            color = 'text-muted'
             break
         case PluginLogEntryType.Log:
-            color = 'var(--default)'
+            color = 'text-default'
             break
         case PluginLogEntryType.Info:
-            color = 'var(--blue)'
+            color = 'text-primary'
             break
         case PluginLogEntryType.Warn:
-            color = 'var(--warning)'
+            color = 'text-warning'
             break
         case PluginLogEntryType.Error:
-            color = 'var(--danger)'
+            color = 'text-danger'
             break
         default:
             break
     }
-    return <span style={{ color }}>{type}</span>
+    return <span className={color}>{type}</span>
 }
 
 const columns: LemonTableColumns<Record<string, any>> = [
diff --git a/frontend/src/scenes/plugins/source/PluginSource.tsx b/frontend/src/scenes/plugins/source/PluginSource.tsx
index 0b2ba5fd675b1..0d016a06a7ba1 100644
--- a/frontend/src/scenes/plugins/source/PluginSource.tsx
+++ b/frontend/src/scenes/plugins/source/PluginSource.tsx
@@ -80,7 +80,7 @@ export function PluginSource({
             title={pluginSourceLoading ? 'Loading...' : `Edit App: ${name}`}
             placement={placement ?? 'left'}
             footer={
-                <div style={{ textAlign: 'right' }}>
+                <div className="text-right">
                     <Button onClick={closePluginSource} style={{ marginRight: 16 }}>
                         Close
                     </Button>
@@ -126,7 +126,7 @@ export function PluginSource({
                                                 }}
                                             />
                                             {!value && createDefaultPluginSource(name)[currentFile] ? (
-                                                <div style={{ marginTop: '0.5rem' }}>
+                                                <div className="mt-2">
                                                     <LemonButton
                                                         type="primary"
                                                         onClick={() =>
diff --git a/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx b/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
index 1e5e0ad81b897..382a157bbbf6f 100644
--- a/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
+++ b/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
@@ -16,6 +16,7 @@ const MinimalAppView = ({ plugin, order }: { plugin: PluginTypeWithConfig; order
         <div
             ref={setNodeRef}
             className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 transform: CSS.Transform.toString(transform),
diff --git a/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx b/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
index 7c8be42a75ede..c9c71ca17daf7 100644
--- a/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
+++ b/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
@@ -43,7 +43,7 @@ function ExtraSettingInput({
     const [value, setValue] = useState(defaultValue)
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={value as any} onChange={setValue} disabled={currentTeamLoading} type={type as any} />
             <LemonButton
                 type="primary"
diff --git a/frontend/src/scenes/project/Settings/index.tsx b/frontend/src/scenes/project/Settings/index.tsx
index 927d296c47f94..dcf5c15091d50 100644
--- a/frontend/src/scenes/project/Settings/index.tsx
+++ b/frontend/src/scenes/project/Settings/index.tsx
@@ -56,7 +56,7 @@ function DisplayName(): JSX.Element {
     }
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={name} onChange={setName} disabled={currentTeamLoading} />
             <LemonButton
                 type="primary"
diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx b/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
index c2ed3c6ef3bc1..56e771c9531d7 100644
--- a/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
+++ b/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
@@ -63,9 +63,9 @@ export function Seekbar(): JSX.Element {
                             ))}
                         </div>
 
-                        {/* eslint-disable-next-line react/forbid-dom-props */}
                         <div
                             className="PlayerSeekbar__currentbar"
+                            // eslint-disable-next-line react/forbid-dom-props
                             style={{ width: `${Math.max(thumbLeftPos, 0)}px` }}
                         />
                         {/* eslint-disable-next-line react/forbid-dom-props */}
diff --git a/frontend/src/scenes/session-recordings/player/icons.tsx b/frontend/src/scenes/session-recordings/player/icons.tsx
index 6fff14ba753b5..fa8a79d631150 100644
--- a/frontend/src/scenes/session-recordings/player/icons.tsx
+++ b/frontend/src/scenes/session-recordings/player/icons.tsx
@@ -10,7 +10,7 @@ export function IconWindowOld({ value, className = '', size = 'medium' }: IconWi
     const shortValue = typeof value === 'number' ? value : String(value).charAt(0)
     return (
         <div className={clsx('flex justify-center items-center relative shrink-0', className)}>
-            <span className="absolute font-semibold" style={{ fontSize: size === 'medium' ? 8 : 6, marginTop: 2 }}>
+            <span className="absolute font-semibold mt-0.5" style={{ fontSize: size === 'medium' ? 8 : 6 }}>
                 {shortValue}
             </span>
             <svg
diff --git a/frontend/src/scenes/surveys/EditSurvey.scss b/frontend/src/scenes/surveys/EditSurvey.scss
index a504bf234d4fc..2995d06667887 100644
--- a/frontend/src/scenes/surveys/EditSurvey.scss
+++ b/frontend/src/scenes/surveys/EditSurvey.scss
@@ -7,7 +7,3 @@
         background: var(--border-light);
     }
 }
-
-.SurveyFormAppearance {
-    max-width: 320px;
-}
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index 5c2f93222462f..ab9630577ee9f 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -49,6 +49,7 @@ import { SurveyFormAppearance } from './SurveyFormAppearance'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 import { surveysLogic } from './surveysLogic'
 import { FlagSelector } from 'lib/components/FlagSelector'
+import clsx from 'clsx'
 
 function PresentationTypeCard({
     title,
@@ -67,8 +68,12 @@ function PresentationTypeCard({
 }): JSX.Element {
     return (
         <div
-            style={{ borderColor: active ? 'var(--primary)' : 'var(--border)', height: 230, width: 260 }}
-            className="border rounded-md relative px-4 py-2 overflow-hidden"
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ height: 230, width: 260 }}
+            className={clsx(
+                'border rounded-md relative px-4 py-2 overflow-hidden',
+                active ? 'border-primary' : 'border-border'
+            )}
         >
             <p className="font-semibold m-0">{title}</p>
             {description && <p className="m-0 text-xs">{description}</p>}
@@ -694,13 +699,7 @@ export default function SurveyEdit(): JSX.Element {
                                                     description="Use the PostHog API to show/hide your survey programmatically"
                                                     value={SurveyType.API}
                                                 >
-                                                    <div
-                                                        style={{
-                                                            position: 'absolute',
-                                                            left: '1rem',
-                                                            width: 350,
-                                                        }}
-                                                    >
+                                                    <div className="absolute left-4" style={{ width: 350 }}>
                                                         <SurveyAPIEditor survey={survey} />
                                                     </div>
                                                 </PresentationTypeCard>
@@ -924,14 +923,12 @@ export default function SurveyEdit(): JSX.Element {
                 />
             </div>
             <LemonDivider vertical />
-            <div className="px-4">
-                <div className="flex flex-col items-center h-full sticky top-0 pt-8">
-                    <SurveyFormAppearance
-                        activePreview={selectedQuestion || 0}
-                        survey={survey}
-                        setActivePreview={(preview) => setSelectedQuestion(preview)}
-                    />
-                </div>
+            <div className="max-w-80 mx-4 flex flex-col items-center h-full w-full sticky top-0 pt-8">
+                <SurveyFormAppearance
+                    activePreview={selectedQuestion || 0}
+                    survey={survey}
+                    setActivePreview={(preview) => setSelectedQuestion(preview)}
+                />
             </div>
         </div>
     )
diff --git a/frontend/src/scenes/surveys/SurveyFormAppearance.tsx b/frontend/src/scenes/surveys/SurveyFormAppearance.tsx
index 5ff65153a4508..4ce32f42d6192 100644
--- a/frontend/src/scenes/surveys/SurveyFormAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyFormAppearance.tsx
@@ -17,58 +17,54 @@ export function SurveyFormAppearance({
 }: SurveyFormAppearanceProps): JSX.Element {
     const showThankYou = survey.appearance.displayThankYouMessage && activePreview >= survey.questions.length
 
-    return (
-        <div className="SurveyFormAppearance">
-            {survey.type !== SurveyType.API ? (
-                <>
-                    {showThankYou ? (
-                        <SurveyThankYou appearance={survey.appearance} />
-                    ) : (
-                        <SurveyAppearance
-                            type={survey.questions[activePreview].type}
-                            surveyQuestionItem={survey.questions[activePreview]}
-                            question={survey.questions[activePreview].question}
-                            description={survey.questions[activePreview].description}
-                            link={
-                                survey.questions[activePreview].type === SurveyQuestionType.Link
-                                    ? (survey.questions[activePreview] as LinkSurveyQuestion).link
-                                    : undefined
-                            }
-                            appearance={{
-                                ...(survey.appearance || defaultSurveyAppearance),
-                                ...(survey.questions.length > 1 ? { submitButtonText: 'Next' } : null),
-                            }}
-                        />
-                    )}
-                    <LemonSelect
-                        onChange={(activePreview) => {
-                            setActivePreview(activePreview)
-                        }}
-                        className="mt-4 whitespace-nowrap"
-                        fullWidth
-                        value={activePreview}
-                        options={[
-                            ...survey.questions.map((question, index) => ({
-                                label: `${index + 1}. ${question.question ?? ''}`,
-                                value: index,
-                            })),
-                            ...(survey.appearance.displayThankYouMessage
-                                ? [
-                                      {
-                                          label: `${survey.questions.length + 1}. Confirmation message`,
-                                          value: survey.questions.length,
-                                      },
-                                  ]
-                                : []),
-                        ]}
-                    />
-                </>
+    return survey.type !== SurveyType.API ? (
+        <>
+            {showThankYou ? (
+                <SurveyThankYou appearance={survey.appearance} />
             ) : (
-                <div className="flex flex-col">
-                    <h4 className="text-center">API survey response</h4>
-                    <SurveyAPIEditor survey={survey} />
-                </div>
+                <SurveyAppearance
+                    type={survey.questions[activePreview].type}
+                    surveyQuestionItem={survey.questions[activePreview]}
+                    question={survey.questions[activePreview].question}
+                    description={survey.questions[activePreview].description}
+                    link={
+                        survey.questions[activePreview].type === SurveyQuestionType.Link
+                            ? (survey.questions[activePreview] as LinkSurveyQuestion).link
+                            : undefined
+                    }
+                    appearance={{
+                        ...(survey.appearance || defaultSurveyAppearance),
+                        ...(survey.questions.length > 1 ? { submitButtonText: 'Next' } : null),
+                    }}
+                />
             )}
+            <LemonSelect
+                onChange={(activePreview) => {
+                    setActivePreview(activePreview)
+                }}
+                className="mt-4 whitespace-nowrap"
+                fullWidth
+                value={activePreview}
+                options={[
+                    ...survey.questions.map((question, index) => ({
+                        label: `${index + 1}. ${question.question ?? ''}`,
+                        value: index,
+                    })),
+                    ...(survey.appearance.displayThankYouMessage
+                        ? [
+                              {
+                                  label: `${survey.questions.length + 1}. Confirmation message`,
+                                  value: survey.questions.length,
+                              },
+                          ]
+                        : []),
+                ]}
+            />
+        </>
+    ) : (
+        <div className="flex flex-col">
+            <h4 className="text-center">API survey response</h4>
+            <SurveyAPIEditor survey={survey} />
         </div>
     )
 }
diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
index 0da16f745b4ab..334027e67ba0d 100644
--- a/frontend/src/scenes/surveys/SurveyView.tsx
+++ b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -213,7 +213,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                                 </div>
                                             )}
                                             {survey.type !== SurveyType.API ? (
-                                                <div className="mt-6">
+                                                <div className="mt-6 max-w-80">
                                                     <SurveyFormAppearance
                                                         activePreview={selectedQuestion || 0}
                                                         survey={survey}
diff --git a/frontend/src/scenes/surveys/surveyViewViz.tsx b/frontend/src/scenes/surveys/surveyViewViz.tsx
index 789d46065c6cd..31009872dbcef 100644
--- a/frontend/src/scenes/surveys/surveyViewViz.tsx
+++ b/frontend/src/scenes/surveys/surveyViewViz.tsx
@@ -102,6 +102,7 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
                             >
                                 <div
                                     className={`h-10 text-white text-center absolute cursor-pointer ${classes}`}
+                                    // eslint-disable-next-line react/forbid-dom-props
                                     style={style}
                                 >
                                     <span className="inline-flex font-semibold max-w-full px-1 truncate leading-10">
@@ -121,6 +122,7 @@ export function UsersStackedBar({ surveyUserStats }: { surveyUserStats: SurveyUs
                                 ({ count, label, style }) =>
                                     count > 0 && (
                                         <div key={`survey-summary-legend-${label}`} className="flex items-center mr-6">
+                                            {/* eslint-disable-next-line react/forbid-dom-props */}
                                             <div className="w-3 h-3 rounded-full mr-2" style={style} />
                                             <span className="font-semibold text-muted-alt">{`${label} (${(
                                                 (count / total) *
@@ -345,6 +347,7 @@ export function SingleChoiceQuestionPieChart({
                                     >
                                         <div
                                             className="w-3 h-3 rounded-full mr-2"
+                                            // eslint-disable-next-line react/forbid-dom-props
                                             style={{ backgroundColor: colors[i % colors.length] }}
                                         />
                                         <span className="font-semibold text-muted-alt max-w-48 truncate">{`${labels[i]}`}</span>