diff --git a/addon/components/ember-collection-cell/component.js b/addon/components/ember-collection-cell/component.js
new file mode 100644
index 00000000..69cd0248
--- /dev/null
+++ b/addon/components/ember-collection-cell/component.js
@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import layout from './template';
+import CspStyleMixin from 'ember-cli-csp-style/mixins/csp-style';
+
+export default Ember.Component.extend(CspStyleMixin, {
+  layout,
+  cell: null,
+  classNames: ['cell'],
+  styleBindings: ['style']
+});
diff --git a/addon/components/ember-collection-cell/template.hbs b/addon/components/ember-collection-cell/template.hbs
new file mode 100644
index 00000000..889d9eea
--- /dev/null
+++ b/addon/components/ember-collection-cell/template.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/addon/components/ember-collection/template.hbs b/addon/components/ember-collection/template.hbs
index c54b8d76..0d581071 100644
--- a/addon/components/ember-collection/template.hbs
+++ b/addon/components/ember-collection/template.hbs
@@ -1,7 +1,9 @@
 {{#ember-native-scrollable content-size=_contentSize scroll-left=_scrollLeft scroll-top=_scrollTop scrollChange=(action "scrollChange") clientSizeChange=(action "clientSizeChange")}}
   <div>
     {{~#each _cells as |cell|~}}
-      <div style={{{cell.style}}}>{{yield cell.item cell.index }}</div>
+      {{#ember-collection-cell style=cell.style}}
+      	{{yield cell.item cell.index }}
+      {{/ember-collection-cell}}
     {{~/each~}}
   </div>
 {{/ember-native-scrollable}}
diff --git a/app/components/ember-collection-cell.js b/app/components/ember-collection-cell.js
new file mode 100644
index 00000000..65131ad1
--- /dev/null
+++ b/app/components/ember-collection-cell.js
@@ -0,0 +1 @@
+export { default } from 'ember-collection/components/ember-collection-cell/component';
\ No newline at end of file
diff --git a/app/components/ember-collection-cell/component.js b/app/components/ember-collection-cell/component.js
new file mode 100644
index 00000000..65131ad1
--- /dev/null
+++ b/app/components/ember-collection-cell/component.js
@@ -0,0 +1 @@
+export { default } from 'ember-collection/components/ember-collection-cell/component';
\ No newline at end of file
diff --git a/package.json b/package.json
index 00ae3634..ed9d7880 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "broccoli-asset-rev": "^2.2.0",
     "ember-cli": "2.3.0",
     "ember-cli-app-version": "^1.0.0",
+    "ember-cli-csp-style": "^2.0.3",
     "ember-cli-dependency-checker": "^1.2.0",
     "ember-cli-deploy": "0.5.1",
     "ember-cli-deploy-build": "0.1.0",
diff --git a/tests/integration/components/ember-collection-cell/component-test.js b/tests/integration/components/ember-collection-cell/component-test.js
new file mode 100644
index 00000000..413b1c59
--- /dev/null
+++ b/tests/integration/components/ember-collection-cell/component-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('ember-collection-cell', 'Integration | Component | ember collection cell', {
+  integration: true
+});
+
+test('it renders with style', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{ember-collection-cell}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#ember-collection-cell style="width:150px;"}}
+      template block text
+    {{/ember-collection-cell}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+  assert.equal(this.$('.cell').css("width").trim(), '150px');
+});