diff --git a/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png b/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png
index b79c4b316f022..0dd5b12b4fe35 100644
Binary files a/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png and b/frontend/__snapshots__/scenes-app-recordings--recordings-play-list-no-pinned-recordings.png differ
diff --git a/frontend/src/lib/components/TZLabel/index.scss b/frontend/src/lib/components/TZLabel/index.scss
index d987e42d411e5..cdfb2645b50d6 100644
--- a/frontend/src/lib/components/TZLabel/index.scss
+++ b/frontend/src/lib/components/TZLabel/index.scss
@@ -1,38 +1,27 @@
-.tz-label {
-    white-space: nowrap;
+.TZLabelPopover {
+    .TZLabelPopover__row {
+        display: flex;
+        margin-top: 0.5rem;
 
-    &.tz-label--hoverable {
-        border-bottom: 1px dotted var(--border-bold);
-        cursor: default;
-    }
-}
+        > :nth-child(1) {
+            font-weight: bold;
+            color: var(--primary-alt);
+            margin-right: 6px;
+        }
 
-.tz-label-popover {
-    .divider {
-        margin-right: -4px;
-        margin-left: -4px;
-        border-bottom: 1px solid var(--border-light);
-    }
-    .timezones {
-        .timezone {
-            display: flex;
-            margin-top: 8px;
-            .name {
-                font-weight: bold;
-                color: var(--primary-alt);
-                margin-right: 6px;
-            }
+        > :nth-child(2) {
+            color: var(--muted);
+            margin-right: 16px;
+            flex-grow: 1;
+            font-style: italic;
+        }
 
-            .scope {
-                color: var(--muted);
-                margin-right: 16px;
-                flex-grow: 1;
-                font-style: italic;
-            }
+        > :nth-child(3) {
+            min-width: 10rem;
+            text-align: right;
 
-            .time {
-                min-width: 170px;
-                text-align: right;
+            .TZLabelPopover--seconds & {
+                min-width: 12rem;
             }
         }
     }
diff --git a/frontend/src/lib/components/TZLabel/index.tsx b/frontend/src/lib/components/TZLabel/index.tsx
index 2f25a5d25bc18..a1d28b764d79e 100644
--- a/frontend/src/lib/components/TZLabel/index.tsx
+++ b/frontend/src/lib/components/TZLabel/index.tsx
@@ -1,32 +1,20 @@
 import './index.scss'
-import { Col, Popover, Row } from 'antd'
+import { Popover } from 'antd'
 import { useActions, useValues } from 'kea'
-import { ProjectOutlined, LaptopOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons'
-import { Link } from 'lib/lemon-ui/Link'
+import { ProjectOutlined, LaptopOutlined, GlobalOutlined } from '@ant-design/icons'
 import { humanFriendlyDetailedTime, shortTimeZone } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { teamLogic } from '../../../scenes/teamLogic'
 import { dayjs } from 'lib/dayjs'
-import { usePeriodicRerender } from 'lib/hooks/usePeriodicRerender'
 import clsx from 'clsx'
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { styles } from '../../../styles/vars'
+import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
+import { IconSettings } from 'lib/lemon-ui/icons'
+import { urls } from 'scenes/urls'
 
 const BASE_OUTPUT_FORMAT = 'ddd, MMM D, YYYY h:mm A'
 
-function TZConversionHeader(): JSX.Element {
-    return (
-        <h3 className="l3">
-            Timezone conversion
-            <span className="float-right">
-                <Link to="/project/settings#timezone">
-                    <SettingOutlined />
-                </Link>
-            </span>
-        </h3>
-    )
-}
-
 interface TZLabelRawProps {
     time: string | dayjs.Dayjs
     showSeconds?: boolean
@@ -37,6 +25,60 @@ interface TZLabelRawProps {
     className?: string
 }
 
+const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
+    showSeconds,
+    time,
+}: Pick<TZLabelRawProps, 'showSeconds'> & { time: dayjs.Dayjs }): JSX.Element {
+    const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
+    const { currentTeam } = useValues(teamLogic)
+    const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
+
+    useEffect(() => {
+        reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
+    }, [])
+
+    return (
+        <div className={clsx('TZLabelPopover', showSeconds && 'TZLabelPopover--seconds')}>
+            <div className="flex justify-between items-center">
+                <h3 className="mb-0">Timezone conversion</h3>
+                <span>
+                    <LemonButton icon={<IconSettings />} size="small" to={urls.projectSettings('timezone')} />
+                </span>
+            </div>
+
+            <LemonDivider />
+
+            <div className="space-y-2">
+                <div className="TZLabelPopover__row">
+                    <div>
+                        <LaptopOutlined /> {shortTimeZone(undefined, time.toDate())}
+                    </div>
+                    <div>Your device</div>
+                    <div>{time.format(DATE_OUTPUT_FORMAT)}</div>
+                </div>
+                {currentTeam && (
+                    <div className="TZLabelPopover__row">
+                        <div>
+                            <ProjectOutlined /> {shortTimeZone(currentTeam.timezone, time.toDate())}
+                        </div>
+                        <div>Project</div>
+                        <div>{time.tz(currentTeam.timezone).format(DATE_OUTPUT_FORMAT)}</div>
+                    </div>
+                )}
+                {currentTeam?.timezone !== 'UTC' && (
+                    <div className="TZLabelPopover__row">
+                        <div>
+                            <GlobalOutlined /> UTC
+                        </div>
+                        <div />
+                        <div>{time.tz('UTC').format(DATE_OUTPUT_FORMAT)}</div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+})
+
 /** Return a simple label component with timezone conversion UI. */
 function TZLabelRaw({
     time,
@@ -47,73 +89,42 @@ function TZLabelRaw({
     noStyles = false,
     className,
 }: TZLabelRawProps): JSX.Element {
-    usePeriodicRerender(1000)
+    const parsedTime = useMemo(() => (dayjs.isDayjs(time) ? time : dayjs(time)), [time])
 
-    const parsedTime = dayjs.isDayjs(time) ? time : dayjs(time)
-    const { currentTeam } = useValues(teamLogic)
+    const format = useCallback(() => {
+        return formatDate || formatTime
+            ? humanFriendlyDetailedTime(parsedTime, formatDate, formatTime)
+            : parsedTime.fromNow()
+    }, [formatDate, formatTime, parsedTime])
 
-    const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
-    const timeStyle = showSeconds ? { minWidth: 192 } : undefined
+    const [formattedContent, setFormattedContent] = useState(format())
 
-    const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
+    useEffect(() => {
+        // NOTE: This is an optimization to make sure we don't needlessly re-render the component every second.
+        const interval = setInterval(() => {
+            if (format() !== formattedContent) {
+                setFormattedContent(format())
+            }
+        }, 1000)
+        return () => clearInterval(interval)
+    }, [parsedTime, format])
 
     const innerContent = (
-        <span className={!noStyles ? clsx('tz-label', showPopover && 'tz-label--hoverable', className) : className}>
-            {formatDate || formatTime
-                ? humanFriendlyDetailedTime(parsedTime, formatDate, formatTime)
-                : parsedTime.fromNow()}
+        <span
+            className={
+                !noStyles ? clsx('whitespace-nowrap', showPopover && 'border-dotted border-b', className) : className
+            }
+        >
+            {formattedContent}
         </span>
     )
 
     if (showPopover) {
-        const handleVisibleChange = (visible: boolean): void => {
-            if (visible) {
-                reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
-            }
-        }
-
-        const PopoverContent = (
-            <div className="tz-label-popover">
-                <TZConversionHeader />
-                <div className="divider" />
-                <div className="timezones">
-                    <Row className="timezone">
-                        <Col className="name">
-                            <LaptopOutlined /> {shortTimeZone(undefined, parsedTime.toDate())}
-                        </Col>
-                        <Col className="scope">Your device</Col>
-                        <Col className="time" style={timeStyle}>
-                            {parsedTime.format(DATE_OUTPUT_FORMAT)}
-                        </Col>
-                    </Row>
-                    {currentTeam && (
-                        <Row className="timezone">
-                            <Col className="name">
-                                <ProjectOutlined /> {shortTimeZone(currentTeam.timezone, parsedTime.toDate())}
-                            </Col>
-                            <Col className="scope">Project</Col>
-                            <Col className="time" style={timeStyle}>
-                                {parsedTime.tz(currentTeam.timezone).format(DATE_OUTPUT_FORMAT)}
-                            </Col>
-                        </Row>
-                    )}
-                    {currentTeam?.timezone !== 'UTC' && (
-                        <Row className="timezone">
-                            <Col className="name">
-                                <GlobalOutlined /> UTC
-                            </Col>
-                            <Col className="scope" />
-                            <Col className="time" style={timeStyle}>
-                                {parsedTime.tz('UTC').format(DATE_OUTPUT_FORMAT)}
-                            </Col>
-                        </Row>
-                    )}
-                </div>
-            </div>
-        )
-
         return (
-            <Popover content={PopoverContent} onVisibleChange={handleVisibleChange} zIndex={styles.zPopover}>
+            <Popover
+                content={<TZLabelPopoverContent time={parsedTime} showSeconds={showSeconds} />}
+                zIndex={styles.zPopover}
+            >
                 {innerContent}
             </Popover>
         )
diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png
index 86b5a55ad5b75..24af8b2279910 100644
Binary files a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png and b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png differ