diff --git a/addon/components/paper-ink-bar.hbs b/addon/components/paper-ink-bar.hbs
new file mode 100644
index 000000000..fc13e442e
--- /dev/null
+++ b/addon/components/paper-ink-bar.hbs
@@ -0,0 +1,2 @@
+<md-ink-bar class={{if @movingRight 'md-right' 'md-left'}} style={{this.style}}>
+</md-ink-bar>
\ No newline at end of file
diff --git a/addon/components/paper-ink-bar.js b/addon/components/paper-ink-bar.js
index 41819dadf..18bc6214e 100644
--- a/addon/components/paper-ink-bar.js
+++ b/addon/components/paper-ink-bar.js
@@ -1,15 +1,8 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 
-export default Component.extend({
-  tagName: 'md-ink-bar',
-
-  attributeBindings: ['style'],
-  classNameBindings: ['movingRight:md-right:md-left'],
-
-  style: computed('left', 'right', function() {
-    return htmlSafe(`left: ${this.left}px; right: ${this.right}px;`);
-  })
-});
+export default class PaperInkBar extends Component {
+  get style() {
+    return htmlSafe(`left: ${this.args.left}px; right: ${this.args.right}px;`);
+  }
+}