diff --git a/addon/components/breadcrumbs/template.hbs b/addon/components/breadcrumbs/template.hbs
index 95454481..70cebbe0 100644
--- a/addon/components/breadcrumbs/template.hbs
+++ b/addon/components/breadcrumbs/template.hbs
@@ -1,9 +1,9 @@
 {{import eq from 'ember-truth-helpers/helpers/equal'}}
 
-<nav class="bx--breadcrumb bx--breadcrumb--no-trailing-slash" aria-label="breadcrumb" ...attributes>
+<nav class="cds--breadcrumb cds--breadcrumb--no-trailing-slash" aria-label="breadcrumb" ...attributes>
     {{#each @crumbs as |crumb|}}
-        <div class="bx--breadcrumb-item">
-            <a href="#" class="bx--link" aria-current="{{if (eq crumb this.lastItem) 'page'}}" >
+        <div class="cds--breadcrumb-item">
+            <a href="#" class="cds--link" aria-current="{{if (eq crumb this.lastItem) 'page'}}" >
                 {{crumb}}
             </a>
         </div>
diff --git a/addon/components/button/component.ts b/addon/components/button/component.ts
index 0ecdd853..f1a91ff1 100644
--- a/addon/components/button/component.ts
+++ b/addon/components/button/component.ts
@@ -79,7 +79,7 @@ type Args = {
  @class CarbonButton
  @public
  **/
-@classPrefix('bx--btn--')
+@classPrefix('cds--btn--')
 class CarbonButton extends Component<Args> {
   @tracked loading;
   @tracked disabled;
diff --git a/addon/components/button/styles.scoped.scss b/addon/components/button/styles.scoped.scss
index 32970a58..2a1826b4 100644
--- a/addon/components/button/styles.scoped.scss
+++ b/addon/components/button/styles.scoped.scss
@@ -1,5 +1,5 @@
 .namespace {
-  .bx--loading {
+  .cds--loading {
     width: 2rem;
     height: 2rem;
     display: inline-block;
diff --git a/addon/components/button/template.hbs b/addon/components/button/template.hbs
index f0aaf2e2..22a83809 100644
--- a/addon/components/button/template.hbs
+++ b/addon/components/button/template.hbs
@@ -5,7 +5,7 @@
 
 <button ...attributes
         onclick={{fn this.onButtonClick}}
-        class="bx--btn {{this.bxClassNames}} {{styles.namespace}} {{if (or this.loading @loading) 'bx--btn--ghost'}}"
+        class="cds--btn {{this.bxClassNames}} {{styles.namespace}} {{if (or this.loading @loading) 'cds--btn--ghost'}}"
         aria-label="{{if @danger 'danger'}}"
         disabled={{or @disabled this.loading @loading}}
         type="button">
diff --git a/addon/components/card/template.hbs b/addon/components/card/template.hbs
index 4113aa96..27d0f081 100644
--- a/addon/components/card/template.hbs
+++ b/addon/components/card/template.hbs
@@ -7,7 +7,7 @@
       </div>
     {{/if}}
     {{#if @loading}}
-      <div class="bx--skeleton bx--btn" style="width: 100%"></div>
+      <div class="cds--skeleton cds--btn" style="width: 100%"></div>
     {{else}}
       {{yield}}
     {{/if}}
diff --git a/addon/components/checkbox/template.hbs b/addon/components/checkbox/template.hbs
index 3335499c..14590c2f 100644
--- a/addon/components/checkbox/template.hbs
+++ b/addon/components/checkbox/template.hbs
@@ -1,18 +1,18 @@
-<div class="bx--checkbox-wrapper" ...attributes>
+<div class="cds--checkbox-wrapper" ...attributes>
 <label
   tabindex='0'
   {{did-insert this.setup}}
   {{on 'focus' (fn (mut this.isFocus) true)}}
   {{on 'blur' (fn (mut this.isFocus) false)}}
   for="checkbox-{{this.guid}}"
-  class="bx--checkbox-label {{if this.isFocus 'bx--checkbox-label__focus'}}"
+  class="cds--checkbox-label {{if this.isFocus 'cds--checkbox-label__focus'}}"
   data-contained-checkbox-disabled="{{if @disabled 'true' 'false'}}"
   data-contained-checkbox-state="{{if @indeterminate 'mixed' @checked}}">
     <input
             disabled={{if this.disabled true false}}
             id='checkbox-{{this.guid}}'
             readonly={{@readonly}}
-            class="bx--checkbox"
+            class="cds--checkbox"
             type="checkbox"
             name="{{@name}}"
             checked={{if @indeterminate true @checked}}
diff --git a/addon/components/code-snippet/template.hbs b/addon/components/code-snippet/template.hbs
index 5d90092e..783fba2b 100644
--- a/addon/components/code-snippet/template.hbs
+++ b/addon/components/code-snippet/template.hbs
@@ -3,8 +3,8 @@
 {{import set from 'carbon-components-ember/helpers/set'}}
 
 {{#if (eq this.type 'default')}}
-  <div class="bx--snippet bx--snippet--single">
-    <div class="bx--snippet-container" aria-label="Code Snippet Text">
+  <div class="cds--snippet cds--snippet--single">
+    <div class="cds--snippet-container" aria-label="Code Snippet Text">
   <pre>
     <code {{did-insert (set this "carbonElement")}} >
       {{yield}}
@@ -17,26 +17,29 @@
 
 
 {{#if (eq @type 'multiline')}}
-  <div class="bx--snippet bx--snippet--multi {{if this.expanded 'bx--snippet--expand'}}" data-code-snippet>
-    <div class="bx--snippet-container" aria-label="Code Snippet Text">
+  <div class="cds--snippet cds--snippet--multi {{if this.expanded 'cds--snippet--expand'}}" data-code-snippet>
+    <div class="cds--snippet-container" aria-label="Code Snippet Text" style="min-height: 48px; {{unless this.expanded 'max-height: 240px;'}}">
     <pre>
       <code {{did-insert (set this "codeElement")}}>
         {{yield}}
       </code>
     </pre>
     </div>
-    <CopyButton @targetElement={{this.codeElement}} />
-    <Button
-      class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand"
+    <div class="cds--snippet__overflow-indicator--right"></div>
+    <span class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip">
+      <CopyButton @targetElement={{this.codeElement}} />
+    </span>
+    <button onclick={{fn (set this 'expanded') (not this.expanded)}}
+      class="cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand"
       type="button"
     >
-  <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
+  <span class="cds--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
     more</span>
-      <svg class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
+      <svg class="cds--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
         <title>Show more icon</title>
         <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
       </svg>
-    </Button>
+    </button>
   </div>
 {{/if}}
 
diff --git a/addon/components/copy-button/component.ts b/addon/components/copy-button/component.ts
index e1559c4e..37a7d14d 100644
--- a/addon/components/copy-button/component.ts
+++ b/addon/components/copy-button/component.ts
@@ -1,25 +1,36 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import CopyButton from 'carbon-components/es/components/copy-button/copy-button';
+import { tracked } from '@glimmer/tracking';
 
 
-class MyCopyButton extends CopyButton {
-  constructor(carbonElement: any, options: { targetElementId: string; targetElement: Element }) {
-    super(carbonElement, options)
+type Args = {
+  targetElementId: string;
+  targetElement: Element;
+
+};
+
+export default class CarbonCopyButton extends Component<Args> {
+  carbonElement: any;
+  @tracked didCopy: boolean;
+  get options() {
+    return {
+      targetElement: this.args.targetElement,
+      targetElementId: this.args.targetElementId
+    };
   }
 
-  options: {
-    targetElementId: string;
-    targetElement: Element;
-  };
-  element: Element;
+  @action
+  loadCarbonComponent(carbonElement) {
+    this.carbonElement = carbonElement;
+  }
 
+  @action
   copyToClipboard() {
     let targetElement: any = this.options.targetElement;
     if (!targetElement && this.options.targetElementId) {
       targetElement = document.getElementById(this.options.targetElementId);
     }
-    targetElement = targetElement || this.element;
+    targetElement = targetElement || this.carbonElement;
     const el = document.createElement('textarea'); // Create a <textarea> element
     // Set its value to the string that you want copied
     el.value = targetElement.textContent.trim().split('\n').map(x => x.trim()).join('\n');
@@ -37,41 +48,9 @@ class MyCopyButton extends CopyButton {
       document.getSelection()!.removeAllRanges(); // Unselect everything on the HTML document
       document.getSelection()!.addRange(selected); // Restore the original selection
     }
-  }
-
-  handleClick(...args) {
-    super.handleClick(...args);
-    this.copyToClipboard();
-  }
-}
-
-type Args = {
-  targetElementId: string;
-  targetElement: Element;
-
-};
-
-export default class CarbonCopyButton extends Component<Args> {
-  carbonComponent: any;
-  get options() {
-    return {
-      targetElement: this.args.targetElement,
-      targetElementId: this.args.targetElementId
-    };
-  }
-
-  @action
-  loadCarbonComponent(carbonElement) {
-    this.destroyCarbonComponent();
-    const options = this.options;
-    options.targetElement = options.targetElement || carbonElement;
-    this.carbonComponent = new MyCopyButton(carbonElement, this.options);
-  }
-
-  @action
-  destroyCarbonComponent(element?) {
-    if (element && (!this.carbonComponent || this.carbonComponent.element !== element)) return;
-    this.carbonComponent && this.carbonComponent.release();
-    this.carbonComponent = null;
+    this.didCopy = true;
+    setTimeout(() => {
+      this.didCopy = false
+    }, 3000);
   }
 }
diff --git a/addon/components/copy-button/template.hbs b/addon/components/copy-button/template.hbs
index af19c25b..a18c1d50 100644
--- a/addon/components/copy-button/template.hbs
+++ b/addon/components/copy-button/template.hbs
@@ -1,39 +1,50 @@
 {{#if (or @targetElement @targetElementId)}}
   <button
+    onclick={{this.copyToClipboard}}
     {{did-insert this.loadCarbonComponent}}
-    {{will-destroy this.destroyCarbonComponent}}
       data-copy-btn
-      class="{{if @inline 'bx--snippet bx--snippet--inline bx--btn--copy' 'bx--snippet-button'}}"
+      class="{{if @inline 'cds--btn--icon-only cds--snippet cds--snippet--inline cds--copy cds--btn cds--btn--md cds--btn--primary' 'cds--btn--icon-only cds--copy-btn cds--copy cds--btn cds--btn--md cds--btn--primary'}}"
       aria-label="Copy code"
       tabindex="0">
     {{#if (has-block)}}
       <code>{{yield}}</code>
     {{/if}}
     {{#unless @inline}}
-      <svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <svg class="cds--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
         <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" />
         <path d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z" />
       </svg>
     {{/unless}}
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    <EmberTooltip>
+      {{#if this.didCopy}}
+        Copied!
+      {{else}}
+        Copy to clipboard
+      {{/if}}
+    </EmberTooltip>
   </button>
 {{else}}
-  <button
+  <button onclick={{this.copyToClipboard}}
     {{did-insert this.loadCarbonComponent}}
-    {{will-destroy this.destroyCarbonComponent}}
       data-copy-btn
-      class="{{if @inline 'bx--snippet bx--snippet--inline bx--btn--copy' 'bx--snippet-button'}}"
+      class="{{if @inline 'cds--snippet cds--snippet--inline cds--btn--copy' 'cds--btn--icon-only cds--copy-btn cds--copy cds--btn cds--btn--md cds--btn--primary'}}"
       aria-label="Copy code"
       tabindex="0">
     {{#if (has-block)}}
       <code>{{yield}}</code>
     {{/if}}
     {{#unless @inline}}
-      <svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <svg class="cds--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
         <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" />
         <path d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z" />
       </svg>
     {{/unless}}
-    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    <EmberTooltip>
+      {{#if this.didCopy}}
+        Copied!
+      {{else}}
+        Copy to clipboard
+      {{/if}}
+    </EmberTooltip>
   </button>
 {{/if}}
\ No newline at end of file
diff --git a/addon/components/data-table/-header/template.hbs b/addon/components/data-table/-header/template.hbs
index 018e58e3..f07e9393 100644
--- a/addon/components/data-table/-header/template.hbs
+++ b/addon/components/data-table/-header/template.hbs
@@ -6,27 +6,27 @@
 <thead>
   <tr>
     {{#if @isExpandable}}
-      <th class="bx--table-expand">
+      <th class="cds--table-expand">
         <!-- checkbox th -->
         <!-- sortable th  -->
-        <span class="bx--table-header-label"></span>
+        <span class="cds--table-header-label"></span>
       </th>
     {{/if}}
     {{#if @isCheckable}}
-      <th  class="bx--table-column-checkbox">
+      <th  class="cds--table-column-checkbox">
         <Checkbox @checked={{@table.allChecked}} @onChange={{fn @table.toggleSelectAllItems}} />
       </th>
     {{/if}}
     {{#each @headers as |h|}}
       <th>
         {{#if h.sortable}}
-          <Button class="bx--table-sort" title={{h.label}}>
-            <span class="bx--table-header-label">{{h.label}}</span>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
-            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
+          <Button class="cds--table-sort" title={{h.label}}>
+            <span class="cds--table-header-label">{{h.label}}</span>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--table-sort__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z"></path></svg>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--table-sort__icon-unsorted" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z"></path></svg>
           </Button>
         {{else}}
-          <span class="bx--table-header-label">{{h.label}}</span>
+          <span class="cds--table-header-label">{{h.label}}</span>
         {{/if}}
       </th>
     {{/each}}
diff --git a/addon/components/data-table/-menu/template.hbs b/addon/components/data-table/-menu/template.hbs
index 7819a922..5b65cb0e 100644
--- a/addon/components/data-table/-menu/template.hbs
+++ b/addon/components/data-table/-menu/template.hbs
@@ -1,6 +1,6 @@
 {{import Menu from 'carbon-components-ember/components/menu'}}
 
-<td class="bx--table-column-menu" >
+<td class="cds--table-column-menu" >
   <Menu @icon="overflow-menu--vertical" @direction="top" as |Item|>
     {{yield Item}}
   </Menu>
diff --git a/addon/components/data-table/-row/template.hbs b/addon/components/data-table/-row/template.hbs
index 75170b46..e089c958 100644
--- a/addon/components/data-table/-row/template.hbs
+++ b/addon/components/data-table/-row/template.hbs
@@ -3,25 +3,25 @@
 {{import set from 'carbon-components-ember/helpers/set'}}
 {{import has from 'carbon-components-ember/helpers/has'}}
 
-<tr class="{{if (has @table.state.selectedItems @item) 'bx--data-table--selected'}}">
+<tr class="{{if (has @table.state.selectedItems @item) 'cds--data-table--selected'}}">
   {{#if @isExpandable}}
-    <td class="bx--table-expand" data-event="expand">
-      <Button class="bx--table-expand__button" @onClick={{fn (set this 'isExpanded' (not this.isExpanded))}}>
-        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path></svg>
+    <td class="cds--table-expand" data-event="expand">
+      <Button class="cds--table-expand__button" @onClick={{fn (set this 'isExpanded' (not this.isExpanded))}}>
+        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="cds--table-expand__svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path></svg>
       </Button>
     </td>
   {{/if}}
   {{#if @isCheckable}}
-    <td class="bx--table-column-checkbox">
+    <td class="cds--table-column-checkbox">
       <Checkbox @checked={{has @table.state.selectedItems @item}} @onChange={{fn @table.toggleItemSelection @item}} />
     </td>
   {{/if}}
   {{yield}}
 </tr>
 {{#if @isExpanded}}
-  <tr class="bx--expandable-row" data-child-row>
+  <tr class="cds--expandable-row" data-child-row>
     <td colspan="{{@table.headers.length}}">
-      <div class="bx--child-row-inner-container">
+      <div class="cds--child-row-inner-container">
         {{yield}}
       </div>
     </td>
diff --git a/addon/components/data-table/-search-input/styles.scoped.scss b/addon/components/data-table/-search-input/styles.scoped.scss
index c60fca9e..cfb1fad7 100644
--- a/addon/components/data-table/-search-input/styles.scoped.scss
+++ b/addon/components/data-table/-search-input/styles.scoped.scss
@@ -1,5 +1,5 @@
 .is-searching {
-  .bx--search-magnifier {
+  .cds--search-magnifier {
     display: none;
   }
 }
diff --git a/addon/components/data-table/-search-input/template.hbs b/addon/components/data-table/-search-input/template.hbs
index 5dfec4a4..3a093f4d 100644
--- a/addon/components/data-table/-search-input/template.hbs
+++ b/addon/components/data-table/-search-input/template.hbs
@@ -3,7 +3,7 @@
 {{import debounce from '@abcum/ember-helpers/helpers/debounce'}}
 {{import styles from './styles.scoped.scss'}}
 
-<div class="bx--toolbar-search-container-persistent {{if this.isSearching styles.is-searching}}">
+<div class="cds--toolbar-search-container-persistent {{if this.isSearching styles.is-searching}}">
   <SearchInput @isLoading={{@isLoading}} @value={{@value}} @onChange={{fn this.doSearch}} />
   <Loading style="position: relative; top: -41px; right: 7px" @inline={{true}} @active={{this.isSearching}} />
 </div>
\ No newline at end of file
diff --git a/addon/components/data-table/-skeleton/template.hbs b/addon/components/data-table/-skeleton/template.hbs
index 3768149b..9ffef4b4 100644
--- a/addon/components/data-table/-skeleton/template.hbs
+++ b/addon/components/data-table/-skeleton/template.hbs
@@ -1,9 +1,9 @@
-<section class="bx--structured-list bx--skeleton">
-      <div class="bx--structured-list-tbody">
-        <div class="bx--structured-list-row">
+<section class="cds--structured-list cds--skeleton">
+      <div class="cds--structured-list-tbody">
+        <div class="cds--structured-list-row">
           {{#each @headers as |h|}}
-            <div class="bx--structured-list-td bx--structured-list-content--nowrap">
-              <div class="bx--skeleton__text"></div>
+            <div class="cds--structured-list-td cds--structured-list-content--nowrap">
+              <div class="cds--skeleton__text"></div>
             </div>
           {{/each}}
         </div>
diff --git a/addon/components/data-table/-table/template.hbs b/addon/components/data-table/-table/template.hbs
index 3004bf24..5ac9f040 100644
--- a/addon/components/data-table/-table/template.hbs
+++ b/addon/components/data-table/-table/template.hbs
@@ -1,3 +1,3 @@
-<table class="bx--data-table  {{if @isSortable 'bx--data-table--sort'}} {{if @isLoading 'bx--skeleton'}}" >
+<table class="cds--data-table  {{if @isSortable 'cds--data-table--sort'}} {{if @isLoading 'cds--skeleton'}}" >
   {{yield}}
 </table>
\ No newline at end of file
diff --git a/addon/components/data-table/-toolbar/-actions/template.hbs b/addon/components/data-table/-toolbar/-actions/template.hbs
index 11f60da9..e7a4403f 100644
--- a/addon/components/data-table/-toolbar/-actions/template.hbs
+++ b/addon/components/data-table/-toolbar/-actions/template.hbs
@@ -3,13 +3,13 @@
 {{import Button from 'carbon-components-ember/components/button'}}
 
 {{#if @table.state.selectedItems.size}}
-  <div class="bx--batch-actions bx--batch-actions--active" aria-label="Table Action Bar">
-    <div class="bx--action-list">
+  <div class="cds--batch-actions cds--batch-actions--active" aria-label="Table Action Bar">
+    <div class="cds--action-list">
     {{yield (hash close=(fn (getFn @table.state.selectedItems 'clear')))}}
     <Button @type="primary" @onClick={{fn (getFn @table.state.selectedItems 'clear')}}>Cancel</Button>
     </div>
-    <div class="bx--batch-summary">
-      <p class="bx--batch-summary__para">
+    <div class="cds--batch-summary">
+      <p class="cds--batch-summary__para">
         <span data-items-selected>{{@table.state.selectedItems.size}}</span> items selected
       </p>
     </div>
diff --git a/addon/components/data-table/-toolbar/-content/template.hbs b/addon/components/data-table/-toolbar/-content/template.hbs
index 8564b254..0c8ff9fb 100644
--- a/addon/components/data-table/-toolbar/-content/template.hbs
+++ b/addon/components/data-table/-toolbar/-content/template.hbs
@@ -1,3 +1,3 @@
- <div class="bx--toolbar-content">
+ <div class="cds--toolbar-content">
    {{yield}}
 </div>
\ No newline at end of file
diff --git a/addon/components/data-table/-toolbar/template.hbs b/addon/components/data-table/-toolbar/template.hbs
index d5c94b42..6e0cdba5 100644
--- a/addon/components/data-table/-toolbar/template.hbs
+++ b/addon/components/data-table/-toolbar/template.hbs
@@ -2,6 +2,6 @@
 {{import Actions from './-actions'}}
 {{import Content from './-content'}}
 
-<section class="bx--table-toolbar ">
+<section class="cds--table-toolbar ">
   {{yield (hash Content=Content Actions=(component Actions table=@table))}}
 </section>
\ No newline at end of file
diff --git a/addon/components/data-table/template.hbs b/addon/components/data-table/template.hbs
index 5f7c7547..fb4d9493 100644
--- a/addon/components/data-table/template.hbs
+++ b/addon/components/data-table/template.hbs
@@ -10,10 +10,10 @@
 {{import Menu from './-menu'}}
 {{import did-insert from '@ember/render-modifiers/modifiers/did-insert'}}
 
-<div class="bx--data-table-container {{if @isLoading 'bx-skeleton'}}" data-table>
-  <div class="bx--data-table-header" {{did-insert this.didInsert}}>
-    <h4 class="bx--data-table-header__title">{{@title}}</h4>
-    <p class="bx--data-table-header__description">{{@description}}</p>
+<div class="cds--data-table-container {{if @isLoading 'bx-skeleton'}}" data-table>
+  <div class="cds--data-table-header" {{did-insert this.didInsert}}>
+    <h4 class="cds--data-table-header__title">{{@title}}</h4>
+    <p class="cds--data-table-header__description">{{@description}}</p>
   </div>
 
   {{yield (hash
diff --git a/addon/components/dialogs/confirm/template.hbs b/addon/components/dialogs/confirm/template.hbs
index e85454d2..83092328 100644
--- a/addon/components/dialogs/confirm/template.hbs
+++ b/addon/components/dialogs/confirm/template.hbs
@@ -16,10 +16,10 @@
   </:body>
 
   <:footer>
-    <button class="bx--btn bx--btn--secondary" type="button" data-modal-close {{on 'click' this.onCancel}}>
+    <button class="cds--btn cds--btn--secondary" type="button" data-modal-close {{on 'click' this.onCancel}}>
       {{defaultTo @cancelText 'Cancel'}}
     </button>
-    <button class="bx--btn bx--btn--{{@type}} bx--btn--primary" type="button" aria-label="Danger"
+    <button class="cds--btn cds--btn--{{@type}} cds--btn--primary" type="button" aria-label="Danger"
       {{on 'click' this.onAccept}} data-modal-primary-focus>{{defaultTo @cancelText 'Okay'}}
     </button>
   </:footer>
diff --git a/addon/components/form-input/template.hbs b/addon/components/form-input/template.hbs
index b0e7d6f2..790a9539 100644
--- a/addon/components/form-input/template.hbs
+++ b/addon/components/form-input/template.hbs
@@ -1,16 +1,16 @@
 {{import defaultTo from 'carbon-components-ember/helpers/default-to'}}
-<div class="bx--form-item" style='margin-bottom: 1.5rem;' ...attributes>
+<div class="cds--form-item" style='margin-bottom: 1.5rem;' ...attributes>
   {{#if @label}}
-    <label for="text-input-{{this.guid}}" class="bx--label">{{@label}}</label>
+    <label for="text-input-{{this.guid}}" class="cds--label">{{@label}}</label>
   {{/if}}
-  <input {{on 'change' this.onInputChange}} id="text-input-{{this.guid}}" type="{{defaultTo @type 'text'}}" value={{@value}} class="bx--text-input" placeholder="{{@placeholder}}">
+  <input {{on 'change' this.onInputChange}} id="text-input-{{this.guid}}" type="{{defaultTo @type 'text'}}" value={{@value}} class="cds--text-input" placeholder="{{@placeholder}}">
   {{#if @help}}
-    <div class="bx--form__helper-text">
+    <div class="cds--form__helper-text">
       {{@help}}
     </div>
   {{/if}}
   {{#if @errors}}
-    <div class="bx--form-requirement">
+    <div class="cds--form-requirement">
       {{@errors}}
     </div>
   {{/if}}
diff --git a/addon/components/icon/component.ts b/addon/components/icon/component.ts
index 8fd07eeb..d11f1a40 100644
--- a/addon/components/icon/component.ts
+++ b/addon/components/icon/component.ts
@@ -59,7 +59,7 @@ type Args = {
   onClick: () => null|Promise<any>
 }
 
-@classPrefix('bx--icon--')
+@classPrefix('cds--icon--')
 class CarbonIcon extends Component<Args> {
   static positionalParams = ['icon'];
   @service('carbon-components-ember@dialog-manager') dialogManager;
diff --git a/addon/components/icon/styles.scoped.scss b/addon/components/icon/styles.scoped.scss
index 6f7190ab..1a76fe66 100644
--- a/addon/components/icon/styles.scoped.scss
+++ b/addon/components/icon/styles.scoped.scss
@@ -3,7 +3,7 @@
 .icon {
   margin: 5px;
 
-  .bx--icon-- {
+  .cds--icon-- {
     &disabled {
       cursor: initial;
       opacity: 0.5;
@@ -26,7 +26,7 @@
     width: 12px;
     height: 16px;
     display: inline-block;
-    .bx--loading {
+    .cds--loading {
       display: inline-block;
       width: 1rem;
       height: 1rem;
diff --git a/addon/components/icon/template.hbs b/addon/components/icon/template.hbs
index 7a3c7112..e4670e5f 100644
--- a/addon/components/icon/template.hbs
+++ b/addon/components/icon/template.hbs
@@ -10,7 +10,7 @@
   </span>
 {{else}}
   {{#if @onClick}}
-    <button class="bx--btn bx--btn--sm bx--btn--ghost {{@btnClass}}" style="{{@btnStyle}}" type="button" {{on 'click' this.onIconClick}}>
+    <button class="cds--btn cds--btn--sm cds--btn--ghost {{@btnClass}}" style="{{@btnStyle}}" type="button" {{on 'click' this.onIconClick}}>
         {{renderSvgPart this.svg class=(array @class this.bxClassNames styles.icon)}}
     </button>
   {{else}}
diff --git a/addon/components/list/-body/template.hbs b/addon/components/list/-body/template.hbs
index e42e523f..89e4ec3d 100644
--- a/addon/components/list/-body/template.hbs
+++ b/addon/components/list/-body/template.hbs
@@ -1,3 +1,3 @@
-<div class="bx--structured-list-tbody">
+<div class="cds--structured-list-tbody">
   {{yield}}
 </div>
\ No newline at end of file
diff --git a/addon/components/list/-column/template.hbs b/addon/components/list/-column/template.hbs
index 7c253ec1..46c78bf1 100644
--- a/addon/components/list/-column/template.hbs
+++ b/addon/components/list/-column/template.hbs
@@ -1,3 +1,3 @@
-<div class="bx--structured-list-td {{if @nowrap 'bx--structured-list-content--nowrap'}}" ...attributes>
+<div class="cds--structured-list-td {{if @nowrap 'cds--structured-list-content--nowrap'}}" ...attributes>
     {{yield}}
 </div>
\ No newline at end of file
diff --git a/addon/components/list/-header/template.hbs b/addon/components/list/-header/template.hbs
index b10ec2c5..f4af136a 100644
--- a/addon/components/list/-header/template.hbs
+++ b/addon/components/list/-header/template.hbs
@@ -1,7 +1,7 @@
-<div class="bx--structured-list-thead">
-  <div class="bx--structured-list-row bx--structured-list-row--header-row">
+<div class="cds--structured-list-thead">
+  <div class="cds--structured-list-row cds--structured-list-row--header-row">
     {{#each @headers as |h|}}
-      <div class="bx--structured-list-th">{{h}}</div>
+      <div class="cds--structured-list-th">{{h}}</div>
     {{/each}}
   </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/list/-row/template.hbs b/addon/components/list/-row/template.hbs
index 2d27682b..ea58ab2c 100644
--- a/addon/components/list/-row/template.hbs
+++ b/addon/components/list/-row/template.hbs
@@ -1,10 +1,10 @@
 {{import Icon from 'carbon-components-ember/components/icon'}}
-<div class="bx--structured-list-row {{if @isHeader 'bx--structured-list-row--header-row'}}" ...attributes {{on 'click' (fn this.onSelect @item)}}>
+<div class="cds--structured-list-row {{if @isHeader 'cds--structured-list-row--header-row'}}" ...attributes {{on 'click' (fn this.onSelect @item)}}>
   {{yield}}
   {{#if @list.args.selectable}}
-    <input type="radio" checked={{@isCurrent}} class="bx--structured-list-input bx--visually-hidden">
-    <div class="bx--structured-list-td">
-      <Icon @icon="checkmark--filled" @class="bx--structured-list-svg"></Icon>
+    <input type="radio" checked={{@isCurrent}} class="cds--structured-list-input cds--visually-hidden">
+    <div class="cds--structured-list-td">
+      <Icon @icon="checkmark--filled" @class="cds--structured-list-svg"></Icon>
     </div>
   {{/if}}
 </div>
diff --git a/addon/components/list/-skeleton/template.hbs b/addon/components/list/-skeleton/template.hbs
index 1e42fdef..6fe0588f 100644
--- a/addon/components/list/-skeleton/template.hbs
+++ b/addon/components/list/-skeleton/template.hbs
@@ -1,17 +1,17 @@
-<section class="bx--structured-list bx--skeleton">
-  <div class="bx--structured-list-thead">
-    <div class="bx--structured-list-row bx--structured-list-row--header-row">
-      <div class="bx--structured-list-th">Item</div>
-      <div class="bx--structured-list-th">Details</div>
+<section class="cds--structured-list cds--skeleton">
+  <div class="cds--structured-list-thead">
+    <div class="cds--structured-list-row cds--structured-list-row--header-row">
+      <div class="cds--structured-list-th">Item</div>
+      <div class="cds--structured-list-th">Details</div>
     </div>
   </div>
-      <div class="bx--structured-list-tbody">
-        <div class="bx--structured-list-row">
-          <div class="bx--structured-list-td bx--structured-list-content--nowrap">
-            <div class="bx--skeleton__text"></div>
+      <div class="cds--structured-list-tbody">
+        <div class="cds--structured-list-row">
+          <div class="cds--structured-list-td cds--structured-list-content--nowrap">
+            <div class="cds--skeleton__text"></div>
           </div>
-          <div class="bx--structured-list-td bx--structured-list-content--nowrap">
-            <div class="bx--skeleton__text"></div>
+          <div class="cds--structured-list-td cds--structured-list-content--nowrap">
+            <div class="cds--skeleton__text"></div>
           </div>
         </div>
   </div>
diff --git a/addon/components/list/styles.scoped.scss b/addon/components/list/styles.scoped.scss
index 7b19c179..7d592e3b 100644
--- a/addon/components/list/styles.scoped.scss
+++ b/addon/components/list/styles.scoped.scss
@@ -1,11 +1,11 @@
 .namespace {
-  .bx--pagination {
+  .cds--pagination {
     position: absolute;
     right: 0;
     left: 0;
   }
 
-  .bx--search {
+  .cds--search {
     width: 250px;
     display: table-caption;
   }
diff --git a/addon/components/list/template.hbs b/addon/components/list/template.hbs
index d9ff96f8..b5a162cc 100644
--- a/addon/components/list/template.hbs
+++ b/addon/components/list/template.hbs
@@ -10,7 +10,7 @@
 {{#if @loading}}
   <Skeleton />
 {{else}}
-  <section class="bx--structured-list {{styles.namespace}} {{if @selectable 'bx--structured-list--selection'}}" style="position: relative;" {{did-insert this.delayItems}}>
+  <section class="cds--structured-list {{styles.namespace}} {{if @selectable 'cds--structured-list--selection'}}" style="position: relative;" {{did-insert this.delayItems}}>
     {{yield (hash
               items=this.currentItems
               SearchInput=(component SearchInput value=this.currentSearch onChange=(action (mut this.currentSearch)) light=true small=true)
diff --git a/addon/components/loading/template.hbs b/addon/components/loading/template.hbs
index 66e84e53..cd6632c5 100644
--- a/addon/components/loading/template.hbs
+++ b/addon/components/loading/template.hbs
@@ -1,48 +1,48 @@
 {{#if this.args.active}}
   {{#if this.args.overlay}}
-      <div class="bx--loading-overlay"
+      <div class="cds--loading-overlay"
            style="height: 100%"
         {{did-insert this.loadCarbonComponent}}
         {{will-destroy this.destroyCarbonComponent}}>
-          <div data-loading class="bx--loading {{if this.args.small 'bx--loading--small'}} {{this.classNames}}" ...attributes>
-              <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+          <div data-loading class="cds--loading {{if this.args.small 'cds--loading--small'}} {{this.classNames}}" ...attributes>
+              <svg class="cds--loading__svg" viewBox="-75 -75 150 150">
                   <title>Loading</title>
                 {{#if @small}}
-                    <circle class="bx--loading__background" cx="0" cy="0" r="37.5" />
+                    <circle class="cds--loading__background" cx="0" cy="0" r="37.5" />
                 {{/if}}
-                  <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
+                  <circle class="cds--loading__stroke" cx="0" cy="0" r="37.5" />
               </svg>
           </div>
       </div>
   {{else if @inline}}
-      <div class="bx--inline-loading {{this.classNames}}" aria-live="assertive" style="margin-left: 1rem; width: initial; display: inline-block;"
+      <div class="cds--inline-loading {{this.classNames}}" aria-live="assertive" style="margin-left: 1rem; width: initial; display: inline-block;"
         {{did-insert this.loadCarbonComponent}}
         {{will-destroy this.destroyCarbonComponent}}
            ...attributes
       >
-          <div class="bx--inline-loading__animation">
-              <div aria-label="Active loading indicator" aria-live="assertive" class="bx--loading bx--loading--small">
-                  <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
+          <div class="cds--inline-loading__animation">
+              <div aria-label="Active loading indicator" aria-live="assertive" class="cds--loading cds--loading--small">
+                  <svg class="cds--loading__svg" viewBox="-75 -75 150 150">
                       <title>Active loading indicator</title>
-                      <circle class="bx--loading__background" cx="0" cy="0" r="37.5"></circle>
-                      <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5">
+                      <circle class="cds--loading__background" cx="0" cy="0" r="37.5"></circle>
+                      <circle class="cds--loading__stroke" cx="0" cy="0" r="37.5">
                       </circle>
                   </svg>
               </div>
           </div>
-          <div class="bx--inline-loading__text">{{this.args.title}}</div>
+          <div class="cds--inline-loading__text">{{this.args.title}}</div>
       </div>
   {{else}}
       <div data-loading class="{{this.classNames}}"
         {{did-insert this.loadCarbonComponent}}
         {{will-destroy this.destroyCarbonComponent}}
            ...attributes>
-          <svg class="bx--loading {{if this.args.small 'bx--loading--small'}} bx--loading__svg" viewBox="-75 -75 150 150">
+          <svg class="cds--loading {{if this.args.small 'cds--loading--small'}} cds--loading__svg" viewBox="-75 -75 150 150">
               <title>Loading</title>
             {{#if this.args.small}}
-                <circle class="bx--loading__background" cx="0" cy="0" r="37.5" />
+                <circle class="cds--loading__background" cx="0" cy="0" r="37.5" />
             {{/if}}
-              <circle class="bx--loading__stroke" cx="0" cy="0" r="37.5" />
+              <circle class="cds--loading__stroke" cx="0" cy="0" r="37.5" />
           </svg>
       </div>
   {{/if}}
diff --git a/addon/components/menu/-item/template.hbs b/addon/components/menu/-item/template.hbs
index 0371c2c9..f55a5a71 100644
--- a/addon/components/menu/-item/template.hbs
+++ b/addon/components/menu/-item/template.hbs
@@ -1,11 +1,11 @@
-<li class="bx--overflow-menu-options__option">
+<li class="cds--overflow-menu-options__option">
     <button
-            class="bx--overflow-menu-options__btn {{if @isDanger 'bx--overflow-menu-options__option--danger'}} {{if @isDisabled 'bx--overflow-menu-options__option--disabled'}}"
+            class="cds--overflow-menu-options__btn {{if @isDanger 'cds--overflow-menu-options__option--danger'}} {{if @isDisabled 'cds--overflow-menu-options__option--disabled'}}"
             title="{{@tooltip}}"
             data-floating-menu-primary-focus={{@isPrimary}}
             ...attributes
     >
-      <span class="bx--overflow-menu-options__option-content">
+      <span class="cds--overflow-menu-options__option-content">
         {{@title}}
         {{yield}}
       </span>
diff --git a/addon/components/menu/template.hbs b/addon/components/menu/template.hbs
index 774e3033..dc6b1b28 100644
--- a/addon/components/menu/template.hbs
+++ b/addon/components/menu/template.hbs
@@ -5,11 +5,11 @@
 
 
 <BasicDropdown as |dd|>
-  <dd.Trigger class="bx--overflow-menu {{if dd.isOpen 'bx--overflow-menu--open'}}">
-    <Icon @fill='white' @size=24 @icon={{defaultTo @icon 'overflow-menu'}} class='bx--overflow-menu__icon' />
+  <dd.Trigger class="cds--overflow-menu {{if dd.isOpen 'cds--overflow-menu--open'}}">
+    <Icon @fill='white' @size=24 @icon={{defaultTo @icon 'overflow-menu'}} class='cds--overflow-menu__icon' />
   </dd.Trigger>
-  <dd.Content class="bx--overflow-menu-options--open">
-    <ul  {{on 'click' (fn dd.actions.close)}} style="display: block" class="bx--overflow-menu-options__content" tabindex="-1" data-floating-menu-direction={{defaultTo @direction 'buttom'}}>
+  <dd.Content class="cds--overflow-menu-options--open">
+    <ul  {{on 'click' (fn dd.actions.close)}} style="display: block" class="cds--overflow-menu-options__content" tabindex="-1" data-floating-menu-direction={{defaultTo @direction 'buttom'}}>
         {{yield Item}}
     </ul>
   </dd.Content>
diff --git a/addon/components/modal/template.hbs b/addon/components/modal/template.hbs
index eab65e30..924ec030 100644
--- a/addon/components/modal/template.hbs
+++ b/addon/components/modal/template.hbs
@@ -1,15 +1,15 @@
-<div data-modal id="modal-{{this.guid}}" class="bx--modal bx--modal--{{@type}} {{if this.isVisible 'is-visible'}}" role="dialog"
+<div data-modal id="modal-{{this.guid}}" class="cds--modal cds--modal--{{@type}} {{if this.isVisible 'is-visible'}}" role="dialog"
      aria-modal="true" aria-labelledby="modal-{{this.guid}}-label" aria-describedby="modal-{{this.guid}}-heading" tabindex="-1">
-  <div class="bx--modal-container">
-    <div class="bx--modal-header">
-      <p class="bx--modal-header__label bx--type-delta" id="modal-{{this.guid}}-label">
+  <div class="cds--modal-container">
+    <div class="cds--modal-header">
+      <p class="cds--modal-header__label cds--type-delta" id="modal-{{this.guid}}-label">
         {{yield to='label'}}
       </p>
-      <p class="bx--modal-header__heading bx--type-beta" id="modal-{{this.guid}}-heading">
+      <p class="cds--modal-header__heading cds--type-beta" id="modal-{{this.guid}}-heading">
         {{yield to='header'}}
       </p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal"  data-modal-primary-focus {{on 'click' this.closeModal}}>
-        <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+      <button class="cds--modal-close" type="button" data-modal-close aria-label="close modal"  data-modal-primary-focus {{on 'click' this.closeModal}}>
+        <svg class="cds--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
           <title>Close Modal</title>
           <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"
           />
@@ -17,11 +17,11 @@
       </button>
     </div>
 
-    <div class="bx--modal-content">
+    <div class="cds--modal-content">
       {{yield to='body'}}
     </div>
 
-    <div class="bx--modal-footer">
+    <div class="cds--modal-footer">
       {{yield to='footer'}}
     </div>
   </div>
diff --git a/addon/components/notification/template.hbs b/addon/components/notification/template.hbs
index 16e7328d..3df2e746 100644
--- a/addon/components/notification/template.hbs
+++ b/addon/components/notification/template.hbs
@@ -1,15 +1,15 @@
 {{import or from '~/helpers/or'}}
 
-<div data-notification class="bx--toast-notification bx--toast-notification--{{or @notification.type @type}}" role="alert"
+<div data-notification class="cds--toast-notification cds--toast-notification--{{or @notification.type @type}}" role="alert"
      ...attributes
 >
-  <div class="bx--toast-notification__details">
-    <h3 class="bx--toast-notification__title">{{or @notification.title @title}}</h3>
-    <p class="bx--toast-notification__subtitle">{{or @notification.text @text}}</p>
-    <p class="bx--toast-notification__caption">{{or @notification.caption @caption}}</p>
+  <div class="cds--toast-notification__details">
+    <h3 class="cds--toast-notification__title">{{or @notification.title @title}}</h3>
+    <p class="cds--toast-notification__subtitle">{{or @notification.text @text}}</p>
+    <p class="cds--toast-notification__caption">{{or @notification.caption @caption}}</p>
   </div>
-  <button {{on 'click' (fn this.onNotificationClick (or @notification this.args))}} data-notification-btn class="bx--toast-notification__close-button" type="button" aria-label="close">
-    <svg aria-hidden="true" class="bx--toast-notification-icon" width="10"
+  <button {{on 'click' (fn this.onNotificationClick (or @notification this.args))}} data-notification-btn class="cds--toast-notification__close-button" type="button" aria-label="close">
+    <svg aria-hidden="true" class="cds--toast-notification-icon" width="10"
          height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
       <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
             fill-rule="nonzero" />
diff --git a/addon/components/pagination/template.hbs b/addon/components/pagination/template.hbs
index f5e0759b..25ba1324 100644
--- a/addon/components/pagination/template.hbs
+++ b/addon/components/pagination/template.hbs
@@ -6,37 +6,37 @@
 {{import eq from 'ember-truth-helpers/helpers/equal'}}
 {{import styles from './styles.scoped.scss'}}
 
-<div class="bx--pagination {{styles.namespace}} {{if @isLoading 'bx--skeleton'}}" data-pagination
+<div class="cds--pagination {{styles.namespace}} {{if @isLoading 'cds--skeleton'}}" data-pagination
   {{did-insert this.pageChanged}}
   {{did-update (fn this.setState @state) @state}}
 >
   {{#if @isLoading}}
-    <div class="bx--skeleton__text"></div>
+    <div class="cds--skeleton__text"></div>
   {{else}}
-    <div class="bx--pagination__left">
-      <label id="select-id-pagination-count-label" class="bx--pagination__text" for="select-id-pagination-count">
+    <div class="cds--pagination__left">
+      <label id="select-id-pagination-count-label" class="cds--pagination__text" for="select-id-pagination-count">
         Items per page:
       </label>
-      <div class="bx--select bx--select--inline bx--select__item-count">
+      <div class="cds--select cds--select--inline cds--select__item-count">
         <Select @searchEnabled={{false}} @options={{defaultTo (array 10 20 30 40 50 100) this.args.itemsPerPageOptions}} @onSelect={{this.setItemsPerPage}} @selected={{this.itemsPerPage}}/>
       </div>
-      <span class="bx--pagination__text">
+      <span class="cds--pagination__text">
       <span data-displayed-item-range>{{this.currentSlice.start}} - {{this.currentSlice.end}}</span> of
       <span data-total-items>
         {{this.args.length}}
       </span> items
     </span>
     </div>
-    <div class="bx--pagination__right">
+    <div class="cds--pagination__right">
       <Select @searchEnabled={{false}} @options={{range 1 this.pages true}} @onSelect={{this.setCurrentPage}} @selected={{this.currentPage}}/>
-      <label id="select-id-pagination-page-label" class="bx--pagination__text" for="select-id-pagination-page">
+      <label id="select-id-pagination-page-label" class="cds--pagination__text" for="select-id-pagination-page">
         {{this.currentPage}} of {{this.pages}} pages
       </label>
-      <button disabled={{eq this.currentPage 1}} {{on 'click' this.pageBack}} class="bx--pagination__button bx--pagination__button--backward " tabindex="0" data-page-backward aria-label="previous page">
-        <Icon class="bx--pagination__nav-arrow" @icon="chevron--left" />
+      <button disabled={{eq this.currentPage 1}} {{on 'click' this.pageBack}} class="cds--pagination__button cds--pagination__button--backward " tabindex="0" data-page-backward aria-label="previous page">
+        <Icon class="cds--pagination__nav-arrow" @icon="chevron--left" />
       </button>
-      <button disabled={{eq this.currentPage this.pages}} {{on 'click' this.pageForward}} class="bx--pagination__button bx--pagination__button--forward " tabindex="0" data-page-forward aria-label="next page">
-        <Icon class="bx--pagination__nav-arrow" @icon="chevron--right" />
+      <button disabled={{eq this.currentPage this.pages}} {{on 'click' this.pageForward}} class="cds--pagination__button cds--pagination__button--forward " tabindex="0" data-page-forward aria-label="next page">
+        <Icon class="cds--pagination__nav-arrow" @icon="chevron--right" />
       </button>
     </div>
   {{/if}}
diff --git a/addon/components/search-input/template.hbs b/addon/components/search-input/template.hbs
index c421625f..5985263c 100644
--- a/addon/components/search-input/template.hbs
+++ b/addon/components/search-input/template.hbs
@@ -3,16 +3,16 @@
      {{did-update (fn this.setValue @value) @value}}
      {{did-update (fn this.onSearchChange) this.value}}
      role="search"
-     class="bx--search bx--search--{{if @size @size 'lg'}} {{if @light 'bx--search--light'}} {{if @isLoading 'bx--skeleton'}}" ...attributes>
+     class="cds--search cds--search--{{if @size @size 'lg'}} {{if @light 'cds--search--light'}} {{if @isLoading 'cds--skeleton'}}" ...attributes>
   {{#if this.hasInput}}
-      <button class="bx--search-close" title="Clear search input" aria-label="Clear search input" {{on 'click' this.onSearchClear}}>
-          <Icon @icon="close" @class="bx--search-clear" />
+      <button class="cds--search-close" title="Clear search input" aria-label="Clear search input" {{on 'click' this.onSearchClear}}>
+          <Icon @icon="close" @class="cds--search-clear" />
       </button>
   {{/if}}
-    <label id="search-input-label-{{this.guid}}" class="bx--label" for="search__input-{{this.guid}}">Search</label>
-    <input class="bx--search-input" type="text" id="search__input-{{this.guid}}" placeholder="Search"
+    <label id="search-input-label-{{this.guid}}" class="cds--label" for="search__input-{{this.guid}}">Search</label>
+    <input class="cds--search-input" type="text" id="search__input-{{this.guid}}" placeholder="Search"
            value={{this.value}}
       {{on 'change' (fn this.setValue)}}
       {{on 'input' (fn this.setValue)}} >
-    <Icon @icon="search" @class="bx--search-magnifier" />
+    <Icon @icon="search" @class="cds--search-magnifier" />
 </div>
\ No newline at end of file
diff --git a/addon/components/select/component.ts b/addon/components/select/component.ts
index 53a65be8..33da64a7 100644
--- a/addon/components/select/component.ts
+++ b/addon/components/select/component.ts
@@ -85,7 +85,7 @@ export default class SelectComponent extends Component<Args> {
   didInsert(element) {
     // eslint-disable-next-line ember/no-jquery
     jQuery(element).find('.ember-power-select-status-icon').replaceWith(''
-      + '<svg class="bx--dropdown__arrow" '
+      + '<svg class="cds--dropdown__arrow" '
       + 'width="10" height="6" viewBox="0 0 10 6">\n'
       + '    <path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path>\n'
       + '  </svg>');
diff --git a/addon/components/tabs/template.hbs b/addon/components/tabs/template.hbs
index 61b2611e..e9f40ae5 100644
--- a/addon/components/tabs/template.hbs
+++ b/addon/components/tabs/template.hbs
@@ -1,12 +1,12 @@
-<div data-tabs class="bx--tabs" ...attributes>
-    <div class="bx--tabs-trigger {{if this.open 'bx--tabs-trigger--open'}}" tabindex="0">
-        <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1" {{on 'click' (fn (mut this.open) (not this.open))}}></a>
+<div data-tabs class="cds--tabs" ...attributes>
+    <div class="cds--tabs-trigger {{if this.open 'cds--tabs-trigger--open'}}" tabindex="0">
+        <a href="javascript:void(0)" class="cds--tabs-trigger-text" tabindex="-1" {{on 'click' (fn (mut this.open) (not this.open))}}></a>
         <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 .7.3 5 4.6 9.3.3l.7.7z"></path></svg>
     </div>
-    <ul class="bx--tabs__nav {{unless this.open 'bx--tabs__nav--hidden'}}" role="tablist">
+    <ul class="cds--tabs__nav {{unless this.open 'cds--tabs__nav--hidden'}}" role="tablist">
       {{#each @tabs as |tab index|}}
-          <li class="bx--tabs__nav-item {{if (eq @selectedTab.title tab.title) 'bx--tabs__nav-item--selected'}} " role="presentation">
-              <a tabindex="0" id="tab-link-{{index}}" class="bx--tabs__nav-link" href="javascript:void(0)"
+          <li class="cds--tabs__nav-item {{if (eq @selectedTab.title tab.title) 'cds--tabs__nav-item--selected'}} " role="presentation">
+              <a tabindex="0" id="tab-link-{{index}}" class="cds--tabs__nav-link" href="javascript:void(0)"
                  role="tab" aria-controls="tab-panel-{{index}}" aria-selected="{{if (eq @selectedTab.title tab.title) 'true'}}"
                  {{on 'click' (fn @tabSelected tab)}}
               >
diff --git a/addon/components/tag/template.hbs b/addon/components/tag/template.hbs
index 002dc384..6132318a 100644
--- a/addon/components/tag/template.hbs
+++ b/addon/components/tag/template.hbs
@@ -1 +1 @@
-<div class="bx--tag bx--tag--{{this.type}}" ...attributes>{{yield}}</div>
\ No newline at end of file
+<div class="cds--tag cds--tag--{{this.type}}" ...attributes>{{yield}}</div>
\ No newline at end of file
diff --git a/addon/components/tile/template.hbs b/addon/components/tile/template.hbs
index 3977676c..8d64d398 100644
--- a/addon/components/tile/template.hbs
+++ b/addon/components/tile/template.hbs
@@ -2,35 +2,35 @@
 {{import set from 'carbon-components-ember/helpers/set'}}
 
 {{#if @selectable}}
-  <label for="tile-{{this.guid}}" aria-label="tile" class="bx--tile bx--tile--selectable {{if this.selected 'bx--tile--is-selected'}}" data-tile="selectable" tabindex={{@tabindex}}>
-    <input checked={{this.selected}} {{on 'change' this.onSelect}}  {{on 'change' (set this 'selected' 'target.checked')}} tabindex="-1" data-tile-input id="tile-{{this.guid}}" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile"
+  <label for="tile-{{this.guid}}" aria-label="tile" class="cds--tile cds--tile--selectable {{if this.selected 'cds--tile--is-selected'}}" data-tile="selectable" tabindex={{@tabindex}}>
+    <input checked={{this.selected}} {{on 'change' this.onSelect}}  {{on 'change' (set this 'selected' 'target.checked')}} tabindex="-1" data-tile-input id="tile-{{this.guid}}" class="cds--tile-input" value="tile" type="checkbox" name="tiles" title="tile"
     />
-    <div class="bx--tile__checkmark">
+    <div class="cds--tile__checkmark">
       <Icon @icon="checkmark--filled"/>
     </div>
-    <div class="bx--tile-content">
+    <div class="cds--tile-content">
       {{yield to='content'}}
     </div>
   </label>
 {{/if}}
 {{#if @expandable}}
-  <div data-tile="expandable" class="bx--tile bx--tile--expandable {{if this.expanded 'bx--tile--is-expanded'}}" tabindex={{@tabindex}}>
-    <button class="bx--tile__chevron" {{on 'click' (fn (set this 'expanded') (not this.expanded))}}>
+  <div data-tile="expandable" class="cds--tile cds--tile--expandable {{if this.expanded 'cds--tile--is-expanded'}}" tabindex={{@tabindex}}>
+    <button class="cds--tile__chevron" {{on 'click' (fn (set this 'expanded') (not this.expanded))}}>
       <Icon @icon="chevron--down" />
     </button>
-    <span data-tile-atf class="bx--tile-content__above-the-fold">
+    <span data-tile-atf class="cds--tile-content__above-the-fold">
         {{yield to='above'}}
       </span>
-    <div class="bx--tile-content">      
-      {{yield to='content'}}      
+    <div class="cds--tile-content">
+      {{yield to='content'}}
     </div>
-    <span class="bx--tile-content__below-the-fold">
+    <span class="cds--tile-content__below-the-fold">
         {{yield to='below'}}
       </span>
   </div>
 {{/if}}
 {{#if this.default}}
-  <div class="bx--tile {{if @clickable 'bx--tile--clickable'}}" {{on 'click' this.onClick}}>
+  <div class="cds--tile {{if @clickable 'cds--tile--clickable'}}" {{on 'click' this.onClick}}>
     {{yield to='content'}}
   </div>
 {{/if}}
diff --git a/addon/components/toggle/template.hbs b/addon/components/toggle/template.hbs
index 8cc54ad2..bf88e3e9 100644
--- a/addon/components/toggle/template.hbs
+++ b/addon/components/toggle/template.hbs
@@ -1,5 +1,5 @@
-<div class="bx--form-item">
-  <input class="bx--toggle" id="toggle{{this.guid}}"
+<div class="cds--form-item">
+  <input class="cds--toggle" id="toggle{{this.guid}}"
          type="checkbox"
          disabled={{if @disabled 'true' false}}
          readonly='{{@readonly}}'
@@ -7,9 +7,9 @@
          checked={{if @value true false}}
          onchange={{fn this.onToggleChange}}
   >
-  <label class="bx--toggle__label" for="toggle{{this.guid}}">
-    <span class="bx--toggle__text--left">Off</span>
-    <span class="bx--toggle__appearance"></span>
-    <span class="bx--toggle__text--right">On</span>
+  <label class="cds--toggle__label" for="toggle{{this.guid}}">
+    <span class="cds--toggle__text--left">Off</span>
+    <span class="cds--toggle__appearance"></span>
+    <span class="cds--toggle__text--right">On</span>
   </label>
 </div>
\ No newline at end of file
diff --git a/addon/components/ui-shell/-header/template.hbs b/addon/components/ui-shell/-header/template.hbs
index 79e4f5e2..0df678dc 100644
--- a/addon/components/ui-shell/-header/template.hbs
+++ b/addon/components/ui-shell/-header/template.hbs
@@ -1,16 +1,16 @@
 {{import Icon from 'carbon-components-ember/components/icon'}}
 {{import eq from 'ember-truth-helpers/helpers/equal'}}
-<header aria-label="IBM Platform Name" class="bx--header" role="banner">
-  <a class="bx--skip-to-content" href="#main-content" tabindex="0">Skip to main content</a>
+<header aria-label="IBM Platform Name" class="cds--header" role="banner">
+  <a class="cds--skip-to-content" href="#main-content" tabindex="0">Skip to main content</a>
   {{#unless @noToggleButton}}
-    <button aria-label="Open menu" class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle {{if @open '' 'bx--header__menu-toggle'}}" title="Open menu" type="button"
+    <button aria-label="Open menu" class="cds--header__action cds--header__menu-trigger cds--header__menu-toggle {{if @open '' 'cds--header__menu-toggle'}}" title="Open menu" type="button"
       {{on 'click' (fn @onToggle (not @open))}}>
       <Icon @icon={{if @open 'close' 'menu'}}/>
     </button>
   {{/unless}}
-  <a class="bx--header__name" href="#"><span class="bx--header__name--prefix">{{@title}} <small>{{@subtitle}}</small></span></a>
+  <a class="cds--header__name" href="#"><span class="cds--header__name--prefix">{{@title}} <small>{{@subtitle}}</small></span></a>
   {{yield to='header'}}
-  <div class="bx--header__global">
+  <div class="cds--header__global">
     {{yield to="header-global"}}
   </div>
 </header>
diff --git a/addon/components/ui-shell/-nav/-item/template.hbs b/addon/components/ui-shell/-nav/-item/template.hbs
index 183d6fca..3199e484 100644
--- a/addon/components/ui-shell/-nav/-item/template.hbs
+++ b/addon/components/ui-shell/-nav/-item/template.hbs
@@ -1,5 +1,5 @@
 <li>
-  <a href="#" class="bx--header__menu-item" tabindex="0">
-    <span class="bx--text-truncate--end">{{yield}}</span>
+  <a href="#" class="cds--header__menu-item" tabindex="0">
+    <span class="cds--text-truncate--end">{{yield}}</span>
   </a>
 </li>
diff --git a/addon/components/ui-shell/-nav/template.hbs b/addon/components/ui-shell/-nav/template.hbs
index be042c77..6f14497a 100644
--- a/addon/components/ui-shell/-nav/template.hbs
+++ b/addon/components/ui-shell/-nav/template.hbs
@@ -1,7 +1,7 @@
 {{import Item from './-item'}}
 
-<nav aria-label="IBM [Platform]" class="bx--header__nav">
-  <ul class="bx--header__menu-bar">
+<nav aria-label="IBM [Platform]" class="cds--header__nav">
+  <ul class="cds--header__menu-bar">
     {{yield Item}}
   </ul>
 </nav>
diff --git a/addon/components/ui-shell/-sidenav/-menu/template.hbs b/addon/components/ui-shell/-sidenav/-menu/template.hbs
index 167fc328..82f0500e 100644
--- a/addon/components/ui-shell/-sidenav/-menu/template.hbs
+++ b/addon/components/ui-shell/-sidenav/-menu/template.hbs
@@ -4,37 +4,37 @@
 
 {{#if @submenus}}
   {{#let (new-obj) as |obj|}}
-  <li class="bx--side-nav__item {{if @icon 'bx--side-nav__item--icon'}}">
-    <button class="bx--side-nav__submenu" aria-haspopup="true" aria-expanded="{{get obj (concat @title '-expanded')}}"
+  <li class="cds--side-nav__item {{if @icon 'cds--side-nav__item--icon'}}">
+    <button class="cds--side-nav__submenu" aria-haspopup="true" aria-expanded="{{get obj (concat @title '-expanded')}}"
       {{on 'click' (fn (toggle (concat @title '-expanded') obj))}}>
       {{#if @icon}}
-        <div class="bx--side-nav__icon">
+        <div class="cds--side-nav__icon">
           <Icon @icon="{{@icon}}"/>
         </div>
       {{/if}}
-      <span class="bx--side-nav__submenu-title">{{@title}}</span>
-      <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
+      <span class="cds--side-nav__submenu-title">{{@title}}</span>
+      <div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">
         <Icon @icon='chevron--down' />
       </div>
     </button>
     {{#if (get obj (concat @title '-expanded'))}}
-      <ul role="menu" class="bx--side-nav__menu" style="    max-height: 93.75rem; visibility: inherit;">
+      <ul role="menu" class="cds--side-nav__menu" style="    max-height: 93.75rem; visibility: inherit;">
         {{yield SubMenu}}
       </ul>
     {{/if}}
   </li>
   {{/let}}
 {{else unless @hidden}}
-  <li class="bx--side-nav__item">
-    <a class="bx--side-nav__link"
+  <li class="cds--side-nav__item">
+    <a class="cds--side-nav__link"
        aria-current="{{if @isCurrent 'page'}}"
       {{on 'click' @transitionTo}}>
       {{#if @icon}}
-        <div class="bx--side-nav__icon bx--side-nav__icon--small">
+        <div class="cds--side-nav__icon cds--side-nav__icon--small">
           <Icon @icon="{{@icon}}"/>
         </div>
       {{/if}}
-      <span class="bx--side-nav__link-text">{{@title}}</span>
+      <span class="cds--side-nav__link-text">{{@title}}</span>
     </a>
   </li>
 {{/if}}
diff --git a/addon/components/ui-shell/-sidenav/-sub-menu/template.hbs b/addon/components/ui-shell/-sidenav/-sub-menu/template.hbs
index a96c50ab..ca042fe4 100644
--- a/addon/components/ui-shell/-sidenav/-sub-menu/template.hbs
+++ b/addon/components/ui-shell/-sidenav/-sub-menu/template.hbs
@@ -1,13 +1,13 @@
 {{import Icon from 'carbon-components-ember/components/icon'}}
 
-<li class="bx--side-nav__menu-item">
-  <a role="menuitem" aria-current="{{if @isCurrent 'page'}}" class="bx--side-nav__link" role="menuitem"
+<li class="cds--side-nav__menu-item">
+  <a role="menuitem" aria-current="{{if @isCurrent 'page'}}" class="cds--side-nav__link" role="menuitem"
     {{on 'click'@transitionTo}}>
     {{#if @icon}}
-      <div class="bx--side-nav__icon">
+      <div class="cds--side-nav__icon">
         <Icon @icon="{{@icon}}"/>
       </div>
     {{/if}}
-    <span class="bx--side-nav__link-text">{{@title}}</span>
+    <span class="cds--side-nav__link-text">{{@title}}</span>
   </a>
 </li>
diff --git a/addon/components/ui-shell/-sidenav/styles.scoped.scss b/addon/components/ui-shell/-sidenav/styles.scoped.scss
index 9ea7ab56..6def30fa 100644
--- a/addon/components/ui-shell/-sidenav/styles.scoped.scss
+++ b/addon/components/ui-shell/-sidenav/styles.scoped.scss
@@ -1,9 +1,9 @@
 .namespace {
-  &.bx--side-nav--ux {
+  &.cds--side-nav--ux {
     width: 3.5rem;
   }
 
-  &.bx--side-nav--expanded {
+  &.cds--side-nav--expanded {
     width: 16rem;
   }
 }
diff --git a/addon/components/ui-shell/-sidenav/template.hbs b/addon/components/ui-shell/-sidenav/template.hbs
index 8617cd62..f72ee1a3 100644
--- a/addon/components/ui-shell/-sidenav/template.hbs
+++ b/addon/components/ui-shell/-sidenav/template.hbs
@@ -6,9 +6,9 @@
 {{import Menu from './-menu'}}
 
 
-<nav class="bx--side-nav__navigation bx--side-nav bx--side-nav--ux {{if @open 'bx--side-nav--expanded'}} {{styles.namespace}}"
+<nav class="cds--side-nav__navigation cds--side-nav cds--side-nav--ux {{if @open 'cds--side-nav--expanded'}} {{styles.namespace}}"
      role="navigation" aria-label="Page Navigation" aria-expanded="true">
-  <ul class="bx--side-nav__items">
+  <ul class="cds--side-nav__items">
     {{#unless @menuItems}}
       {{yield Menu}}
     {{/unless}}
diff --git a/addon/components/ui-shell/template.hbs b/addon/components/ui-shell/template.hbs
index 3b2d6333..0637c8fc 100644
--- a/addon/components/ui-shell/template.hbs
+++ b/addon/components/ui-shell/template.hbs
@@ -3,7 +3,7 @@
 {{import Nav from './-nav'}}
 
 {{yield (hash Header=Header Sidenav=Sidenav Nav=Nav) to="shell"}}
-<main id="main-content" class="bx--content">
+<main id="main-content" class="cds--content">
   {{yield to="content"}}
 </main>
 
diff --git a/app/styles/carbon-components-ember.scss b/app/styles/carbon-components-ember.scss
index 89db34a9..58c160f1 100644
--- a/app/styles/carbon-components-ember.scss
+++ b/app/styles/carbon-components-ember.scss
@@ -1,9 +1,7 @@
 
-@use '@carbon/styles' with (
-  $prefix: "bx"
-);
+@use '@carbon/styles';
 @use '@carbon/grid';
-@use '@carbon/charts';
+@use '@carbon/charts/styles/styles' as chart-styles;
 
 @include grid.flex-grid();
 @include grid.css-grid();
@@ -80,16 +78,16 @@ $ember-power-select-multiple-option-padding: 0.5rem 1.5rem 0.5rem 1rem !default;
 $ember-power-select-multiple-option-line-height: 1.45 !default;
 
 .ember-power-select-multiple-trigger {
-  .bx--checkbox-wrapper {
+  .cds--checkbox-wrapper {
     display: inline-block;
   }
   input[type='checkbox'] {
     display: none;
   }
-  .bx--checkbox-label {
+  .cds--checkbox-label {
     padding: 0;
   }
-  .bx--checkbox-label::before, .bx--checkbox-label::after {
+  .cds--checkbox-label::before, .cds--checkbox-label::after {
     display: none;
   }
   br {
@@ -142,12 +140,12 @@ $ember-power-select-multiple-option-line-height: 1.45 !default;
   color: #3d4852;
 }
 
-.bx--snippet {
+.cds--snippet {
   margin-bottom: 15px;
 }
 
 .ember-basic-dropdown {
-  .bx--dropdown__arrow {
+  .cds--dropdown__arrow {
     height: 100%;
     top: 0;
   }
@@ -157,7 +155,7 @@ $ember-power-select-multiple-option-line-height: 1.45 !default;
   box-shadow: 0 3px 3px 0 rgba(0,0,0,.1);
 }
 
-.bx--overflow-menu-options {
+.cds--overflow-menu-options {
   top: 0;
 }
 
@@ -179,3 +177,4 @@ $ember-power-select-multiple-option-line-height: 1.45 !default;
 
 @import "../ember-power-select";
 @import "../ember-basic-dropdown";
+
diff --git a/package.json b/package.json
index 05ec62be..95a78440 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.13",
+  "version": "0.5.0",
   "name": "carbon-components-ember",
   "keywords": [
     "ember-addon"
@@ -21,7 +21,7 @@
     "testserver": "ember test --serve"
   },
   "overrides": {
-    "broccoli-sass-source-maps": "patricklx/broccoli-sass-source-maps#patch-1",
+    "broccoli-sass-source-maps": "patricklx/broccoli-sass-source-maps",
     "@embroider/macros": "^1.7.1",
     "@embroider/core": "^1.7.1",
     "@embroider/util": "^1.7.1",
@@ -77,7 +77,8 @@
   },
   "dependencies": {
     "@carbon/charts": "^1.5.0",
-    "@carbon/colors": "^11.2.0",
+    "@carbon/import-once": "^10.7.0",
+    "@carbon/colors": "^11.3.0",
     "@carbon/grid": "^11.2.0",
     "@carbon/icon-helpers": "^10.30.0",
     "@carbon/icons": "^11.3.0",
diff --git a/tests/dummy/app/pods/docs/components/button/template.hbs b/tests/dummy/app/pods/docs/components/button/template.hbs
index a4e55eb5..c1648833 100644
--- a/tests/dummy/app/pods/docs/components/button/template.hbs
+++ b/tests/dummy/app/pods/docs/components/button/template.hbs
@@ -79,12 +79,11 @@
         @danger={{this.isDanger}}
         @tertiary={{this.isTertiary}}
         @small={{this.isSmall}}
-        @onClick={{set this 'clicked' true}}
+        @onClick={{fn (set this 'clicked') true}}
         @bubbles={{this.bubbles}}
         @confirmText={{this.confirmText}}
     >
       Button Text
     </Button>
   {{/demo.example}}
-  {{demo.snippet 'button-all.hbs'}}
 </Demo>
\ No newline at end of file