diff --git a/components/frontend/src/metric/MetricDetails.js b/components/frontend/src/metric/MetricDetails.js
index 95f060999c..81a772ff83 100644
--- a/components/frontend/src/metric/MetricDetails.js
+++ b/components/frontend/src/metric/MetricDetails.js
@@ -1,6 +1,5 @@
 import { bool, func, string } from "prop-types"
 import { useContext, useEffect, useState } from "react"
-import { Icon, Menu } from "semantic-ui-react"
 
 import { get_metric_measurements } from "../api/measurement"
 import { delete_metric, set_metric_attribute } from "../api/metric"
@@ -8,7 +7,7 @@ import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
 import { ChangeLog } from "../changelog/ChangeLog"
 import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
-import { Label, Tab } from "../semantic_ui_react_wrappers"
+import { Tab } from "../semantic_ui_react_wrappers"
 import {
     datePropType,
     metricPropType,
@@ -21,7 +20,8 @@ import { SourceEntities } from "../source/SourceEntities"
 import { Sources } from "../source/Sources"
 import { getMetricScale, getSourceName, isMeasurementRequested } from "../utils"
 import { ActionButton, DeleteButton, PermLinkButton, ReorderButtonGroup } from "../widgets/Button"
-import { FocusableTab } from "../widgets/FocusableTab"
+import { changelogTab, configurationTab, focusableTab } from "../widgets/FocusableTab"
+import { tabPane } from "../widgets/TabPane"
 import { showMessage } from "../widgets/toast"
 import { MetricConfigurationParameters } from "./MetricConfigurationParameters"
 import { MetricDebtParameters } from "./MetricDebtParameters"
@@ -130,96 +130,45 @@ export function MetricDetails({
         Object.values(metric.sources ?? {}).some(
             (source) => !dataModel.metrics[metric.type].sources.includes(source.type),
         )
-    const sources_menu_item = any_error ? <Label color="red">{"Sources"}</Label> : "Sources"
     const metricUrl = `${window.location.href.split("#")[0]}#${metric_uuid}`
     let panes = []
     panes.push(
-        {
-            menuItem: (
-                <Menu.Item key="configuration">
-                    <Icon name="cogs" />
-                    <FocusableTab>{"Configuration"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <MetricConfigurationParameters
-                        subject={subject}
-                        metric={metric}
-                        metric_uuid={metric_uuid}
-                        report={report}
-                        reload={reload}
-                    />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="debt">
-                    <Icon name="money" />
-                    <FocusableTab>{"Technical debt"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <MetricDebtParameters metric={metric} metric_uuid={metric_uuid} report={report} reload={reload} />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="sources">
-                    <Icon name="server" />
-                    <FocusableTab>{sources_menu_item}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <Sources
-                        reports={reports}
-                        report={report}
-                        metric={metric}
-                        metric_uuid={metric_uuid}
-                        measurement={metric.latest_measurement}
-                        changed_fields={changed_fields}
-                        reload={reload}
-                    />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="changelog">
-                    <Icon name="history" />
-                    <FocusableTab>{"Changelog"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ChangeLog timestamp={report.timestamp} metric_uuid={metric_uuid} />
-                </Tab.Pane>
-            ),
-        },
+        tabPane(
+            configurationTab(),
+            <MetricConfigurationParameters
+                subject={subject}
+                metric={metric}
+                metric_uuid={metric_uuid}
+                report={report}
+                reload={reload}
+            />,
+        ),
+        tabPane(
+            focusableTab("Technical debt", "money"),
+            <MetricDebtParameters metric={metric} metric_uuid={metric_uuid} report={report} reload={reload} />,
+        ),
+        tabPane(
+            focusableTab("Sources", "server", Boolean(any_error)),
+            <Sources
+                reports={reports}
+                report={report}
+                metric={metric}
+                metric_uuid={metric_uuid}
+                measurement={metric.latest_measurement}
+                changed_fields={changed_fields}
+                reload={reload}
+            />,
+        ),
+        tabPane(changelogTab(), <ChangeLog timestamp={report.timestamp} metric_uuid={metric_uuid} />),
     )
     if (measurements.length > 0) {
         if (getMetricScale(metric, dataModel) !== "version_number") {
-            panes.push({
-                menuItem: (
-                    <Menu.Item key="trend_graph">
-                        <Icon
-                            className="linegraph"
-                            /* Using name="linegraph" results in "Invalid prop `name` of value `linegraph` supplied to `Icon`."
-                               Using name="line graph" does not show the icon. Using className works around this. */
-                        />
-                        <FocusableTab>{"Trend graph"}</FocusableTab>
-                    </Menu.Item>
-                ),
-                render: () => (
-                    <Tab.Pane>
-                        <TrendGraph metric={metric} measurements={measurements} />
-                    </Tab.Pane>
+            panes.push(
+                tabPane(
+                    focusableTab("Trend graph", "linegraph"),
+                    <TrendGraph metric={metric} measurements={measurements} />,
                 ),
-            })
+            )
         }
         last_measurement.sources.forEach((source) => {
             const report_source = metric.sources[source.source_uuid]
@@ -231,24 +180,18 @@ export function MetricDetails({
                 return
             } // no entities to show, continue
             const source_name = getSourceName(report_source, dataModel)
-            panes.push({
-                menuItem: (
-                    <Menu.Item key={source.source_uuid}>
-                        <FocusableTab>{source_name}</FocusableTab>
-                    </Menu.Item>
-                ),
-                render: () => (
-                    <Tab.Pane>
-                        <SourceEntities
-                            report={report}
-                            metric={metric}
-                            metric_uuid={metric_uuid}
-                            source={source}
-                            reload={measurementsReload}
-                        />
-                    </Tab.Pane>
+            panes.push(
+                tabPane(
+                    focusableTab(source_name),
+                    <SourceEntities
+                        report={report}
+                        metric={metric}
+                        metric_uuid={metric_uuid}
+                        source={source}
+                        reload={measurementsReload}
+                    />,
                 ),
-            })
+            )
         })
     }
 
diff --git a/components/frontend/src/report/ReportTitle.js b/components/frontend/src/report/ReportTitle.js
index 66ce3d7335..5fe0d04037 100644
--- a/components/frontend/src/report/ReportTitle.js
+++ b/components/frontend/src/report/ReportTitle.js
@@ -1,5 +1,5 @@
 import { func, string } from "prop-types"
-import { Grid, Icon, Menu } from "semantic-ui-react"
+import { Grid } from "semantic-ui-react"
 
 import { delete_report, set_report_attribute } from "../api/report"
 import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
@@ -14,9 +14,10 @@ import { Label, Segment, Tab } from "../semantic_ui_react_wrappers"
 import { reportPropType, settingsPropType } from "../sharedPropTypes"
 import { getDesiredResponseTime } from "../utils"
 import { DeleteButton, PermLinkButton } from "../widgets/Button"
-import { FocusableTab } from "../widgets/FocusableTab"
+import { changelogTab, configurationTab, focusableTab } from "../widgets/FocusableTab"
 import { HeaderWithDetails } from "../widgets/HeaderWithDetails"
 import { LabelWithHelp } from "../widgets/LabelWithHelp"
+import { tabPane } from "../widgets/TabPane"
 import { setDocumentTitle } from "./document_title"
 import { IssueTracker } from "./IssueTracker"
 
@@ -313,75 +314,18 @@ export function ReportTitle({ report, openReportsOverview, reload, settings }) {
     const tabIndex = activeTabIndex(settings.expandedItems, report_uuid)
     const reportUrl = `${window.location}`
     const panes = [
-        {
-            menuItem: (
-                <Menu.Item key="configuration">
-                    <Icon name="settings" />
-                    <FocusableTab>{"Configuration"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ReportConfiguration report={report} reload={reload} />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="reaction_times">
-                    <Icon name="time" />
-                    <FocusableTab>{"Desired reaction times"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ReactionTimes report={report} reload={reload} />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="notifications">
-                    <Icon name="feed" />
-                    <FocusableTab>{"Notifications"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <NotificationDestinations
-                        destinations={report.notification_destinations || {}}
-                        report_uuid={report_uuid}
-                        reload={reload}
-                    />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="issue_tracker">
-                    <Icon name="tasks" />
-                    <FocusableTab>{"Issue tracker"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <IssueTracker report={report} reload={reload} />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="changelog">
-                    <Icon name="history" />
-                    <FocusableTab>{"Changelog"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ChangeLog report_uuid={report_uuid} timestamp={report.timestamp} />
-                </Tab.Pane>
-            ),
-        },
+        tabPane(configurationTab(), <ReportConfiguration report={report} reload={reload} />),
+        tabPane(focusableTab("Desired reaction times", "time"), <ReactionTimes report={report} reload={reload} />),
+        tabPane(
+            focusableTab("Notifications", "feed"),
+            <NotificationDestinations
+                destinations={report.notification_destinations || {}}
+                report_uuid={report_uuid}
+                reload={reload}
+            />,
+        ),
+        tabPane(focusableTab("Issue tracker", "tasks"), <IssueTracker report={report} reload={reload} />),
+        tabPane(changelogTab(), <ChangeLog report_uuid={report_uuid} timestamp={report.timestamp} />),
     ]
     setDocumentTitle(report.title)
 
diff --git a/components/frontend/src/report/ReportsOverviewTitle.js b/components/frontend/src/report/ReportsOverviewTitle.js
index cb583768ca..0c221140be 100644
--- a/components/frontend/src/report/ReportsOverviewTitle.js
+++ b/components/frontend/src/report/ReportsOverviewTitle.js
@@ -1,5 +1,5 @@
 import { func, shape } from "prop-types"
-import { Grid, Icon, Menu } from "semantic-ui-react"
+import { Grid } from "semantic-ui-react"
 
 import { set_reports_attribute } from "../api/report"
 import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
@@ -11,8 +11,9 @@ import { StringInput } from "../fields/StringInput"
 import { Tab } from "../semantic_ui_react_wrappers"
 import { permissionsPropType, reportsOverviewPropType, settingsPropType } from "../sharedPropTypes"
 import { dropdownOptions } from "../utils"
-import { FocusableTab } from "../widgets/FocusableTab"
+import { changelogTab, configurationTab, focusableTab } from "../widgets/FocusableTab"
 import { HeaderWithDetails } from "../widgets/HeaderWithDetails"
+import { tabPane } from "../widgets/TabPane"
 import { setDocumentTitle } from "./document_title"
 
 function ReportsOverviewConfiguration({ reports_overview, reload }) {
@@ -106,45 +107,15 @@ export function ReportsOverviewTitle({ reports_overview, reload, settings }) {
     const uuid = "reports_overview"
     const tabIndex = activeTabIndex(settings.expandedItems, uuid)
     const panes = [
-        {
-            menuItem: (
-                <Menu.Item key="configuration">
-                    <Icon name="settings" />
-                    <FocusableTab>{"Configuration"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ReportsOverviewConfiguration reports_overview={reports_overview} reload={reload} />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="permissions">
-                    <Icon name="lock" />
-                    <FocusableTab>{"Permissions"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <Permissions permissions={reports_overview.permissions ?? {}} reload={reload} />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="changelog">
-                    <Icon name="history" />
-                    <FocusableTab>{"Changelog"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ChangeLog />
-                </Tab.Pane>
-            ),
-        },
+        tabPane(
+            configurationTab(),
+            <ReportsOverviewConfiguration reports_overview={reports_overview} reload={reload} />,
+        ),
+        tabPane(
+            focusableTab("Permissions", "lock"),
+            <Permissions permissions={reports_overview.permissions ?? {}} reload={reload} />,
+        ),
+        tabPane(changelogTab(), <ChangeLog />),
     ]
     setDocumentTitle(reports_overview.title)
 
diff --git a/components/frontend/src/source/Source.js b/components/frontend/src/source/Source.js
index 99232b1bd1..d886a8f7a7 100644
--- a/components/frontend/src/source/Source.js
+++ b/components/frontend/src/source/Source.js
@@ -1,6 +1,6 @@
 import { bool, func, object, oneOfType, string } from "prop-types"
 import { useContext } from "react"
-import { Grid, Menu } from "semantic-ui-react"
+import { Grid } from "semantic-ui-react"
 
 import { delete_source, set_source_attribute } from "../api/source"
 import { ChangeLog } from "../changelog/ChangeLog"
@@ -8,7 +8,7 @@ import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
 import { ErrorMessage } from "../errorMessage"
 import { StringInput } from "../fields/StringInput"
-import { Icon, Label, Tab } from "../semantic_ui_react_wrappers"
+import { Tab } from "../semantic_ui_react_wrappers"
 import {
     measurementSourcePropType,
     metricPropType,
@@ -18,8 +18,9 @@ import {
 } from "../sharedPropTypes"
 import { getMetricName, getSourceName } from "../utils"
 import { DeleteButton, ReorderButtonGroup } from "../widgets/Button"
-import { FocusableTab } from "../widgets/FocusableTab"
+import { changelogTab, configurationTab } from "../widgets/FocusableTab"
 import { HyperLink } from "../widgets/HyperLink"
+import { tabPane } from "../widgets/TabPane"
 import { SourceParameters } from "./SourceParameters"
 import { SourceType } from "./SourceType"
 import { SourceTypeHeader } from "./SourceTypeHeader"
@@ -171,45 +172,22 @@ export function Source({
         </>
     )
     const configError = dataModel.metrics[metric.type].sources.includes(source.type) ? "" : configErrorMessage
-    const configurationTabLabel =
-        configError || connectionError || parseError ? <Label color="red">{"Configuration"}</Label> : "Configuration"
     const panes = [
-        {
-            menuItem: (
-                <Menu.Item key="configuration">
-                    <Icon name="settings" />
-                    <FocusableTab>{configurationTabLabel}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <Parameters
-                        metric={metric}
-                        source={source}
-                        source_uuid={source_uuid}
-                        connection_error={connectionError}
-                        parse_error={parseError}
-                        config_error={configError}
-                        report={report}
-                        changed_fields={changed_fields}
-                        reload={reload}
-                    />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="changelog">
-                    <Icon name="history" />
-                    <FocusableTab>{"Changelog"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ChangeLog source_uuid={source_uuid} timestamp={report.timestamp} />
-                </Tab.Pane>
-            ),
-        },
+        tabPane(
+            configurationTab(Boolean(configError || connectionError || parseError)),
+            <Parameters
+                metric={metric}
+                source={source}
+                source_uuid={source_uuid}
+                connection_error={connectionError}
+                parse_error={parseError}
+                config_error={configError}
+                report={report}
+                changed_fields={changed_fields}
+                reload={reload}
+            />,
+        ),
+        tabPane(changelogTab(), <ChangeLog source_uuid={source_uuid} timestamp={report.timestamp} />),
     ]
     return (
         <>
diff --git a/components/frontend/src/subject/SubjectTitle.js b/components/frontend/src/subject/SubjectTitle.js
index 54281f8684..0b0608b5a0 100644
--- a/components/frontend/src/subject/SubjectTitle.js
+++ b/components/frontend/src/subject/SubjectTitle.js
@@ -1,6 +1,6 @@
 import { bool, func, object, string } from "prop-types"
 import { useContext } from "react"
-import { Icon, Menu } from "semantic-ui-react"
+import { Icon } from "semantic-ui-react"
 
 import { delete_subject, set_subject_attribute } from "../api/subject"
 import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
@@ -11,9 +11,10 @@ import { Header, Tab } from "../semantic_ui_react_wrappers"
 import { reportPropType, settingsPropType } from "../sharedPropTypes"
 import { getSubjectType, slugify } from "../utils"
 import { DeleteButton, PermLinkButton, ReorderButtonGroup } from "../widgets/Button"
-import { FocusableTab } from "../widgets/FocusableTab"
+import { changelogTab, configurationTab } from "../widgets/FocusableTab"
 import { HeaderWithDetails } from "../widgets/HeaderWithDetails"
 import { HyperLink } from "../widgets/HyperLink"
+import { tabPane } from "../widgets/TabPane"
 import { SubjectParameters } from "./SubjectParameters"
 
 function SubjectHeader({ subjectType }) {
@@ -82,37 +83,16 @@ export function SubjectTitle({
     const subjectTitle = (atReportsOverview ? report.title + " ❯ " : "") + subjectName
     const subjectUrl = `${window.location}#${subject_uuid}`
     const panes = [
-        {
-            menuItem: (
-                <Menu.Item key="configuration">
-                    <Icon name="settings" />
-                    <FocusableTab>{"Configuration"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <SubjectParameters
-                        subject={subject}
-                        subject_uuid={subject_uuid}
-                        subject_name={subjectName}
-                        reload={reload}
-                    />
-                </Tab.Pane>
-            ),
-        },
-        {
-            menuItem: (
-                <Menu.Item key="changelog">
-                    <Icon name="history" />
-                    <FocusableTab>{"Changelog"}</FocusableTab>
-                </Menu.Item>
-            ),
-            render: () => (
-                <Tab.Pane>
-                    <ChangeLog subject_uuid={subject_uuid} timestamp={report.timestamp} />
-                </Tab.Pane>
-            ),
-        },
+        tabPane(
+            configurationTab(),
+            <SubjectParameters
+                subject={subject}
+                subject_uuid={subject_uuid}
+                subject_name={subjectName}
+                reload={reload}
+            />,
+        ),
+        tabPane(changelogTab(), <ChangeLog subject_uuid={subject_uuid} timestamp={report.timestamp} />),
     ]
 
     return (
diff --git a/components/frontend/src/widgets/FocusableTab.js b/components/frontend/src/widgets/FocusableTab.js
index 1e156b86a4..1ac65161c3 100644
--- a/components/frontend/src/widgets/FocusableTab.js
+++ b/components/frontend/src/widgets/FocusableTab.js
@@ -1,14 +1,53 @@
 import "./FocusableTab.css"
 
+import { bool, element, oneOfType, string } from "prop-types"
 import { useContext } from "react"
+import { Icon, Menu } from "semantic-ui-react"
 
 import { DarkMode } from "../context/DarkMode"
-import { childrenPropType } from "../sharedPropTypes"
+import { Label } from "../semantic_ui_react_wrappers"
 
-export function FocusableTab(props) {
+function FocusableTabIcon({ iconName }) {
+    if (iconName === "linegraph") {
+        /* Using name="linegraph" results in "Invalid prop `name` of value `linegraph` supplied to `Icon`."
+           Using name="line graph" does not show the icon. Using className works around this. */
+        return <Icon className={iconName} />
+    }
+    return <Icon name={iconName} />
+}
+FocusableTabIcon.propTypes = {
+    iconName: string,
+}
+
+function FocusableTab({ error, iconName, label }) {
     const className = useContext(DarkMode) ? "tabbutton inverted" : "tabbutton"
-    return <button className={className}>{props.children}</button>
+    const tabLabel = error ? <Label color="red">{label}</Label> : label
+    return (
+        <>
+            {iconName && <FocusableTabIcon iconName={iconName} />}
+            <button className={className}>{tabLabel}</button>
+        </>
+    )
 }
 FocusableTab.propTypes = {
-    children: childrenPropType,
+    error: bool,
+    iconName: string,
+    label: oneOfType([element, string]),
+}
+
+export function focusableTab(label, iconName, error) {
+    // Return a Menu.Item to be used as menuItem property for a Tab.
+    return (
+        <Menu.Item key={label}>
+            <FocusableTab error={error} iconName={iconName} label={label} />
+        </Menu.Item>
+    )
+}
+
+export function configurationTab(error) {
+    return focusableTab("Configuration", "settings", error)
+}
+
+export function changelogTab() {
+    return focusableTab("Changelog", "history")
 }
diff --git a/components/frontend/src/widgets/FocusableTab.test.js b/components/frontend/src/widgets/FocusableTab.test.js
index c0bfbedfe2..50e1332aa2 100644
--- a/components/frontend/src/widgets/FocusableTab.test.js
+++ b/components/frontend/src/widgets/FocusableTab.test.js
@@ -1,18 +1,14 @@
 import { render, screen } from "@testing-library/react"
 
 import { DarkMode } from "../context/DarkMode"
-import { FocusableTab } from "./FocusableTab"
+import { focusableTab } from "./FocusableTab"
 
 it("shows the tab", () => {
-    render(<FocusableTab>Tab</FocusableTab>)
+    render(<DarkMode.Provider value={false}>{focusableTab("Tab")}</DarkMode.Provider>)
     expect(screen.queryAllByText("Tab").length).toBe(1)
 })
 
 it("is inverted in dark mode", () => {
-    const { container } = render(
-        <DarkMode.Provider value={true}>
-            <FocusableTab>Tab</FocusableTab>
-        </DarkMode.Provider>,
-    )
-    expect(container.firstChild.className).toEqual(expect.stringContaining("inverted"))
+    const { container } = render(<DarkMode.Provider value={true}>{focusableTab("Tab")}</DarkMode.Provider>)
+    expect(container.firstChild.firstChild.className).toEqual(expect.stringContaining("inverted"))
 })
diff --git a/components/frontend/src/widgets/TabPane.js b/components/frontend/src/widgets/TabPane.js
new file mode 100644
index 0000000000..3d1ce5f755
--- /dev/null
+++ b/components/frontend/src/widgets/TabPane.js
@@ -0,0 +1,8 @@
+import { Tab } from "../semantic_ui_react_wrappers"
+
+export function tabPane(tab, pane) {
+    return {
+        menuItem: tab,
+        render: () => <Tab.Pane>{pane}</Tab.Pane>,
+    }
+}