diff --git a/ui/api/messages/actions.ts b/ui/api/messages/actions.ts
index fda16d881..2f2c02499 100644
--- a/ui/api/messages/actions.ts
+++ b/ui/api/messages/actions.ts
@@ -24,7 +24,7 @@ export async function getTopicMessages(
       | undefined;
     maxValueLength: number | undefined;
   },
-): Promise<Message[]> {
+): Promise<{ messages: Message[]; ts: Date }> {
   const sp = new URLSearchParams(
     filterUndefinedFromObj({
       "fields[records]":
@@ -55,7 +55,7 @@ export async function getTopicMessages(
   });
   const rawData = await res.json();
   log.trace({ rawData }, "Received messages");
-  return MessageApiResponse.parse(rawData).data;
+  return { messages: MessageApiResponse.parse(rawData).data, ts: new Date() };
 }
 
 export async function getTopicMessage(
@@ -67,7 +67,7 @@ export async function getTopicMessage(
   },
 ): Promise<Message | undefined> {
   log.info({ kafkaId, topicId, params }, "getTopicMessage");
-  const messages = await getTopicMessages(kafkaId, topicId, {
+  const { messages } = await getTopicMessages(kafkaId, topicId, {
     pageSize: 1,
     partition: params.partition,
     filter: {
diff --git a/ui/app/[locale]/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx b/ui/app/[locale]/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx
index 104f396ac..e61c9671a 100644
--- a/ui/app/[locale]/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx
+++ b/ui/app/[locale]/kafka/[kafkaId]/@header/topics/[topicId]/TopicHeader.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/libs/patternfly/react-core";
 import { Skeleton } from "@patternfly/react-core";
 import { notFound } from "next/navigation";
-import { Suspense } from "react";
+import { ReactNode, Suspense } from "react";
 
 export const fetchCache = "force-cache";
 
@@ -22,6 +22,7 @@ export function TopicHeader({
 }: {
   params: KafkaTopicParams;
 }) {
+  const portal = <div key={"topic-header-portal"} id={"topic-header-portal"} />;
   return (
     <Suspense
       fallback={
@@ -71,18 +72,21 @@ export function TopicHeader({
               </Nav>
             </PageNavigation>
           }
+          actions={[portal]}
         />
       }
     >
-      <ConnectedTopicHeader params={{ kafkaId, topicId }} />
+      <ConnectedTopicHeader params={{ kafkaId, topicId }} portal={portal} />
     </Suspense>
   );
 }
 
 async function ConnectedTopicHeader({
   params: { kafkaId, topicId },
+  portal,
 }: {
   params: KafkaTopicParams;
+  portal: ReactNode;
 }) {
   const cluster = await getKafkaCluster(kafkaId);
   if (!cluster) {
@@ -135,6 +139,7 @@ async function ConnectedTopicHeader({
           </Nav>
         </PageNavigation>
       }
+      actions={[portal]}
     />
   );
 }
diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/ConnectedMessagesTable.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/ConnectedMessagesTable.tsx
index 1fcae2448..a13a2056a 100644
--- a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/ConnectedMessagesTable.tsx
+++ b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/ConnectedMessagesTable.tsx
@@ -1,18 +1,21 @@
 "use client";
 
 import { Message } from "@/api/messages/schema";
-import { RefreshInterval } from "@/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/RefreshSelector";
+import { RefreshInterval, RefreshSelector } from "@/components/RefreshSelector";
 import { useFilterParams } from "@/utils/useFilterParams";
-import { useEffect, useState, useTransition } from "react";
+import { useEffect, useLayoutEffect, useState, useTransition } from "react";
+import { createPortal } from "react-dom";
 import { MessagesTable } from "./_components/MessagesTable";
 
 export function ConnectedMessagesTable({
   messages,
+  lastRefresh,
   selectedMessage,
   partitions,
   params,
 }: {
   messages: Message[];
+  lastRefresh: Date | undefined;
   selectedMessage: Message | undefined;
   partitions: number;
   params: {
@@ -24,8 +27,10 @@ export function ConnectedMessagesTable({
     limit: number;
   };
 }) {
-  const [refreshInterval, setRefreshInterval] = useState<RefreshInterval>();
+  const [automaticRefresh, setAutomaticRefresh] = useState(false);
+  const [refreshInterval, setRefreshInterval] = useState<RefreshInterval>(1);
   const [isPending, startTransition] = useTransition();
+  const [isAutorefreshing, startAutorefreshTransition] = useTransition();
   const updateUrl = useFilterParams(params);
 
   function setPartition(partition: number | undefined) {
@@ -116,37 +121,95 @@ export function ConnectedMessagesTable({
 
   useEffect(() => {
     let interval: ReturnType<typeof setInterval>;
-    if (refreshInterval) {
+    if (automaticRefresh) {
       interval = setInterval(async () => {
-        updateUrl({ ...params, _ts: Date.now() });
+        if (!isAutorefreshing) {
+          startAutorefreshTransition(() =>
+            updateUrl({ ...params, _ts: Date.now() }),
+          );
+        }
       }, refreshInterval * 1000);
     }
     return () => clearInterval(interval);
-  }, [params, updateUrl, refreshInterval]);
+  }, [params, updateUrl, automaticRefresh, refreshInterval, isAutorefreshing]);
 
   return (
-    <MessagesTable
-      isRefreshing={isPending}
-      selectedMessage={selectedMessage}
-      lastUpdated={new Date()}
-      messages={messages}
-      partitions={partitions}
-      partition={params.partition}
-      limit={params.limit}
-      filterOffset={params["filter[offset]"]}
-      filterEpoch={params["filter[epoch]"]}
-      filterTimestamp={params["filter[timestamp]"]}
-      refreshInterval={refreshInterval}
-      onPartitionChange={setPartition}
-      onOffsetChange={setOffset}
-      onTimestampChange={setTimestamp}
-      onEpochChange={setEpoch}
-      onLatest={setLatest}
-      onLimitChange={setLimit}
-      onRefresh={refresh}
-      onSelectMessage={setSelected}
-      onDeselectMessage={deselectMessage}
-      onRefreshInterval={setRefreshInterval}
-    />
+    <>
+      <MessagesTable
+        isRefreshing={isPending}
+        selectedMessage={selectedMessage}
+        lastUpdated={new Date()}
+        messages={messages}
+        partitions={partitions}
+        partition={params.partition}
+        limit={params.limit}
+        filterOffset={params["filter[offset]"]}
+        filterEpoch={params["filter[epoch]"]}
+        filterTimestamp={params["filter[timestamp]"]}
+        onPartitionChange={setPartition}
+        onOffsetChange={setOffset}
+        onTimestampChange={setTimestamp}
+        onEpochChange={setEpoch}
+        onLatest={setLatest}
+        onLimitChange={setLimit}
+        onSelectMessage={setSelected}
+        onDeselectMessage={deselectMessage}
+      />
+      <ConnectedRefreshSelector
+        isRefreshing={isPending}
+        isLive={automaticRefresh}
+        refreshInterval={refreshInterval}
+        lastRefresh={lastRefresh}
+        onRefresh={refresh}
+        onRefreshInterval={setRefreshInterval}
+        onToggleLive={setAutomaticRefresh}
+      />
+    </>
   );
 }
+
+function ConnectedRefreshSelector({
+  isRefreshing,
+  isLive,
+  refreshInterval,
+  lastRefresh,
+  onRefresh,
+  onRefreshInterval,
+  onToggleLive,
+}: {
+  isRefreshing: boolean;
+  isLive: boolean;
+  refreshInterval: RefreshInterval;
+  lastRefresh: Date | undefined;
+  onRefresh: () => void;
+  onRefreshInterval: (interval: RefreshInterval) => void;
+  onToggleLive: (enable: boolean) => void;
+}) {
+  const [container, setContainer] = useState<Element | undefined>();
+
+  function seekContainer() {
+    const el = document.getElementById("topic-header-portal");
+    if (el) {
+      setContainer(el);
+    } else {
+      setTimeout(seekContainer, 100);
+    }
+  }
+
+  useLayoutEffect(seekContainer, []); // we want to run this just once
+
+  return container
+    ? createPortal(
+        <RefreshSelector
+          isRefreshing={isRefreshing}
+          isLive={isLive}
+          refreshInterval={refreshInterval}
+          lastRefresh={lastRefresh}
+          onRefresh={onRefresh}
+          onToggleLive={onToggleLive}
+          onIntervalChange={onRefreshInterval}
+        />,
+        container,
+      )
+    : null;
+}
diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessagesTable.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessagesTable.tsx
index 5196bbb2d..059f90c6e 100644
--- a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessagesTable.tsx
+++ b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessagesTable.tsx
@@ -8,10 +8,6 @@ import {
 import { FilterGroup } from "@/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/FilterGroup";
 import { NoResultsEmptyState } from "@/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/NoResultsEmptyState";
 import { PartitionSelector } from "@/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/PartitionSelector";
-import {
-  RefreshInterval,
-  RefreshSelector,
-} from "@/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/RefreshSelector";
 import { DateTime } from "@/components/DateTime";
 import { Number } from "@/components/Number";
 import { ResponsiveTable } from "@/components/table";
@@ -56,7 +52,6 @@ const defaultColumns = ["offset", "timestampUTC", "key", "value"];
 
 export type MessageBrowserProps = {
   isRefreshing: boolean;
-  refreshInterval: RefreshInterval;
   selectedMessage: Message | undefined;
   lastUpdated: Date | undefined;
   messages: Message[];
@@ -72,8 +67,6 @@ export type MessageBrowserProps = {
   onEpochChange: (value: number | undefined) => void;
   onLatest: () => void;
   onLimitChange: (value: number) => void;
-  onRefresh: () => void;
-  onRefreshInterval: (interval: RefreshInterval) => void;
   onSelectMessage: (message: Message) => void;
   onDeselectMessage: () => void;
 };
@@ -88,15 +81,12 @@ export function MessagesTable({
   filterOffset,
   filterEpoch,
   filterTimestamp,
-  refreshInterval,
   onPartitionChange,
   onOffsetChange,
   onTimestampChange,
   onEpochChange,
   onLatest,
   onLimitChange,
-  onRefresh,
-  onRefreshInterval,
   onSelectMessage,
   onDeselectMessage,
 }: MessageBrowserProps) {
@@ -141,7 +131,6 @@ export function MessagesTable({
           <OuterScrollContainer>
             <MessagesTableToolbar
               isRefreshing={isRefreshing}
-              refreshInterval={refreshInterval}
               partitions={partitions}
               partition={partition}
               limit={limit}
@@ -154,8 +143,6 @@ export function MessagesTable({
               onEpochChange={onEpochChange}
               onLatest={onLatest}
               onLimitChange={onLimitChange}
-              onRefresh={onRefresh}
-              onRefreshInterval={onRefreshInterval}
               onColumnManagement={() => setShowColumnsManagement(true)}
             />
             <InnerScrollContainer>
@@ -319,15 +306,12 @@ export function MessagesTableToolbar({
   partition,
   partitions,
   limit,
-  refreshInterval,
   onEpochChange,
   onTimestampChange,
   onOffsetChange,
   onPartitionChange,
   onLimitChange,
   onLatest,
-  onRefresh,
-  onRefreshInterval,
   onColumnManagement,
 }: Pick<
   MessageBrowserProps,
@@ -338,15 +322,12 @@ export function MessagesTableToolbar({
   | "partition"
   | "partitions"
   | "limit"
-  | "refreshInterval"
   | "onEpochChange"
   | "onTimestampChange"
   | "onOffsetChange"
   | "onPartitionChange"
   | "onLimitChange"
   | "onLatest"
-  | "onRefresh"
-  | "onRefreshInterval"
 > & {
   onColumnManagement: () => void;
 }) {
@@ -420,17 +401,6 @@ export function MessagesTableToolbar({
             />
           </ToolbarItem>
         </ToolbarToggleGroup>
-        {/* icon buttons */}
-        <ToolbarGroup variant="icon-button-group">
-          <ToolbarItem>
-            <RefreshSelector
-              isRefreshing={isRefreshing}
-              refreshInterval={refreshInterval}
-              onClick={onRefresh}
-              onChange={onRefreshInterval}
-            />
-          </ToolbarItem>
-        </ToolbarGroup>
 
         <ToolbarItem>
           <Button onClick={onColumnManagement} variant={"link"}>
@@ -445,6 +415,9 @@ export function MessagesTableToolbar({
             isDisabled={isRefreshing}
           />
         </ToolbarGroup>
+        <ToolbarGroup variant="icon-button-group">
+          <ToolbarItem></ToolbarItem>
+        </ToolbarGroup>
       </ToolbarContent>
     </Toolbar>
   );
@@ -469,7 +442,6 @@ export function MessagesTableSkeleton({
     >
       <MessagesTableToolbar
         isRefreshing={true}
-        refreshInterval={undefined}
         partitions={1}
         partition={partition}
         limit={limit}
@@ -482,8 +454,6 @@ export function MessagesTableSkeleton({
         onEpochChange={() => {}}
         onLatest={() => {}}
         onLimitChange={() => {}}
-        onRefresh={() => {}}
-        onRefreshInterval={() => {}}
         onColumnManagement={() => {}}
       />
       <ResponsiveTable
diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/RefreshSelector.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/RefreshSelector.tsx
deleted file mode 100644
index 3bfc08f6c..000000000
--- a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/RefreshSelector.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { RefreshButton } from "@/components/refreshButton";
-import { MenuToggle, Select, SelectOption } from "@/libs/patternfly/react-core";
-import { SelectList } from "@patternfly/react-core";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-
-const intervals = [5, 10, 30, 60] as const;
-export type RefreshInterval = (typeof intervals)[number] | undefined;
-
-export type RefreshSelectorProps = {
-  isRefreshing: boolean;
-  refreshInterval: RefreshInterval;
-  onClick: () => void;
-  onChange: (interval: RefreshInterval) => void;
-};
-
-export function RefreshSelector({
-  isRefreshing,
-  refreshInterval,
-  onClick,
-  onChange,
-}: RefreshSelectorProps) {
-  const t = useTranslations("RefreshButton");
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleOpen = () => setIsOpen((o) => !o);
-
-  return (
-    <Select
-      aria-label={t("refresh_button_label")}
-      selected={refreshInterval ? refreshInterval : -1}
-      isOpen={isOpen}
-      onSelect={() => setIsOpen(false)}
-      toggle={(toggleRef) => (
-        <MenuToggle
-          ref={toggleRef}
-          onClick={toggleOpen}
-          isExpanded={isOpen}
-          isDisabled={isRefreshing}
-          variant={"plainText"}
-          splitButtonOptions={{
-            variant: "action",
-            items: [
-              <>
-                <RefreshButton
-                  key={"refresh"}
-                  onClick={onClick}
-                  isRefreshing={isRefreshing || refreshInterval !== undefined}
-                  isDisabled={isRefreshing}
-                />
-
-                {refreshInterval && (
-                  <>
-                    {t("refresh_interval", { value: refreshInterval })}
-                    &nbsp;&nbsp;&nbsp;
-                  </>
-                )}
-              </>,
-            ],
-          }}
-        />
-      )}
-    >
-      <SelectList>
-        <SelectOption value={-1} onClick={() => onChange(undefined)}>
-          Disabled
-        </SelectOption>
-        {intervals.map((value, idx) => (
-          <SelectOption key={idx} value={value} onClick={() => onChange(value)}>
-            {t("refresh_interval", { value })}
-          </SelectOption>
-        ))}
-      </SelectList>
-    </Select>
-  );
-}
diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/page.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/page.tsx
index 703f47dee..4a82341f6 100644
--- a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/page.tsx
+++ b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/page.tsx
@@ -29,7 +29,7 @@ export default async function MessagesPage({
     epoch,
   } = parseSearchParams(searchParams);
 
-  const messages = await getTopicMessages(kafkaId, topicId, {
+  const { messages, ts } = await getTopicMessages(kafkaId, topicId, {
     pageSize: limit,
     partition,
     filter,
@@ -52,6 +52,7 @@ export default async function MessagesPage({
       return (
         <ConnectedMessagesTable
           messages={messages}
+          lastRefresh={ts}
           selectedMessage={selectedMessage}
           partitions={topic.attributes.numPartitions ?? 0}
           params={{
diff --git a/ui/app/[locale]/layout.tsx b/ui/app/[locale]/layout.tsx
index 814c05b2c..9abec1609 100644
--- a/ui/app/[locale]/layout.tsx
+++ b/ui/app/[locale]/layout.tsx
@@ -31,8 +31,8 @@ export default async function Layout({ children, params: { locale } }: Props) {
           <AppSessionProvider session={session}>
             <AppLayoutProvider>
               <AppLayout>{children}</AppLayout>
-              <SessionRefresher />
             </AppLayoutProvider>
+            <SessionRefresher />
           </AppSessionProvider>
         </NextIntlProvider>
       </body>
diff --git a/ui/app/components/RefreshWithLiveSelector.tsx b/ui/app/components/RefreshWithLiveSelector.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/ui/components/DateTime.tsx b/ui/components/DateTime.tsx
index 9c4f5071c..b35e28559 100644
--- a/ui/components/DateTime.tsx
+++ b/ui/components/DateTime.tsx
@@ -9,7 +9,7 @@ export function DateTime({
   tz = "local",
   empty = "-",
 }: {
-  value: string | undefined;
+  value: string | Date | undefined;
   dateStyle?: "full" | "long" | "medium" | "short";
   timeStyle?: "full" | "long" | "medium" | "short";
   tz?: "UTC" | "local";
@@ -19,7 +19,7 @@ export function DateTime({
   if (!value) {
     return empty;
   }
-  const maybeDate = parseISO(value);
+  const maybeDate = typeof value === "string" ? parseISO(value) : value;
   if (!isDate(maybeDate)) {
     return empty;
   }
diff --git a/ui/components/RefreshSelector.tsx b/ui/components/RefreshSelector.tsx
new file mode 100644
index 000000000..5b5aac0c5
--- /dev/null
+++ b/ui/components/RefreshSelector.tsx
@@ -0,0 +1,121 @@
+import { DateTime } from "@/components/DateTime";
+import { RefreshButton } from "@/components/refreshButton";
+import {
+  Button,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  Select,
+  SelectGroup,
+  SelectList,
+  SelectOption,
+  Text,
+  TextContent,
+  Tooltip,
+} from "@/libs/patternfly/react-core";
+import { PauseIcon, PlayIcon } from "@/libs/patternfly/react-icons";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+const intervals = [1, 2, 5, 10, 30, 60] as const;
+export type RefreshInterval = (typeof intervals)[number];
+
+export type RefreshSelectorProps = {
+  isRefreshing: boolean;
+  isLive: boolean;
+  refreshInterval: RefreshInterval;
+  lastRefresh: Date | undefined;
+  onRefresh: () => void;
+  onToggleLive: (enable: boolean) => void;
+  onIntervalChange: (interval: RefreshInterval) => void;
+};
+
+export function RefreshSelector({
+  isRefreshing,
+  isLive,
+  refreshInterval,
+  lastRefresh,
+  onRefresh,
+  onToggleLive,
+  onIntervalChange,
+}: RefreshSelectorProps) {
+  const t = useTranslations("RefreshButton");
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleOpen = () => setIsOpen((o) => !o);
+
+  return (
+    <Flex direction={{ default: "column" }}>
+      <Flex justifyContent={{ default: "justifyContentFlexEnd" }}>
+        <FlexItem>
+          <Select
+            aria-label={t("refresh_button_label")}
+            selected={refreshInterval ? refreshInterval : -1}
+            isOpen={isOpen}
+            onSelect={() => setIsOpen(false)}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={toggleOpen}
+                isExpanded={isOpen}
+                isDisabled={isRefreshing}
+                variant={"default"}
+                splitButtonOptions={{
+                  variant: "action",
+                  items: [
+                    <Tooltip
+                      content={"Automatically update the content of the page"}
+                      key={"live-toggle"}
+                      position={"left"}
+                    >
+                      <Button
+                        variant={"plain"}
+                        icon={isLive ? <PauseIcon /> : <PlayIcon />}
+                        onClick={() => onToggleLive(!isLive)}
+                      />
+                    </Tooltip>,
+                  ],
+                }}
+              />
+            )}
+          >
+            <SelectList>
+              <SelectGroup label={"Refresh rate"}>
+                {intervals.map((value, idx) => (
+                  <SelectOption
+                    key={idx}
+                    value={value}
+                    onClick={() => onIntervalChange(value)}
+                  >
+                    {t("refresh_interval", { value })}
+                  </SelectOption>
+                ))}
+              </SelectGroup>
+            </SelectList>
+          </Select>
+        </FlexItem>
+        <FlexItem>
+          <RefreshButton
+            key={"refresh"}
+            onClick={onRefresh}
+            isRefreshing={isRefreshing}
+            isDisabled={isRefreshing}
+          />
+        </FlexItem>
+      </Flex>
+      <FlexItem>
+        {lastRefresh && (
+          <TextContent>
+            <Text component={"small"}>
+              Last update:{" "}
+              <DateTime
+                value={lastRefresh}
+                dateStyle={"short"}
+                timeStyle={"medium"}
+              />
+            </Text>
+          </TextContent>
+        )}
+      </FlexItem>
+    </Flex>
+  );
+}
diff --git a/ui/components/refreshButton/refreshButton.tsx b/ui/components/refreshButton/refreshButton.tsx
index 847e89177..74dcc683b 100644
--- a/ui/components/refreshButton/refreshButton.tsx
+++ b/ui/components/refreshButton/refreshButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Tooltip } from "@patternfly/react-core";
+import { Button, Spinner, Tooltip } from "@patternfly/react-core";
 import { SyncAltIcon } from "@patternfly/react-icons";
 import { useTranslations } from "next-intl";
 
@@ -26,12 +26,13 @@ export function RefreshButton({
     <Tooltip content={tooltip || defaultTooltip}>
       <Button
         className="pf-m-hoverable"
-        variant="plain"
+        variant="secondary"
         aria-label={ariaLabel || t("refresh_button_label")}
         isDisabled={isDisabled}
         onClick={isDisabled === true ? undefined : onClick}
-        isLoading={isRefreshing}
-        icon={<SyncAltIcon />}
+        icon={
+          isRefreshing === false ? <SyncAltIcon /> : <Spinner size={"md"} />
+        }
       />
     </Tooltip>
   );
diff --git a/ui/messages/en.json b/ui/messages/en.json
index 7e1ded446..343042c0f 100644
--- a/ui/messages/en.json
+++ b/ui/messages/en.json
@@ -8,7 +8,7 @@
     "refresh_button_label": "Refresh",
     "refresh_description": "Reload contents",
     "refreshing_tooltip": "Data is currently refreshing",
-    "refresh_interval": "{value}s"
+    "refresh_interval": "{value} seconds"
   },
   "Table": {
     "skeleton_loader_screenreader_text": "Loading data"