diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.html b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
new file mode 100644
index 0000000..6ec3b16
--- /dev/null
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
@@ -0,0 +1,33 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script src="../node_modules/resemblejs/resemble.js"></script>
+<dom-module id="gr-resemble-diff-mode">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+      #imageDiff {
+        border: 1px solid var(--border-color, #ddd);
+        display: block;
+        margin: 0 auto;
+      }
+    </style>
+    <img id="imageDiff">
+  </template>
+  <script src="gr-resemble-diff-mode.js"></script>
+</dom-module>
\ No newline at end of file
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
new file mode 100644
index 0000000..1c9076e
--- /dev/null
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
@@ -0,0 +1,55 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-resemble-diff-mode',
+
+    properties: {
+      baseImage: Object,
+      revisonImage: Object,
+    },
+
+    observers: [
+      '_handleImageDiff(baseImage, revisionImage)',
+    ],
+
+    _handleImageDiff(base, revision) {
+      if (base && revision) {
+        const baseEncoded = this.getDataUrl(base);
+        const revisionEncoded = this.getDataUrl(revision);
+        return this.compareImages(baseEncoded, revisionEncoded).then(src => {
+          this.$.imageDiff.setAttribute('src', src);
+        });
+      }
+    },
+
+    compareImages(baseEncoded, revisionEncoded) {
+      return new Promise((resolve, reject) =>
+          resemble(baseEncoded).compareTo(revisionEncoded).onComplete(data => {
+            if (data.error) {
+              reject();
+            } else {
+              resolve(data.getImageDataUrl());
+            }
+          })
+      );
+    },
+
+    getDataUrl(image) {
+      return 'data:' + image['type'] + ';base64,' + image['body'];
+    },
+  });
+})();
\ No newline at end of file
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
new file mode 100644
index 0000000..65460cc
--- /dev/null
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -0,0 +1,83 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>resemble-diff-mode</title>
+
+<link rel="import" href="../node_modules/polymer/polymer.html">
+<link rel="import" href="../node_modules/@polymer/test-fixture/test-fixture.html">
+<link rel="import" href="../node_modules/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="./gr-resemble-diff-mode.html">
+
+<script>void(0);</script>
+
+<script src="../node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
+<script src="../node_modules/web-component-tester/browser.js"></script>
+<script src="../node_modules/@polymer/sinonjs/sinon.js"></script>
+
+<test-fixture id="basicFixture">
+  <template>
+    <gr-resemble-diff-mode>
+    </gr-resemble-diff-mode>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-resemble-diff-mode tests', () => {
+    let element;
+
+    setup(() => {
+      element = fixture('basicFixture');
+    });
+
+    test('test initialization', () => {
+      assert.notEqual(element, null);
+      assert.equal(element.baseImage, null);
+      assert.equal(element.revisionImage, null);
+    });
+
+    test('test getDataUrl', () => {
+      element.baseImage = {
+        type: 'image/png',
+        body: 'SGVsbG8=',
+      };
+      const desiredOutput = 'data:image/png;base64,SGVsbG8=';
+      assert.equal(element.getDataUrl(element.baseImage), desiredOutput);
+    });
+
+    test('test resemble mode image diff', () => {
+      const img = element.$.imageDiff;
+      const expected_result = 'data:image/png;base64,SGVsbG8V29ybGQ==';
+      assert.isFalse(img.hasAttribute('src'));
+      element.baseImage = {
+        type: 'image/png',
+        body: 'SGVsbG8=',
+      };
+      assert.isFalse(img.hasAttribute('src'));
+      element.revisionImage = {
+        type: 'image/png',
+        body: 'V29ybGQ=',
+      };
+      flushAsynchronousOperations();
+      sinon.stub(element, 'compareImages')
+          .returns(Promise.resolve(expected_result));
+      return element._handleImageDiff(element.baseImage, element.revisionImage)
+          .then(() => {
+            assert.equal(img.src, expected_result);
+          });
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 7a02c3f..181c106 100644
--- a/test/index.html
+++ b/test/index.html
@@ -19,13 +19,14 @@
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>Test Runner</title>
 <meta charset="utf-8">
-<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-<script src="../bower_components/web-component-tester/browser.js"></script>
+<script src="../node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
+<script src="../node_modules/web-component-tester/browser.js"></script>
+
 <script>
   const suites = [
-    // Insert test suites here.
+    '../gr-resemble-diff-mode/gr-resemble-diff-mode_test.html',
   ];
 
   WCT.loadSuites(suites);
-  WCT.loadSuites(suites.forEach(suite => `${suite}?dom=shadow`));
+  WCT.loadSuites(suites.map(suite => `${suite}?dom=shadow`));
 </script>
\ No newline at end of file