diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29181c985d..2bdffa8348 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,8 @@ For details about compatibility between different releases, see the **Commitment
 
 ### Fixed
 
+- Fix storybook errors.
+
 ### Security
 
 ## [3.37.0] - unreleased
diff --git a/config/storybook/preview-head.html b/config/storybook/preview-head.html
index 25dc6bcf51..36c76273ba 100644
--- a/config/storybook/preview-head.html
+++ b/config/storybook/preview-head.html
@@ -2,6 +2,14 @@
   window.__ttn_config__ = {
     APP_CONFIG: {
       documentation_base_url: 'https://thethingsstack.io',
+      stack_config: {
+        is: { enabled: true },
+        gs: { enabled: true },
+        ns: { enabled: true },
+        as: { enabled: true },
+        js: { enabled: true },
+        gcs: { enabled: true },
+      },
     },
   }
 </script>
diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index 8ab998ce6b..dcdc865699 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -17,9 +17,18 @@
 import React from 'react'
 import { IntlProvider } from 'react-intl'
 import { MemoryRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { configureStore } from '@reduxjs/toolkit'
 
 import messages from '@ttn-lw/locales/en.json'
 import backendMessages from '@ttn-lw/locales/.backend/en.json'
+import rootReducer from '@console/store/reducers'
+
+import { BreadcrumbsProvider } from '@ttn-lw/components/breadcrumbs/context'
+import { AlertBannerProvider } from '@ttn-lw/components/alert-banner/context'
+
+import { EventSplitFrameContextProvider } from '@console/containers/event-split-frame/context'
+import { SidebarContextProvider } from '@console/containers/sidebar/context'
 
 import '../../pkg/webui/styles/main.styl'
 import '../../pkg/webui/styles/utilities/general.styl'
@@ -28,12 +37,34 @@ import '../../pkg/webui/styles/utilities/tokens.styl'
 import 'focus-visible/dist/focus-visible'
 import Center from './center'
 
+document.documentElement.classList.add('light')
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({ serializableCheck: false, immutableCheck: false }),
+})
+
 export const decorators = [
-  Story => (
-    <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
-      <MemoryRouter>
-        <Center>{Story()}</Center>
-      </MemoryRouter>
-    </IntlProvider>
-  ),
+  (Story, { parameters }) => {
+    const Router = parameters.dataRouter ? React.Fragment : MemoryRouter
+
+    return (
+      <Provider store={store}>
+        <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
+          <Router>
+            <BreadcrumbsProvider>
+              <EventSplitFrameContextProvider>
+                <AlertBannerProvider>
+                  <SidebarContextProvider>
+                    <Center>{Story()}</Center>
+                  </SidebarContextProvider>
+                </AlertBannerProvider>
+              </EventSplitFrameContextProvider>
+            </BreadcrumbsProvider>
+          </Router>
+        </IntlProvider>
+      </Provider>
+    )
+  },
 ]
diff --git a/pkg/webui/components/dropdown/story.js b/pkg/webui/components/dropdown/story.js
index bf9f3f9a1e..d2e22b29fa 100644
--- a/pkg/webui/components/dropdown/story.js
+++ b/pkg/webui/components/dropdown/story.js
@@ -14,7 +14,7 @@
 
 import React from 'react'
 
-import { IconUser, IconLogout, IconAdminShield } from '@ttn-lw/components/icon'
+import { IconUser, IconLogout, IconAdminPanel } from '@ttn-lw/components/icon'
 
 import Dropdown from '.'
 
@@ -28,7 +28,7 @@ export const Default = () => (
     <Dropdown open>
       <Dropdown.HeaderItem title="dropdown items" />
       <Dropdown.Item title="Profile Settings" path="profile/path" icon={IconUser} />
-      <Dropdown.Item title="Admin panel" path="admin/path" icon={IconAdminShield} />
+      <Dropdown.Item title="Admin panel" path="admin/path" icon={IconAdminPanel} />
       <hr />
       <Dropdown.Item title="Logout" path="logout/path" icon={IconLogout} />
     </Dropdown>
diff --git a/pkg/webui/components/header/story.js b/pkg/webui/components/header/story.js
index 923954293b..f477638650 100644
--- a/pkg/webui/components/header/story.js
+++ b/pkg/webui/components/header/story.js
@@ -19,7 +19,7 @@ import TtsLogo from '@assets/static/tts-logo.svg'
 import {
   IconUser,
   IconLogout,
-  IconAdminShield,
+  IconAdminPanel,
   IconCreditCard,
   IconChartBar,
   IconBook,
@@ -31,7 +31,6 @@ import {
 } from '@ttn-lw/components/icon'
 import Dropdown from '@ttn-lw/components/dropdown'
 import ExampleLogo from '@ttn-lw/components/logo/story-logo-new.svg'
-import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
 
 import Header from '.'
 
@@ -59,7 +58,7 @@ const plusDropdownItems = (
   </>
 )
 
-const starDropdownItems = (
+const bookmarkDropdownItems = (
   <>
     <Dropdown.Item title="Parking Lot Occupancy" icon={IconApplication} path="/parking1" />
     <Dropdown.Item title="Parking Lot Occupancy" icon={IconApplication} path="/parking2" />
@@ -79,7 +78,7 @@ const profileDropdownItems = (
       path="/manage-cloud-subs"
     />
     <Dropdown.Item title="Network Operations Center" icon={IconChartBar} path="/network_ops" />
-    <Dropdown.Item title="Admin panel" icon={IconAdminShield} path="/admin-panel" />
+    <Dropdown.Item title="Admin panel" icon={IconAdminPanel} path="/admin-panel" />
     <hr />
     <Dropdown.Item title="Upgrade" icon={IconRocket} path="/upgrade" />
     <Dropdown.Item title="Get support" icon={IconSupport} path="/support" />
@@ -89,24 +88,21 @@ const profileDropdownItems = (
   </>
 )
 
-export const Default = () => {
-  const breadcrumbs = [
-    <Breadcrumb key="1" path="/applications" content="Applications" />,
-    <Breadcrumb key="2" path="/applications/test-app" content="test-app" />,
-    <Breadcrumb key="3" path="/applications/test-app/devices" content="Devices" />,
-  ]
+// eslint-disable-next-line react/prop-types
+const Logo = ({ className }) => <img src={TtsLogo} alt="Logo" className={className} />
 
-  return (
-    <div style={{ height: '25rem' }}>
-      <Header
-        user={user}
-        breadcrumbs={breadcrumbs}
-        profileDropdownItems={profileDropdownItems}
-        addDropdownItems={plusDropdownItems}
-        starDropdownItems={starDropdownItems}
-        brandLogo={{ src: ExampleLogo, alt: 'Secondary Logo' }}
-        logo={{ src: TtsLogo, alt: 'Logo' }}
-      />
-    </div>
-  )
-}
+export const Default = () => (
+  <div style={{ height: '25rem' }}>
+    <Header
+      user={user}
+      profileDropdownItems={profileDropdownItems}
+      addDropdownItems={plusDropdownItems}
+      bookmarkDropdownItems={bookmarkDropdownItems}
+      brandLogo={{ src: ExampleLogo, alt: 'Secondary Logo' }}
+      Logo={Logo}
+      isSidebarMinimized={false}
+      toggleSidebarMinimized={() => null}
+      expandSidebar={() => null}
+    />
+  </div>
+)
diff --git a/pkg/webui/components/icon/story.js b/pkg/webui/components/icon/story.js
index fd6b67d887..bb8747bca0 100644
--- a/pkg/webui/components/icon/story.js
+++ b/pkg/webui/components/icon/story.js
@@ -14,32 +14,46 @@
 
 import React from 'react'
 
-import Icon, { IconDevice } from '@ttn-lw/components/icon'
+import Icon, {
+  IconApplication,
+  IconLiveData,
+  IconDevice,
+  IconGateway,
+  IconGeneralSettings,
+  IconIntegration,
+  IconLock,
+  IconLockOpen,
+  IconMenu2,
+  IconOrganization,
+  IconOverview,
+  IconSort,
+  IconTransform,
+  IconX,
+} from '@ttn-lw/components/icon'
 
 import style from './story.styl'
 
-const icons = [
-  'device',
-  'integration',
-  'settings',
-  'lock',
-  'lock_open',
-  'close',
-  'menu',
-  'dashboard',
-  'transform',
-  'data',
-  'sort',
-  'overview',
-  'application',
-  'gateway',
-  'organization',
-]
+const icons = {
+  IconDevice,
+  IconIntegration,
+  IconGeneralSettings,
+  IconLock,
+  IconLockOpen,
+  IconX,
+  IconMenu2,
+  IconTransform,
+  IconLiveData,
+  IconSort,
+  IconOverview,
+  IconApplication,
+  IconGateway,
+  IconOrganization,
+}
 
-const iconElement = icons.map(icon => (
-  <div className={style.wrapper} key={icon}>
+const iconElement = Object.entries(icons).map(([name, icon]) => (
+  <div className={style.wrapper} key={name}>
     <Icon icon={icon} />
-    {icon}
+    {name}
   </div>
 ))
 
diff --git a/pkg/webui/components/profile-dropdown/story.js b/pkg/webui/components/profile-dropdown/story.js
index 5f67a63b31..c447e773de 100644
--- a/pkg/webui/components/profile-dropdown/story.js
+++ b/pkg/webui/components/profile-dropdown/story.js
@@ -17,7 +17,7 @@ import React from 'react'
 import {
   IconUser,
   IconLogout,
-  IconAdminShield,
+  IconAdminPanel,
   IconCreditCard,
   IconChartBar,
   IconBook,
@@ -49,7 +49,7 @@ export const Default = () => (
         path="/manage-cloud-subs"
       />
       <Dropdown.Item title="Network Operations Center" icon={IconChartBar} path="/network_ops" />
-      <Dropdown.Item title="Admin panel" icon={IconAdminShield} path="/admin-panel" />
+      <Dropdown.Item title="Admin panel" icon={IconAdminPanel} path="/admin-panel" />
       <hr />
       <Dropdown.Item title="Upgrade" icon={IconRocket} path="/upgrade" />
       <Dropdown.Item title="Get support" icon={IconSupport} path="/support" />
diff --git a/pkg/webui/components/progress-bar/index.js b/pkg/webui/components/progress-bar/index.js
index b300238e94..595f0f4a06 100644
--- a/pkg/webui/components/progress-bar/index.js
+++ b/pkg/webui/components/progress-bar/index.js
@@ -17,7 +17,7 @@ import classnames from 'classnames'
 import { defineMessages } from 'react-intl'
 
 import Message from '@ttn-lw/lib/components/message'
-import RelativeDateTime from '@ttn-lw/lib/components/date-time/relative'
+import DateTime from '@ttn-lw/lib/components/date-time'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -67,11 +67,11 @@ const ProgressBar = props => {
     displayEstimation =
       !showEstimation ||
       estimations < 3 || // Avoid inaccurate early estimations.
-      estimatedDuration === Infinity ||
+      !Number.isFinite(estimatedDuration) ||
       !startTime ? null : (
         <div>
           <span>
-            Estimated completion <RelativeDateTime value={eta} />
+            Estimated completion <DateTime.Relative value={eta} />
           </span>
         </div>
       )
@@ -107,11 +107,7 @@ const ProgressBar = props => {
           )}
           {children}
           {props.percentage !== undefined && (
-            <Message
-              component="div"
-              content={m.percentage}
-              values={{ percentage: displayPercentage }}
-            />
+            <Message component="div" content={m.percentage} values={{ percentage: fraction }} />
           )}
           {displayEstimation}
         </div>
diff --git a/pkg/webui/components/prompt/story.js b/pkg/webui/components/prompt/story.js
index e286b7eb92..e783a6d256 100644
--- a/pkg/webui/components/prompt/story.js
+++ b/pkg/webui/components/prompt/story.js
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React from 'react'
+import { createMemoryRouter, RouterProvider } from 'react-router-dom'
 import { action } from '@storybook/addon-actions'
 
 import Link from '@ttn-lw/components/link'
@@ -28,9 +29,11 @@ const linkContainerStyle = {
 export default {
   title: 'Prompt',
   component: Prompt,
+  // The `Prompt` component requires a data router.
+  parameters: { dataRouter: true },
 }
 
-export const Default = () => (
+const Content = () => (
   <div>
     Navigate using the links below to trigger the `Prompt` component to appear.
     <div style={linkContainerStyle}>
@@ -64,3 +67,7 @@ export const Default = () => (
     </Prompt>
   </div>
 )
+
+const router = createMemoryRouter([{ path: '*', element: <Content /> }])
+
+export const Default = () => <RouterProvider router={router} />
diff --git a/pkg/webui/components/stepper/step/index.js b/pkg/webui/components/stepper/step/index.js
index 9ab2043de0..177189dfe7 100644
--- a/pkg/webui/components/stepper/step/index.js
+++ b/pkg/webui/components/stepper/step/index.js
@@ -15,7 +15,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Icon, { IconCicleCheck, IconX } from '@ttn-lw/components/icon'
+import Icon, { IconCircleCheck, IconX } from '@ttn-lw/components/icon'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -48,7 +48,7 @@ const Step = props => {
 
   let label
   if (isSuccess) {
-    label = <Icon icon={IconCicleCheck} nudgeDown />
+    label = <Icon icon={IconCircleCheck} nudgeDown />
   } else if (isFailure) {
     label = <Icon icon={IconX} nudgeDown />
   } else {
diff --git a/pkg/webui/components/submit-bar/story.js b/pkg/webui/components/submit-bar/story.js
index 56b6b6db33..2c7385a1b1 100644
--- a/pkg/webui/components/submit-bar/story.js
+++ b/pkg/webui/components/submit-bar/story.js
@@ -14,7 +14,7 @@
 
 import React from 'react'
 
-import { IconCicleCheck, IconTrash } from '@ttn-lw/components/icon'
+import { IconCircleCheck, IconTrash } from '@ttn-lw/components/icon'
 import Button from '@ttn-lw/components/button'
 
 import SubmitBar from '.'
@@ -25,13 +25,13 @@ export default {
 
 export const OnlySubmit = () => (
   <SubmitBar>
-    <Button message="Save Changes" icon={IconCicleCheck} primary />
+    <Button message="Save Changes" icon={IconCircleCheck} primary />
   </SubmitBar>
 )
 
 export const SubmitAndReset = () => (
   <SubmitBar>
-    <Button message="Save Changes" icon={IconCicleCheck} primary />
+    <Button message="Save Changes" icon={IconCircleCheck} primary />
     <Button message="Delete" icon={IconTrash} naked danger />
   </SubmitBar>
 )
@@ -42,7 +42,7 @@ SubmitAndReset.story = {
 
 export const SubmitAndText = () => (
   <SubmitBar align="start">
-    <Button message="Save Changes" icon={IconCicleCheck} primary />
+    <Button message="Save Changes" icon={IconCircleCheck} primary />
     <SubmitBar.Message content="Note: End device level message payload formats take precedence over application level message payload formats" />
   </SubmitBar>
 )
diff --git a/pkg/webui/components/tabs/story.js b/pkg/webui/components/tabs/story.js
index 9caf497be4..0bf823decf 100644
--- a/pkg/webui/components/tabs/story.js
+++ b/pkg/webui/components/tabs/story.js
@@ -17,7 +17,7 @@
 import React, { Component } from 'react'
 import bind from 'autobind-decorator'
 
-import { IconData, IconOrganization } from '@ttn-lw/components/icon'
+import { IconLiveData, IconOrganization } from '@ttn-lw/components/icon'
 
 import Tabs from '.'
 
@@ -85,7 +85,7 @@ DefaultNarrow.story = {
 export const WithIcons = () => {
   const tabs = [
     { title: 'People', name: 'people', icon: IconOrganization },
-    { title: 'Data', name: 'data', icon: IconData },
+    { title: 'Data', name: 'data', icon: IconLiveData },
   ]
 
   return <Example tabs={tabs} active={tabs[0].name} divider />
@@ -98,7 +98,7 @@ WithIcons.story = {
 export const WithIconsDisabled = () => {
   const tabs = [
     { title: 'People', name: 'people', icon: IconOrganization },
-    { title: 'Data', name: 'data', icon: IconData, disabled: true },
+    { title: 'Data', name: 'data', icon: IconLiveData, disabled: true },
   ]
 
   return <Example tabs={tabs} active={tabs[0].name} />
diff --git a/pkg/webui/console/components/webhook-form/index.js b/pkg/webui/console/components/webhook-form/index.js
index 99404358dd..96e5e079a0 100644
--- a/pkg/webui/console/components/webhook-form/index.js
+++ b/pkg/webui/console/components/webhook-form/index.js
@@ -18,7 +18,13 @@ import { uniq } from 'lodash'
 
 import tts from '@console/api/tts'
 
-import { IconTrash, IconRefresh, IconPlayerPlay, IconPlayerPause } from '@ttn-lw/components/icon'
+import {
+  IconTrash,
+  IconRefresh,
+  IconPlayerPlay,
+  IconPlayerPause,
+  IconX,
+} from '@ttn-lw/components/icon'
 import Form from '@ttn-lw/components/form'
 import Input from '@ttn-lw/components/input'
 import SubmitBar from '@ttn-lw/components/submit-bar'
@@ -671,7 +677,7 @@ const WebhookForm = props => {
                     buttonMessage: m.pauseWebhook,
                     children: <Message content={m.pauseWebhookDescription} component="span" />,
                     approveButtonProps: {
-                      icon: 'close',
+                      icon: IconX,
                       danger: false,
                     },
                   }}
diff --git a/pkg/webui/console/containers/gateway-onboarding-form/qr-scan-section/index.js b/pkg/webui/console/containers/gateway-onboarding-form/qr-scan-section/index.js
index 64c02bed9f..567115ba1c 100644
--- a/pkg/webui/console/containers/gateway-onboarding-form/qr-scan-section/index.js
+++ b/pkg/webui/console/containers/gateway-onboarding-form/qr-scan-section/index.js
@@ -132,7 +132,7 @@ const GatewayQRScanSection = () => {
         {qrData.approved ? (
           <ModalButton
             type="button"
-            icon="close"
+            icon={IconX}
             onApprove={handleReset}
             message={sharedMessages.qrCodeDataReset}
             modalData={{
diff --git a/pkg/webui/console/containers/mac-settings-profile-form/index.js b/pkg/webui/console/containers/mac-settings-profile-form/index.js
index 119c5cd4cd..ad2083b92b 100644
--- a/pkg/webui/console/containers/mac-settings-profile-form/index.js
+++ b/pkg/webui/console/containers/mac-settings-profile-form/index.js
@@ -25,7 +25,7 @@ import Checkbox from '@ttn-lw/components/checkbox'
 import UnitInput from '@ttn-lw/components/unit-input'
 import Select from '@ttn-lw/components/select'
 import KeyValueMap from '@ttn-lw/components/key-value-map'
-import Icon, { IconPlus, IconTrash } from '@ttn-lw/components/icon'
+import Icon, { IconInfoCircle, IconPlus, IconTrash } from '@ttn-lw/components/icon'
 import Button from '@ttn-lw/components/button'
 import SubmitBar from '@ttn-lw/components/submit-bar'
 import SubmitButton from '@ttn-lw/components/submit-button'
@@ -469,7 +469,7 @@ const MACSettingsProfileInnerForm = ({ edit }) => {
               </Form.FieldContainer>
               {!defaultNbTransDisabled && (
                 <div>
-                  <Icon icon="info" nudgeUp className="mr-cs-xxs" />
+                  <Icon icon={IconInfoCircle} nudgeUp className="mr-cs-xxs" />
                   <Message content={sharedMessages.defaultNbTransMessage} />
                 </div>
               )}
diff --git a/pkg/webui/console/containers/sidebar/story.js b/pkg/webui/console/containers/sidebar/story.js
index 13250baeb4..f0d4f3e20e 100644
--- a/pkg/webui/console/containers/sidebar/story.js
+++ b/pkg/webui/console/containers/sidebar/story.js
@@ -18,7 +18,7 @@ import classnames from 'classnames'
 import TtsLogo from '@assets/static/tts-logo.svg'
 
 import {
-  IconData,
+  IconLiveData,
   IconApiKeys,
   IconGeneralSettings,
   IconMap,
@@ -35,6 +35,9 @@ import SidebarContext from '@console/containers/sidebar/context'
 
 import style from './sidebar.styl'
 
+// eslint-disable-next-line react/prop-types
+const Logo = ({ className }) => <img src={TtsLogo} alt="logo" className={className} />
+
 export default {
   title: 'Sidebar/Sidebar',
   decorators: [
@@ -67,12 +70,12 @@ export const Default = () => (
     )}
     style={{ width: '17rem', height: '96vh' }}
   >
-    <SideHeader logo={{ src: TtsLogo, alt: 'logo' }} />
+    <SideHeader Logo={Logo} />
     <Switcher />
     <SearchButton />
     <SideNavigation className="mt-cs-xs">
       <SideNavigation.Item title="Overview" path="" icon={IconOverview} exact />
-      <SideNavigation.Item title="Live data" path="data" icon={IconData} />
+      <SideNavigation.Item title="Live data" path="data" icon={IconLiveData} />
       <SideNavigation.Item title="Location" path="location" icon={IconMap} />
       <SideNavigation.Item title="Collaborators" path="collaborators" icon={IconOrganization} />
       <SideNavigation.Item title="API keys" path="api-keys" icon={IconApiKeys} />
diff --git a/pkg/webui/lib/components/date-time/story.js b/pkg/webui/lib/components/date-time/story.js
index e53ccba307..53d6e1402d 100644
--- a/pkg/webui/lib/components/date-time/story.js
+++ b/pkg/webui/lib/components/date-time/story.js
@@ -16,7 +16,7 @@
 
 import React from 'react'
 
-import RelativeDateTime from './relative'
+import DateTime from '.'
 
 const Example = ({ title, unit, ago }) => {
   const date = new Date()
@@ -35,7 +35,7 @@ const Example = ({ title, unit, ago }) => {
   return (
     <div>
       <h3>{title}:</h3>
-      <RelativeDateTime value={date} />
+      <DateTime.Relative value={date} />
       <hr />
     </div>
   )