diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css
index 780876501b..3e8cc85a56 100644
--- a/packages/canon/.storybook/themes/backstage.css
+++ b/packages/canon/.storybook/themes/backstage.css
@@ -2,7 +2,7 @@
 [data-theme-name='legacy'][data-theme='dark'] {
   --canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 
-  .cn-button {
+  .canon-Button {
     border-radius: 60px;
     font-weight: 400;
     text-transform: uppercase;
@@ -20,7 +20,7 @@
       box-shadow: none;
     }
 
-    &.cn-button-primary {
+    &.canon-Button--variant-primary {
       color: #fff;
       background-color: rgb(21, 58, 102);
       box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -33,7 +33,7 @@
       }
     }
 
-    &.cn-button-secondary {
+    &.canon-Button--variant-secondary {
       background-color: transparent;
       border: 1px solid rgba(31, 84, 147, 0.5);
       color: #1f5493;
@@ -44,7 +44,7 @@
       }
     }
 
-    &.cn-button-tertiary {
+    &.canon-Button--variant-tertiary {
       background-color: transparent;
       border: none;
       color: #1f5493;