diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..58d9402
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+test/acceptance/*
+reports
diff --git a/.eslintrc.json b/.eslintrc.json
index ae5320e..3dacc9b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "brightspace/wct-config"
+  "extends": "brightspace/wct-polymer-3-config"
 }
diff --git a/.gitignore b/.gitignore
index e099433..2402785 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-bower_components*
-bower-*
 node_modules
 package-lock.json
+
+node_modules
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 87fd6f8..0000000
--- a/bower.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "d2l-image",
-  "description": "A webcomponent for images requiring authentication",
-  "main": "d2l-image.html",
-  "moduleType": [
-    "polymer"
-  ],
-  "dependencies": {
-    "iron-ajax": "^2.0.7",
-    "polymer": "1 - 2"
-  },
-  "devDependencies": {
-    "web-component-tester": "^6.0.0"
-  },
-  "variants": {
-    "1.x": {
-      "dependencies": {
-        "polymer": "^1.9.1"
-      },
-      "resolutions": {
-        "webcomponentsjs": "^0.7"
-      }
-    }
-  },
-  "resolutions": {
-    "webcomponentsjs": "^1.0.0"
-  }
-}
diff --git a/d2l-image.html b/d2l-image.html
deleted file mode 100644
index fc21c19..0000000
--- a/d2l-image.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-ajax/iron-ajax.html">
-
-<dom-module id="d2l-image">
-	<template strip-whitespace>
-		<style>
-			:host {
-				display: block;
-			}
-
-			img {
-				width:100%;
-				height: 100%;
-				border-radius: var(--d2l-image-border-radius);
-				object-fit: var(--d2l-image-object-fit);
-			}
-		</style>
-
-		<iron-ajax
-			id="imageRequest"
-			url="[[imageUrl]]"
-			headers="[[_headers]]"
-			on-iron-ajax-response="_onImageResponse"
-			on-iron-ajax-error="_onImageResponse"
-			handle-as="blob">
-		</iron-ajax>
-
-		<img id="image" alt="{{alternateText}}"/>
-	</template>
-	<script>
-	'use strict';
-
-	Polymer({
-		is: 'd2l-image',
-
-		properties: {
-			alternateText: String,
-			imageUrl: {
-				type: String,
-				value: null
-			},
-			token: String,
-			_headers: String
-		},
-
-		observers: [
-			'_onImageUrlChange( imageUrl, token )'
-		],
-
-		_onImageUrlChange: function(imageUrl, token) {
-			if (imageUrl && token) {
-				this._headers = {
-					Authorization: 'Bearer ' + token
-				};
-				this.$.imageRequest.generateRequest();
-			} else if (imageUrl) {
-				this.$.image.src = imageUrl;
-			}
-		},
-
-		_onImageResponse: function(response) {
-			if (response.detail.status === 200) {
-				if (this.$.image.src) {
-					URL.revokeObjectURL(this.$.image.src);
-				}
-				this.$.image.src = URL.createObjectURL(response.detail.response);
-				this.dispatchEvent(new CustomEvent('d2l-image-loaded', {
-					bubbles: true,
-					composed: true,
-					detail: { response: response }
-				}));
-			} else {
-				this.dispatchEvent(new CustomEvent('d2l-image-failed-to-load', {
-					bubbles: true,
-					composed: true,
-					detail: { response: response }
-				}));
-			}
-		}
-	});
-	</script>
-</dom-module>
diff --git a/d2l-image.js b/d2l-image.js
new file mode 100644
index 0000000..fc8dc72
--- /dev/null
+++ b/d2l-image.js
@@ -0,0 +1,78 @@
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/iron-ajax/iron-ajax.js';
+import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<dom-module id="d2l-image">
+	<template strip-whitespace="">
+		<style>
+			:host {
+				display: block;
+			}
+
+			img {
+				width:100%;
+				height: 100%;
+				border-radius: var(--d2l-image-border-radius);
+				object-fit: var(--d2l-image-object-fit);
+			}
+		</style>
+
+		<iron-ajax id="imageRequest" url="[[imageUrl]]" headers="[[_headers]]" on-iron-ajax-response="_onImageResponse" on-iron-ajax-error="_onImageResponse" handle-as="blob">
+		</iron-ajax>
+
+		<img id="image" alt="{{alternateText}}">
+	</template>
+	
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
+
+Polymer({
+	is: 'd2l-image',
+
+	properties: {
+		alternateText: String,
+		imageUrl: {
+			type: String,
+			value: null
+		},
+		token: String,
+		_headers: String
+	},
+
+	observers: [
+		'_onImageUrlChange( imageUrl, token )'
+	],
+
+	_onImageUrlChange: function(imageUrl, token) {
+		if (imageUrl && token) {
+			this._headers = {
+				Authorization: 'Bearer ' + token
+			};
+			this.$.imageRequest.generateRequest();
+		} else if (imageUrl) {
+			this.$.image.src = imageUrl;
+		}
+	},
+
+	_onImageResponse: function(response) {
+		if (response.detail.status === 200) {
+			if (this.$.image.src) {
+				URL.revokeObjectURL(this.$.image.src);
+			}
+			this.$.image.src = URL.createObjectURL(response.detail.response);
+			this.dispatchEvent(new CustomEvent('d2l-image-loaded', {
+				bubbles: true,
+				composed: true,
+				detail: { response: response }
+			}));
+		} else {
+			this.dispatchEvent(new CustomEvent('d2l-image-failed-to-load', {
+				bubbles: true,
+				composed: true,
+				detail: { response: response }
+			}));
+		}
+	}
+});
diff --git a/package.json b/package.json
index 4b8b762..5e5f4cb 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,46 @@
 {
-  "name": "d2l-image",
   "description": "A Polymer-based web component for images requiring authentication",
-  "private": true,
-  "scripts": {
-    "postinstall": "polymer install --variants",
-    "lint": "npm run lint:html && npm run lint:wc",
-    "lint:html": "eslint *.html",
-    "lint:wc": "polymer lint -i d2l-image.html",
-    "test": "npm run lint && polymer test --skip-plugin sauce"
-  },
-  "homepage": "https://github.com/Brightspace/d2l-image#readme",
+  "keywords": [
+    "d2l",
+    "image"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Brightspace/d2l-image.git"
   },
+  "homepage": "https://github.com/Brightspace/d2l-image#readme",
+  "name": "d2l-image",
+  "scripts": {
+    "lint": "npm run lint:wc && npm run lint:js",
+    "lint:js": "eslint . --ext .js,.html test/**/*.js test/**/*.html demo/**/*.js demo/**/*.html",
+    "lint:wc": "polymer lint",
+    "test": "npm run lint && polymer test --skip-plugin sauce"
+  },
   "bugs": {
     "url": "https://github.com/Brightspace/d2l-image/issues"
   },
-  "keywords": [
-    "d2l",
-    "image"
-  ],
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.2.1",
+    "babel-eslint": "^10.0.1",
     "eslint": "^4.15.0",
     "eslint-config-brightspace": "^0.4.0",
     "eslint-plugin-html": "^4.0.1",
-    "polymer-cli": "^1.5.7",
+    "polymer-cli": "^1.9.4",
+    "wct-browser-legacy": "^1.0.1",
     "web-component-tester": "^6.4.1"
+  },
+  "version": "",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0"
+  },
+  "main": "d2l-image.js",
+  "dependencies": {
+    "@polymer/iron-ajax": "^3.0.0",
+    "@polymer/polymer": "^3.0.0"
   }
 }
diff --git a/polymer.json b/polymer.json
index 6f86db0..864a60e 100644
--- a/polymer.json
+++ b/polymer.json
@@ -1,5 +1,6 @@
 {
+  "npm": true,
   "lint": {
-    "rules": ["polymer-2-hybrid"]
+    "rules": ["polymer-3"]
   }
 }
diff --git a/test/d2l-image.html b/test/d2l-image.html
index 617a94c..55efcdd 100644
--- a/test/d2l-image.html
+++ b/test/d2l-image.html
@@ -3,10 +3,10 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 
-		<link rel="import" href="../d2l-image.html">
+		<script type="module" src="../d2l-image.js"></script>
 	</head>
 	<body>
 		<test-fixture id="d2l-image-fixture">
@@ -25,6 +25,6 @@
 				></d2l-image>
 			</template>
 		</test-fixture>
-		<script src="d2l-image.js"></script>
+		<script src="./d2l-image.js"></script>
 	</body>
 </html>
diff --git a/test/index.html b/test/index.html
index 2c490bd..b9faf5b 100644
--- a/test/index.html
+++ b/test/index.html
@@ -3,8 +3,8 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 	</head>
 	<body>
 		<script>