diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx
index 277ecad9df..1d860bd1f4 100644
--- a/canon-docs/src/components/Toolbar/theme-name.tsx
+++ b/canon-docs/src/components/Toolbar/theme-name.tsx
@@ -7,6 +7,7 @@ import { usePlayground } from '@/utils/playground-context';
 
 const themes = [
   { name: 'Backstage', value: 'default' },
+  { name: 'Spotify', value: 'spotify' },
   { name: 'Custom theme', value: 'custom' },
 ];
 
diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx
index 405cdfa093..516f554e12 100644
--- a/packages/canon/.storybook/preview.tsx
+++ b/packages/canon/.storybook/preview.tsx
@@ -1,7 +1,13 @@
+import React from 'react';
 import type { Preview, ReactRenderer } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
+
+// Default Backstage theme
 import '../src/css/styles.css';
 
+// Custom themes
+import './themes/spotify.css';
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -69,10 +75,12 @@ const preview: Preview = {
   decorators: [
     withThemeByDataAttribute<ReactRenderer>({
       themes: {
-        Light: 'light',
-        Dark: 'dark',
+        ['Backstage Light']: 'light',
+        ['Backstage Dark']: 'dark',
+        ['Spotify Light']: 'spotify-light',
+        ['Spotify Dark']: 'spotify-dark',
       },
-      defaultTheme: 'Light',
+      defaultTheme: 'Backstage Light',
     }),
     Story => {
       document.body.style.backgroundColor = 'var(--canon-bg)';
diff --git a/packages/canon/.storybook/themes/spotify.css b/packages/canon/.storybook/themes/spotify.css
new file mode 100644
index 0000000000..b912bb5ea0
--- /dev/null
+++ b/packages/canon/.storybook/themes/spotify.css
@@ -0,0 +1,194 @@
+@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='spotify-dark'] {
+  --canon-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr,
+    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
+  --canon-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
+    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
+  --canon-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
+    CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
+
+  /* Gray scale */
+  --canon-gray-1: #191919;
+  --canon-gray-2: #242424;
+  --canon-gray-3: #373737;
+  --canon-gray-4: #464646;
+  --canon-gray-5: #575757;
+  --canon-gray-6: #7b7b7b;
+  --canon-gray-7: #9e9e9e;
+  --canon-gray-8: #b4b4b4;
+
+  /* Background Colors */
+  --canon-bg: #000000;
+  --canon-bg-surface-1: #191919;
+  --canon-bg-surface-2: #242424;
+  --canon-bg-solid: #1ed760;
+  --canon-bg-solid-hover: #3be477;
+  --canon-bg-solid-pressed: #1abc54;
+  --canon-bg-solid-disabled: #0f6c30;
+  --canon-bg-tint: #242424;
+  --canon-bg-tint-hover: #202020;
+  --canon-bg-tint-pressed: #292929;
+  --canon-bg-tint-disabled: rgba(255, 255, 255, 0.8);
+  --canon-bg-danger: #3b1219;
+  --canon-bg-warning: #302008;
+  --canon-bg-success: #132d21;
+  --canon-bg-underline: #d16ecb;
+
+  /* Foreground Colors */
+  --canon-fg-primary: #ffffff;
+  --canon-fg-secondary: #9e9e9e;
+  --canon-fg-link: #ffffff;
+  --canon-fg-link-hover: #ffffff;
+  --canon-fg-disabled: #575757;
+  --canon-fg-solid: #000000;
+  --canon-fg-solid-disabled: #083618;
+  --canon-fg-tint: #ffffff;
+  --canon-fg-tint-disabled: #575757;
+  --canon-fg-danger: #e22b2b;
+  --canon-fg-warning: #e36d05;
+  --canon-fg-success: #1db954;
+
+  /* Border Colors */
+  --canon-border: var(--canon-gray-3);
+  --canon-border-hover: rgba(255, 255, 255, 0.4);
+  --canon-border-pressed: rgba(255, 255, 255, 0.5);
+  --canon-border-disabled: rgba(255, 255, 255, 0.2);
+  --canon-border-danger: #f87a7a;
+  --canon-border-warning: #e36d05;
+  --canon-border-success: #53db83;
+
+  /* Ring Colors */
+  --canon-ring: rgba(255, 255, 255, 0.2);
+}
+
+#root {
+  padding-top: var(--header-height);
+}
+
+.canon-Button,
+.canon-IconButton {
+  border-radius: var(--canon-radius-3);
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+}
+
+.canon-Button--variant-primary,
+.canon-IconButton--variant-primary {
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--canon-bg-solid);
+    background-color: transparent;
+    color: var(--canon-fg-primary);
+  }
+
+  &:active {
+    background-color: rgba(30, 215, 96, 0.1);
+  }
+
+  &:disabled {
+    background-color: var(--canon-bg-solid-disabled);
+    color: var(--canon-fg-solid-disabled);
+    box-shadow: none;
+  }
+}
+
+.canon-Button[data-size='medium'],
+.canon-Button[data-size='small'] {
+  padding-inline: var(--canon-space-3);
+}
+
+.canon-MenuTrigger {
+  all: unset;
+  display: inline-flex;
+}
+
+.canon-MenuPopup {
+  box-sizing: border-box;
+  max-width: 21.25rem;
+}
+
+.canon-MenuSubmenuTrigger,
+.canon-MenuItem {
+  height: auto;
+  min-height: 2rem;
+}
+
+.canon-Text {
+  font-family: var(--canon-font-text);
+}
+
+.canon-Heading {
+  font-family: var(--canon-font-title);
+}
+
+.canon-TableRow {
+  border: none;
+  border-radius: var(--canon-radius-4);
+}
+
+.canon-TableRow:hover td:first-child {
+  border-top-left-radius: var(--canon-radius-2);
+  border-bottom-left-radius: var(--canon-radius-2);
+}
+
+.canon-TableRow:hover td:last-child {
+  border-top-right-radius: var(--canon-radius-2);
+  border-bottom-right-radius: var(--canon-radius-2);
+}
+
+.canon-TableBody:before,
+.canon-TableBody:after {
+  line-height: var(--canon-space-1);
+  content: '\200C';
+  display: block;
+}
+
+.canon-TableHeader .canon-TableRow {
+  border-bottom: 1px solid var(--canon-border);
+}
+
+.canon-TableHead {
+  font-size: var(--canon-font-size-2);
+  color: var(--canon-fg-secondary);
+  font-weight: var(--canon-font-weight-regular);
+}
+
+.canon-ScrollAreaRoot {
+  width: 100%;
+  /* TODO: Bring this as a fix in OS */
+  height: unset;
+}
+
+.canon-TabsIndicator {
+  background-color: var(--canon-bg-underline);
+}
+
+.canon-TabsTab[data-selected] {
+  background: radial-gradient(
+    ellipse at bottom,
+    rgba(209, 110, 203, 0.25) 0%,
+    transparent 95%
+  );
+}