diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css
index 3fc37f1ce0..7544dd183d 100644
--- a/.storybook/themes/spotify.css
+++ b/.storybook/themes/spotify.css
@@ -1 +1,284 @@
-/* Placeholder for custom Spotify-like theme tweaks applied to the Storybook chrome */
+@font-face {
+  font-family: CircularSpTitle;
+  font-weight: 900;
+  font-display: swap;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
+    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
+    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
+    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
+    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
+    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
+    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
+    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
+    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
+    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
+    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
+    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
+    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
+    U+FFFF;
+  src: url('https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2')
+      format('woff2'),
+    url('https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff')
+      format('woff');
+}
+@font-face {
+  font-family: CircularSpTitle;
+  font-weight: 700;
+  font-display: swap;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
+    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
+    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
+    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
+    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
+    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
+    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
+    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
+    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
+    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
+    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
+    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
+    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
+    U+FFFF;
+  src: url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2')
+      format('woff2'),
+    url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff')
+      format('woff');
+}
+@font-face {
+  font-family: CircularSp;
+  font-weight: 700;
+  font-display: swap;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
+    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
+    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
+    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
+    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
+    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
+    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
+    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
+    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
+    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
+    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
+    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
+    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
+    U+FFFF;
+  src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
+      format('woff2'),
+    url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
+      format('woff');
+}
+@font-face {
+  font-family: CircularSp;
+  font-weight: 400;
+  font-display: swap;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
+    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
+    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
+    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
+    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
+    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
+    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
+    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
+    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
+    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
+    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
+    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
+    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
+    U+FFFF;
+  src: url('https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2')
+      format('woff2'),
+    url('https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff')
+      format('woff');
+}
+
+@font-face {
+  font-family: CircularSp;
+  font-weight: 700;
+  font-display: swap;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
+    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
+    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
+    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
+    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
+    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
+    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
+    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
+    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
+    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
+    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
+    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
+    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
+    U+FFFF;
+  src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
+      format('woff2'),
+    url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
+      format('woff');
+}
+
+[data-theme-name='spotify'] {
+  --bui-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
+    CircularSp-Grek, CircularSp-Deva;
+  --bui-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
+    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
+  --bui-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
+    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
+
+  .bui-Button {
+    border-radius: var(--bui-radius-3);
+    padding-inline: var(--bui-space-3);
+  }
+
+  .bui-ButtonIcon {
+    padding: 0;
+  }
+
+  .bui-MenuPopup {
+    box-sizing: border-box;
+    max-width: 21.25rem;
+  }
+
+  .bui-MenuSubmenuTrigger,
+  .bui-MenuItem {
+    height: auto;
+    min-height: 2rem;
+  }
+
+  .bui-Text {
+    font-family: var(--bui-font-text);
+  }
+
+  .bui-Heading {
+    font-family: var(--bui-font-title);
+  }
+
+  .bui-TableRow {
+    border: none;
+    border-radius: var(--bui-radius-4);
+  }
+
+  .bui-TableRow:hover td:first-child {
+    border-top-left-radius: var(--bui-radius-2);
+    border-bottom-left-radius: var(--bui-radius-2);
+  }
+
+  .bui-TableRow:hover td:last-child {
+    border-top-right-radius: var(--bui-radius-2);
+    border-bottom-right-radius: var(--bui-radius-2);
+  }
+
+  .bui-TableBody:before,
+  .bui-TableBody:after {
+    line-height: var(--bui-space-1);
+    content: '\200C';
+    display: block;
+  }
+
+  .bui-TableHeader .bui-TableRow {
+    border-bottom: 1px solid var(--bui-border);
+  }
+
+  .bui-TableHead {
+    font-size: var(--bui-font-size-2);
+    color: var(--bui-fg-secondary);
+    font-weight: var(--bui-font-weight-regular);
+  }
+
+  .bui-HeaderToolbar {
+    padding-top: var(--bui-space-2);
+    padding-inline: var(--bui-space-2);
+  }
+
+  .bui-HeaderToolbarWrapper {
+    border-radius: var(--bui-radius-3);
+    padding-inline: var(--bui-space-3);
+    border: none;
+  }
+
+  .bui-HeaderToolbarControls {
+    right: calc(var(--bui-space-3) - 1px);
+  }
+
+  .bui-HeaderTabsWrapper {
+    margin-top: var(--bui-space-2);
+    margin-inline: var(--bui-space-2);
+    border-radius: var(--bui-radius-3);
+    padding-inline: var(--bui-space-1);
+    border: none;
+  }
+
+  .bui-Input {
+    border-radius: var(--bui-radius-3);
+  }
+}
+
+[data-theme-mode='light'][data-theme-name='spotify'] {
+  --bui-bg: var(--bui-gray-1);
+  --bui-bg-surface-1: var(--bui-white);
+  --bui-bg-surface-2: var(--bui-gray-2);
+  --bui-bg-solid: #1ed760;
+  --bui-bg-solid-hover: #3be477;
+  --bui-bg-solid-pressed: #1abc54;
+  --bui-bg-solid-disabled: var(--bui-gray-2);
+
+  --bui-fg-primary: var(--bui-black);
+  --bui-fg-secondary: var(--bui-gray-7);
+  --bui-fg-solid: var(--bui-black);
+
+  --bui-border: var(--bui-gray-3);
+  --bui-border-hover: rgba(0, 0, 0, 0.3);
+  --bui-border-pressed: rgba(0, 0, 0, 0.5);
+  --bui-border-disabled: rgba(0, 0, 0, 0.1);
+  --bui-border-danger: #f87a7a;
+  --bui-border-warning: #e36d05;
+  --bui-border-success: #53db83;
+
+  --bui-ring: rgba(0, 0, 0, 0.2);
+
+  .bui-HeaderToolbarWrapper {
+    border: 1px solid var(--bui-border);
+  }
+
+  .bui-HeaderTabsWrapper {
+    border: 1px solid var(--bui-border);
+  }
+}
+
+[data-theme-mode='dark'][data-theme-name='spotify'] {
+  --bui-bg: var(--bui-black);
+  --bui-bg-surface-1: var(--bui-gray-1);
+  --bui-bg-surface-2: var(--bui-gray-2);
+  --bui-bg-solid: #1ed760;
+  --bui-bg-solid-hover: #3be477;
+  --bui-bg-solid-pressed: #1abc54;
+  --bui-bg-solid-disabled: #0f6c30;
+  --bui-bg-tint: #242424;
+  --bui-bg-tint-hover: #202020;
+  --bui-bg-tint-pressed: #292929;
+  --bui-bg-tint-disabled: rgba(255, 255, 255, 0.8);
+  --bui-bg-danger: #3b1219;
+  --bui-bg-warning: #302008;
+  --bui-bg-success: #132d21;
+
+  --bui-fg-primary: var(--bui-white);
+  --bui-fg-secondary: var(--bui-gray-7);
+  --bui-fg-link: var(--bui-white);
+  --bui-fg-link-hover: var(--bui-white);
+  --bui-fg-disabled: var(--bui-gray-5);
+  --bui-fg-solid: var(--bui-black);
+  --bui-fg-solid-disabled: #083618;
+  --bui-fg-tint: var(--bui-white);
+  --bui-fg-tint-disabled: var(--bui-gray-5);
+  --bui-fg-danger: #e22b2b;
+  --bui-fg-warning: #e36d05;
+  --bui-fg-success: #1db954;
+
+  --bui-border: var(--bui-gray-3);
+  --bui-border-hover: rgba(255, 255, 255, 0.4);
+  --bui-border-pressed: rgba(255, 255, 255, 0.5);
+  --bui-border-disabled: rgba(255, 255, 255, 0.2);
+  --bui-border-danger: #f87a7a;
+  --bui-border-warning: #e36d05;
+  --bui-border-success: #53db83;
+
+  --bui-ring: rgba(255, 255, 255, 0.2);
+}
diff --git a/docs-ui/scripts/sync-css.js b/docs-ui/scripts/sync-css.js
index 23e159db85..4763fdecc1 100644
--- a/docs-ui/scripts/sync-css.js
+++ b/docs-ui/scripts/sync-css.js
@@ -14,7 +14,7 @@ const config = {
       name: 'Main Styles',
     },
     {
-      source: '../../storybook/.storybook/themes/spotify.css',
+      source: '../../.storybook/themes/spotify.css',
       destination: 'theme-spotify.css',
       name: 'Spotify Theme',
     },
diff --git a/storybook/.gitignore b/storybook/.gitignore
deleted file mode 100644
index bc6d3062c4..0000000000
--- a/storybook/.gitignore
+++ /dev/null
@@ -1,26 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*storybook.log
\ No newline at end of file
diff --git a/storybook/.npmrc b/storybook/.npmrc
deleted file mode 100644
index c3c66347fd..0000000000
--- a/storybook/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-registry=https://registry.npmjs.org/
-engine-strict=true
diff --git a/storybook/.storybook/apis.js b/storybook/.storybook/apis.js
deleted file mode 100644
index 905c5f2dc8..0000000000
--- a/storybook/.storybook/apis.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  AlertApiForwarder,
-  ErrorAlerter,
-  ErrorApiForwarder,
-  GithubAuth,
-  GitlabAuth,
-  GoogleAuth,
-  OAuthRequestManager,
-  OktaAuth,
-  ConfigReader,
-  LocalStorageFeatureFlags,
-} from '@backstage/core-app-api';
-
-import {
-  alertApiRef,
-  errorApiRef,
-  githubAuthApiRef,
-  gitlabAuthApiRef,
-  googleAuthApiRef,
-  identityApiRef,
-  oauthRequestApiRef,
-  oktaAuthApiRef,
-  configApiRef,
-  featureFlagsApiRef,
-} from '@backstage/core-plugin-api';
-
-import { translationApiRef } from '@backstage/core-plugin-api/alpha';
-import { MockTranslationApi } from '@backstage/test-utils/alpha';
-
-const configApi = new ConfigReader({});
-const featureFlagsApi = new LocalStorageFeatureFlags();
-const alertApi = new AlertApiForwarder();
-const errorApi = new ErrorAlerter(alertApi, new ErrorApiForwarder());
-const identityApi = {
-  getUserId: () => 'guest',
-  getProfile: () => ({ email: 'guest@example.com' }),
-  getIdToken: () => undefined,
-  signOut: async () => {},
-};
-const oauthRequestApi = new OAuthRequestManager();
-const googleAuthApi = GoogleAuth.create({
-  apiOrigin: 'http://localhost:7007',
-  basePath: '/auth/',
-  oauthRequestApi,
-});
-const githubAuthApi = GithubAuth.create({
-  apiOrigin: 'http://localhost:7007',
-  basePath: '/auth/',
-  oauthRequestApi,
-});
-const gitlabAuthApi = GitlabAuth.create({
-  apiOrigin: 'http://localhost:7007',
-  basePath: '/auth/',
-  oauthRequestApi,
-});
-const oktaAuthApi = OktaAuth.create({
-  apiOrigin: 'http://localhost:7007',
-  basePath: '/auth/',
-  oauthRequestApi,
-});
-const translationApi = MockTranslationApi.create();
-
-export const apis = [
-  [configApiRef, configApi],
-  [featureFlagsApiRef, featureFlagsApi],
-  [alertApiRef, alertApi],
-  [errorApiRef, errorApi],
-  [identityApiRef, identityApi],
-  [oauthRequestApiRef, oauthRequestApi],
-  [googleAuthApiRef, googleAuthApi],
-  [githubAuthApiRef, githubAuthApi],
-  [gitlabAuthApiRef, gitlabAuthApi],
-  [oktaAuthApiRef, oktaAuthApi],
-  [translationApiRef, translationApi],
-];
diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
deleted file mode 100644
index b62bd48df2..0000000000
--- a/storybook/.storybook/main.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-import { join, dirname, posix } from 'path';
-
-/**
- * This set of stories are the ones that we publish to backstage.io.
- */
-const backstageCoreStories = [
-  'packages/ui',
-  'packages/core-components',
-  'packages/app',
-  'plugins/org',
-  'plugins/search',
-  'plugins/search-react',
-  'plugins/home',
-  'plugins/catalog-react',
-];
-
-const rootPath = '../../';
-const storiesSrcMdx = 'src/**/*.mdx';
-const storiesSrcGlob = 'src/**/*.stories.@(js|jsx|mjs|ts|tsx)';
-
-const getStoriesPath = (element: string, pattern: string) =>
-  posix.join(rootPath, element, pattern);
-
-const stories = backstageCoreStories.flatMap(element => [
-  getStoriesPath(element, storiesSrcMdx),
-  getStoriesPath(element, storiesSrcGlob),
-]);
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
-
-const config: StorybookConfig = {
-  stories,
-  addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-themes'),
-    getAbsolutePath('@storybook/addon-storysource'),
-  ],
-  framework: {
-    name: getAbsolutePath('@storybook/react-vite'),
-    options: {},
-  },
-};
-export default config;
diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx
deleted file mode 100644
index e8049737b8..0000000000
--- a/storybook/.storybook/preview.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { useEffect } from 'react';
-import { TestApiProvider } from '@backstage/test-utils';
-import { Content, AlertDisplay } from '@backstage/core-components';
-import { apis } from './apis';
-import type { Decorator, Preview, ReactRenderer } from '@storybook/react';
-import { useGlobals } from '@storybook/preview-api';
-import { UnifiedThemeProvider, themes } from '@backstage/theme';
-
-// Default Backstage theme
-import '../../packages/ui/src/css/styles.css';
-
-// Custom mocked styles
-import './storybook.css';
-
-// Custom themes
-import './themes/spotify.css';
-
-const preview: Preview = {
-  globalTypes: {
-    themeMode: {
-      name: 'Theme Mode',
-      description: 'Global theme mode for components',
-      defaultValue: 'light',
-      toolbar: {
-        icon: 'circlehollow',
-        items: [
-          { value: 'light', icon: 'circlehollow', title: 'Light' },
-          { value: 'dark', icon: 'circle', title: 'Dark' },
-        ],
-        showName: true,
-        dynamicTitle: true,
-      },
-    },
-    themeName: {
-      name: 'Theme Name',
-      description: 'Global theme name for components',
-      defaultValue: 'backstage',
-      toolbar: {
-        icon: 'paintbrush',
-        items: [
-          { value: 'backstage', title: 'Backstage' },
-          { value: 'spotify', title: 'Spotify' },
-        ],
-        showName: true,
-        dynamicTitle: true,
-      },
-    },
-  },
-  initialGlobals: {
-    themeMode: 'light',
-    themeName: 'backstage',
-  },
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: {
-      disable: true,
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    options: {
-      storySort: {
-        order: ['Backstage UI', 'Plugins', 'Layout', 'Navigation'],
-      },
-    },
-    viewport: {
-      viewports: {
-        initial: {
-          name: 'Initial',
-          styles: {
-            width: '320px',
-            height: '100%',
-          },
-        },
-        xs: {
-          name: 'Extra Small',
-          styles: {
-            width: '640px',
-            height: '100%',
-          },
-        },
-        sm: {
-          name: 'Small',
-          styles: {
-            width: '768px',
-            height: '100%',
-          },
-        },
-        md: {
-          name: 'Medium',
-          styles: {
-            width: '1024px',
-            height: '100%',
-          },
-        },
-        lg: {
-          name: 'Large',
-          styles: {
-            width: '1280px',
-            height: '100%',
-          },
-        },
-        xl: {
-          name: 'Extra Large',
-          styles: {
-            width: '1536px',
-            height: '100%',
-          },
-        },
-      },
-    },
-  },
-  decorators: [
-    Story => {
-      const [globals] = useGlobals();
-      const selectedTheme =
-        globals.themeMode === 'light' ? themes.light : themes.dark;
-
-      const selectedThemeMode = globals.themeMode || 'light';
-      const selectedThemeName = globals.themeName || 'backstage';
-
-      useEffect(() => {
-        // Remove any existing theme data attributes
-        document.body.removeAttribute('data-theme-mode');
-        document.body.removeAttribute('data-theme-name');
-
-        // Add the selected theme data attribute
-        document.body.setAttribute('data-theme-mode', selectedThemeMode);
-        document.body.setAttribute('data-theme-name', selectedThemeName);
-
-        // Cleanup on unmount
-        return () => {
-          document.body.removeAttribute('data-theme-mode');
-          document.body.removeAttribute('data-theme-name');
-        };
-      }, [selectedTheme, selectedThemeName]);
-
-      document.body.style.backgroundColor = 'var(--bui-bg)';
-
-      const docsStoryElements = document.getElementsByClassName('docs-story');
-      Array.from(docsStoryElements).forEach(element => {
-        (element as HTMLElement).style.backgroundColor = 'var(--bui-bg)';
-      });
-
-      return (
-        <UnifiedThemeProvider theme={selectedTheme}>
-          {/* @ts-ignore - TODO: Fix this */}
-          <TestApiProvider apis={apis}>
-            <AlertDisplay />
-            <Content>
-              <Story />
-            </Content>
-          </TestApiProvider>
-        </UnifiedThemeProvider>
-      );
-    },
-  ],
-};
-
-export default preview;
diff --git a/storybook/.storybook/storybook.css b/storybook/.storybook/storybook.css
deleted file mode 100644
index e69c4a8eb1..0000000000
--- a/storybook/.storybook/storybook.css
+++ /dev/null
@@ -1,38 +0,0 @@
-:root {
-  --sb-panel-radius: 0;
-  --sb-panel-top: 0;
-  --sb-panel-bottom: 0;
-  --sb-panel-left: 0;
-  --sb-panel-right: 0;
-  --sb-sidebar-border: none;
-  --sb-sidebar-border-right: 1px solid var(--bui-border);
-  --sb-sidebar-bg: #000;
-  --sb-options-border: none;
-  --sb-options-border-left: 1px solid var(--bui-border);
-  --sb-content-padding-inline: 250px;
-}
-
-[data-theme-mode='dark'] {
-  --sb-sidebar-bg: var(--bui-bg-surface-1);
-}
-
-[data-theme-name='spotify'] {
-  --sb-panel-radius: var(--bui-radius-3);
-  --sb-panel-top: 8px;
-  --sb-panel-bottom: 8px;
-  --sb-panel-left: 8px;
-  --sb-panel-right: 8px;
-  --sb-sidebar-border: none;
-  --sb-sidebar-border-right: none;
-  --sb-sidebar-bg: var(--bui-bg-surface-1);
-  --sb-options-border: none;
-  --sb-options-border-left: none;
-  --sb-content-padding-inline: 258px;
-}
-
-[data-theme-name='spotify'][data-theme-mode='light'] {
-  --sb-sidebar-border: 1px solid var(--bui-border);
-  --sb-sidebar-border-right: 1px solid var(--bui-border);
-  --sb-options-border: 1px solid var(--bui-border);
-  --sb-options-border-left: 1px solid var(--bui-border);
-}
diff --git a/storybook/.storybook/themes/spotify.css b/storybook/.storybook/themes/spotify.css
deleted file mode 100644
index 7544dd183d..0000000000
--- a/storybook/.storybook/themes/spotify.css
+++ /dev/null
@@ -1,284 +0,0 @@
-@font-face {
-  font-family: CircularSpTitle;
-  font-weight: 900;
-  font-display: swap;
-  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
-    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
-    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
-    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
-    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
-    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
-    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
-    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
-    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
-    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
-    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
-    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
-    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
-    U+FFFF;
-  src: url('https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2')
-      format('woff2'),
-    url('https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff')
-      format('woff');
-}
-@font-face {
-  font-family: CircularSpTitle;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
-    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
-    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
-    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
-    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
-    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
-    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
-    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
-    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
-    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
-    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
-    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
-    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
-    U+FFFF;
-  src: url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2')
-      format('woff2'),
-    url('https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff')
-      format('woff');
-}
-@font-face {
-  font-family: CircularSp;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
-    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
-    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
-    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
-    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
-    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
-    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
-    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
-    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
-    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
-    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
-    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
-    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
-    U+FFFF;
-  src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
-      format('woff2'),
-    url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
-      format('woff');
-}
-@font-face {
-  font-family: CircularSp;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
-    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
-    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
-    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
-    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
-    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
-    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
-    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
-    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
-    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
-    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
-    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
-    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
-    U+FFFF;
-  src: url('https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2')
-      format('woff2'),
-    url('https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: CircularSp;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
-    U+01A0-01A1, U+01AF-01B0, U+01B5-01B6, U+01C4-01C6, U+01F1-01F3, U+01FA-01FF,
-    U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C6-02C7, U+02C9, U+02D8-02DD,
-    U+0300-0301, U+0303, U+0309, U+0323, U+0394, U+03A9, U+03BC, U+03C0,
-    U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, U+2007-2008, U+200B,
-    U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
-    U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, U+2051, U+2070,
-    U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, U+2122, U+2126,
-    U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, U+21B0-21B5,
-    U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E,
-    U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, U+25A0-25A1, U+25AF,
-    U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, U+2715, U+2780-2788,
-    U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, U+FF0E, U+FF1A-FF1B,
-    U+FFFF;
-  src: url('https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2')
-      format('woff2'),
-    url('https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff')
-      format('woff');
-}
-
-[data-theme-name='spotify'] {
-  --bui-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl,
-    CircularSp-Grek, CircularSp-Deva;
-  --bui-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
-    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
-  --bui-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
-    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
-
-  .bui-Button {
-    border-radius: var(--bui-radius-3);
-    padding-inline: var(--bui-space-3);
-  }
-
-  .bui-ButtonIcon {
-    padding: 0;
-  }
-
-  .bui-MenuPopup {
-    box-sizing: border-box;
-    max-width: 21.25rem;
-  }
-
-  .bui-MenuSubmenuTrigger,
-  .bui-MenuItem {
-    height: auto;
-    min-height: 2rem;
-  }
-
-  .bui-Text {
-    font-family: var(--bui-font-text);
-  }
-
-  .bui-Heading {
-    font-family: var(--bui-font-title);
-  }
-
-  .bui-TableRow {
-    border: none;
-    border-radius: var(--bui-radius-4);
-  }
-
-  .bui-TableRow:hover td:first-child {
-    border-top-left-radius: var(--bui-radius-2);
-    border-bottom-left-radius: var(--bui-radius-2);
-  }
-
-  .bui-TableRow:hover td:last-child {
-    border-top-right-radius: var(--bui-radius-2);
-    border-bottom-right-radius: var(--bui-radius-2);
-  }
-
-  .bui-TableBody:before,
-  .bui-TableBody:after {
-    line-height: var(--bui-space-1);
-    content: '\200C';
-    display: block;
-  }
-
-  .bui-TableHeader .bui-TableRow {
-    border-bottom: 1px solid var(--bui-border);
-  }
-
-  .bui-TableHead {
-    font-size: var(--bui-font-size-2);
-    color: var(--bui-fg-secondary);
-    font-weight: var(--bui-font-weight-regular);
-  }
-
-  .bui-HeaderToolbar {
-    padding-top: var(--bui-space-2);
-    padding-inline: var(--bui-space-2);
-  }
-
-  .bui-HeaderToolbarWrapper {
-    border-radius: var(--bui-radius-3);
-    padding-inline: var(--bui-space-3);
-    border: none;
-  }
-
-  .bui-HeaderToolbarControls {
-    right: calc(var(--bui-space-3) - 1px);
-  }
-
-  .bui-HeaderTabsWrapper {
-    margin-top: var(--bui-space-2);
-    margin-inline: var(--bui-space-2);
-    border-radius: var(--bui-radius-3);
-    padding-inline: var(--bui-space-1);
-    border: none;
-  }
-
-  .bui-Input {
-    border-radius: var(--bui-radius-3);
-  }
-}
-
-[data-theme-mode='light'][data-theme-name='spotify'] {
-  --bui-bg: var(--bui-gray-1);
-  --bui-bg-surface-1: var(--bui-white);
-  --bui-bg-surface-2: var(--bui-gray-2);
-  --bui-bg-solid: #1ed760;
-  --bui-bg-solid-hover: #3be477;
-  --bui-bg-solid-pressed: #1abc54;
-  --bui-bg-solid-disabled: var(--bui-gray-2);
-
-  --bui-fg-primary: var(--bui-black);
-  --bui-fg-secondary: var(--bui-gray-7);
-  --bui-fg-solid: var(--bui-black);
-
-  --bui-border: var(--bui-gray-3);
-  --bui-border-hover: rgba(0, 0, 0, 0.3);
-  --bui-border-pressed: rgba(0, 0, 0, 0.5);
-  --bui-border-disabled: rgba(0, 0, 0, 0.1);
-  --bui-border-danger: #f87a7a;
-  --bui-border-warning: #e36d05;
-  --bui-border-success: #53db83;
-
-  --bui-ring: rgba(0, 0, 0, 0.2);
-
-  .bui-HeaderToolbarWrapper {
-    border: 1px solid var(--bui-border);
-  }
-
-  .bui-HeaderTabsWrapper {
-    border: 1px solid var(--bui-border);
-  }
-}
-
-[data-theme-mode='dark'][data-theme-name='spotify'] {
-  --bui-bg: var(--bui-black);
-  --bui-bg-surface-1: var(--bui-gray-1);
-  --bui-bg-surface-2: var(--bui-gray-2);
-  --bui-bg-solid: #1ed760;
-  --bui-bg-solid-hover: #3be477;
-  --bui-bg-solid-pressed: #1abc54;
-  --bui-bg-solid-disabled: #0f6c30;
-  --bui-bg-tint: #242424;
-  --bui-bg-tint-hover: #202020;
-  --bui-bg-tint-pressed: #292929;
-  --bui-bg-tint-disabled: rgba(255, 255, 255, 0.8);
-  --bui-bg-danger: #3b1219;
-  --bui-bg-warning: #302008;
-  --bui-bg-success: #132d21;
-
-  --bui-fg-primary: var(--bui-white);
-  --bui-fg-secondary: var(--bui-gray-7);
-  --bui-fg-link: var(--bui-white);
-  --bui-fg-link-hover: var(--bui-white);
-  --bui-fg-disabled: var(--bui-gray-5);
-  --bui-fg-solid: var(--bui-black);
-  --bui-fg-solid-disabled: #083618;
-  --bui-fg-tint: var(--bui-white);
-  --bui-fg-tint-disabled: var(--bui-gray-5);
-  --bui-fg-danger: #e22b2b;
-  --bui-fg-warning: #e36d05;
-  --bui-fg-success: #1db954;
-
-  --bui-border: var(--bui-gray-3);
-  --bui-border-hover: rgba(255, 255, 255, 0.4);
-  --bui-border-pressed: rgba(255, 255, 255, 0.5);
-  --bui-border-disabled: rgba(255, 255, 255, 0.2);
-  --bui-border-danger: #f87a7a;
-  --bui-border-warning: #e36d05;
-  --bui-border-success: #53db83;
-
-  --bui-ring: rgba(255, 255, 255, 0.2);
-}