diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/package.json b/package.json
index e81048dd..aff0fe03 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "hass",
     "lovelace"
   ],
-  "module": "frigate-card.js",
+  "type": "module",
+  "module": "frigate-hass-card.js",
   "repository": "git@github.com:dermotduffy/frigate-hass-card.git",
   "author": "Dermot Duffy <dermot.duffy@gmail.com>",
   "license": "MIT",
@@ -52,7 +53,7 @@
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",
     "build": "npm run lint && npm run rollup",
-    "lint": "eslint src/*.ts",
+    "lint": "eslint 'src/**/*.ts'",
     "rollup": "rollup -c"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index fcc97cab..2260c357 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,7 +1,6 @@
 import typescript from 'rollup-plugin-typescript2';
 import commonjs from 'rollup-plugin-commonjs';
 import nodeResolve from 'rollup-plugin-node-resolve';
-import babel from 'rollup-plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import serve from 'rollup-plugin-serve';
 import json from '@rollup/plugin-json';
@@ -32,12 +31,11 @@ const plugins = [
   }),
   image(),
   nodeResolve({}),
-  commonjs(),
+  commonjs({
+    include: 'node_modules/**'
+  }),
   typescript(),
   json(),
-  babel({
-    exclude: 'node_modules/**',
-  }),
   dev && serve(serveopts),
   !dev && terser(),
 ];
diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts
index 822a6a31..0d330cae 100644
--- a/src/action-handler-directive.ts
+++ b/src/action-handler-directive.ts
@@ -1,10 +1,10 @@
 import { noChange } from 'lit';
-import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive';
+import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive.js';
 
-import {
+import type {
   ActionHandlerDetail,
   ActionHandlerOptions,
-} from 'custom-card-helpers/dist/types';
+} from 'custom-card-helpers/dist/types.d.js';
 import { fireEvent } from 'custom-card-helpers';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/card.ts b/src/card.ts
index b2ad7790..b736ece6 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -7,10 +7,10 @@ import {
   html,
   unsafeCSS,
 } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { until } from 'lit/directives/until';
+import { until } from 'lit/directives/until.js';
 import {
   HomeAssistant,
   LovelaceCardEditor,
@@ -20,7 +20,7 @@ import {
 import screenfull from 'screenfull';
 import { z } from 'zod';
 
-import { entitySchema, frigateCardConfigSchema } from './types';
+import { entitySchema, frigateCardConfigSchema } from './types.js';
 import type {
   BrowseMediaQueryParameters,
   Entity,
@@ -29,26 +29,26 @@ import type {
   MediaLoadInfo,
   MenuButton,
   Message,
-} from './types';
+} from './types.js';
 
-import { CARD_VERSION, REPO_URL } from './const';
-import { FrigateCardElements } from './components/elements';
-import { FrigateCardMenu, MENU_HEIGHT } from './components/menu';
-import { View } from './view';
-import { homeAssistantWSRequest, shouldUpdateBasedOnHass } from './common';
-import { localize } from './localize/localize';
-import { renderMessage, renderProgressIndicator } from './components/message';
+import { CARD_VERSION, REPO_URL } from './const.js';
+import { FrigateCardElements } from './components/elements.js';
+import { FrigateCardMenu, MENU_HEIGHT } from './components/menu.js';
+import { View } from './view.js';
+import { homeAssistantWSRequest, shouldUpdateBasedOnHass } from './common.js';
+import { localize } from './localize/localize.js';
+import { renderMessage, renderProgressIndicator } from './components/message.js';
 
-import './editor';
-import './components/elements';
-import './components/gallery';
-import './components/image';
-import './components/live';
-import './components/menu';
-import './components/message';
-import './components/viewer';
-import './patches/ha-camera-stream';
-import './patches/ha-hls-player';
+import './editor.js';
+import './components/elements.js';
+import './components/gallery.js';
+import './components/image.js';
+import './components/live.js';
+import './components/menu.js';
+import './components/message.js';
+import './components/viewer.js';
+import './patches/ha-camera-stream.js';
+import './patches/ha-hls-player.js';
 
 import cardStyle from './scss/card.scss';
 
diff --git a/src/common.ts b/src/common.ts
index 1fc8fc08..720a984e 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -1,15 +1,15 @@
 import { ZodSchema, z } from 'zod';
 import { MessageBase } from 'home-assistant-js-websocket';
 import { HomeAssistant } from 'custom-card-helpers';
-import { localize } from './localize/localize';
+import { localize } from './localize/localize.js';
 import type {
   BrowseMediaQueryParameters,
   BrowseMediaSource,
   ExtendedHomeAssistant,
   MediaLoadInfo,
   Message,
-} from './types';
-import { browseMediaSourceSchema } from './types';
+} from './types.js';
+import { browseMediaSourceSchema } from './types.js';
 
 export function getParseErrorKeys<T>(error: z.ZodError<T>): string[] {
   const errors = error.format();
diff --git a/src/components/elements.ts b/src/components/elements.ts
index 09dad581..4990c6e2 100644
--- a/src/components/elements.ts
+++ b/src/components/elements.ts
@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property, query } from 'lit/decorators';
+import { customElement, property, query } from 'lit/decorators.js';
 
 import {
   ExtendedHomeAssistant,
@@ -9,12 +9,12 @@ import {
   MenuIcon,
   MenuStateIcon,
   PictureElements,
-} from '../types';
-import { dispatchErrorMessageEvent, dispatchEvent } from '../common';
+} from '../types.js';
+import { dispatchErrorMessageEvent, dispatchEvent } from '../common.js';
 
 import elementsStyle from '../scss/elements.scss';
-import { localize } from '../localize/localize';
-import { View } from '../view';
+import { localize } from '../localize/localize.js';
+import { View } from '../view.js';
 
 /* A note on picture element rendering:
  *
diff --git a/src/components/gallery.ts b/src/components/gallery.ts
index 85faf32b..72258965 100644
--- a/src/components/gallery.ts
+++ b/src/components/gallery.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
 import { HomeAssistant } from 'custom-card-helpers';
 
@@ -8,18 +8,18 @@ import type {
   BrowseMediaSource,
   BrowseMediaQueryParameters,
   ExtendedHomeAssistant,
-} from '../types';
+} from '../types.js';
 
-import { View } from '../view';
+import { View } from '../view.js';
 import {
   browseMedia,
   browseMediaQuery,
   dispatchErrorMessageEvent,
   dispatchMessageEvent,
   getFirstTrueMediaChildIndex,
-} from '../common';
-import { localize } from '../localize/localize';
-import { renderProgressIndicator } from './message';
+} from '../common.js';
+import { localize } from '../localize/localize.js';
+import { renderProgressIndicator } from './message.js';
 
 import galleryStyle from '../scss/gallery.scss';
 import { styleMap } from 'lit/directives/style-map.js';
diff --git a/src/components/image.ts b/src/components/image.ts
index 3ddead83..864ed772 100644
--- a/src/components/image.ts
+++ b/src/components/image.ts
@@ -1,7 +1,7 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 
-import { dispatchMediaLoadEvent } from '../common';
+import { dispatchMediaLoadEvent } from '../common.js';
 
 import imageStyle from '../scss/image.scss';
 import defaultImage from '../images/frigate-bird-in-sky.jpg'
diff --git a/src/components/live.ts b/src/components/live.ts
index 0fc2cce1..457331cf 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -1,12 +1,12 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
 import { HomeAssistant } from 'custom-card-helpers';
 
-import { signedPathSchema } from '../types';
-import type { ExtendedHomeAssistant, FrigateCardConfig } from '../types';
+import { signedPathSchema } from '../types.js';
+import type { ExtendedHomeAssistant, FrigateCardConfig } from '../types.js';
 
-import { localize } from '../localize/localize';
+import { localize } from '../localize/localize.js';
 import {
   dispatchErrorMessageEvent,
   dispatchMediaLoadEvent,
@@ -14,8 +14,8 @@ import {
   dispatchPauseEvent,
   dispatchPlayEvent,
   homeAssistantWSRequest,
-} from '../common';
-import { renderProgressIndicator } from '../components/message';
+} from '../common.js';
+import { renderProgressIndicator } from '../components/message.js';
 
 import JSMpeg from '@cycjimmy/jsmpeg-player';
 
diff --git a/src/components/menu.ts b/src/components/menu.ts
index 1651642d..17e0e374 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -1,15 +1,17 @@
+import { HassEntity } from 'home-assistant-js-websocket';
 import { HomeAssistant, hasAction, stateIcon } from 'custom-card-helpers';
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS, PropertyValues } from 'lit';
-import { actionHandler } from '../action-handler-directive';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { MenuButton } from '../types';
-import type { ExtendedHomeAssistant, FrigateMenuMode } from '../types';
+
+import { actionHandler } from '../action-handler-directive.js';
+
+import type { ExtendedHomeAssistant, FrigateMenuMode } from '../types.js';
+import { MenuButton } from '../types.js';
+import { shouldUpdateBasedOnHass } from '../common.js';
 
 import menuStyle from '../scss/menu.scss';
-import { HassEntity } from 'home-assistant-js-websocket';
-import { shouldUpdateBasedOnHass } from '../common';
 
 type FrigateCardMenuCallback = (name: string, button: MenuButton) => void;
 
diff --git a/src/components/message.ts b/src/components/message.ts
index 98e7f5f0..c0eacadd 100644
--- a/src/components/message.ts
+++ b/src/components/message.ts
@@ -1,9 +1,9 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 
-import { Message } from '../types';
-import { TROUBLESHOOTING_URL } from '../const';
-import { localize } from '../localize/localize';
+import { Message } from '../types.js';
+import { TROUBLESHOOTING_URL } from '../const.js';
+import { localize } from '../localize/localize.js';
 
 import messageStyle from '../scss/message.scss';
 
diff --git a/src/components/next-prev-control.ts b/src/components/next-prev-control.ts
index b9f68e91..c8cd6ad5 100644
--- a/src/components/next-prev-control.ts
+++ b/src/components/next-prev-control.ts
@@ -1,10 +1,10 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators';
-import { classMap } from 'lit/directives/class-map';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
-import { BrowseMediaSource, NextPreviousControlStyle } from '../types';
+import { BrowseMediaSource, NextPreviousControlStyle } from '../types.js';
 
-import { View } from '../view';
+import { View } from '../view.js';
 
 import controlStyle from '../scss/next-previous-control.scss';
 
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index 53c1557a..0cceb894 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -1,12 +1,12 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
 import { HomeAssistant } from 'custom-card-helpers';
 
 import dayjs from 'dayjs';
-import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat';
+import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat.js';
 
-import { resolvedMediaSchema } from '../types';
+import { resolvedMediaSchema } from '../types.js';
 import type {
   BrowseMediaNeighbors,
   BrowseMediaQueryParameters,
@@ -14,8 +14,8 @@ import type {
   ExtendedHomeAssistant,
   NextPreviousControlStyle,
   ResolvedMedia,
-} from '../types';
-import { localize } from '../localize/localize';
+} from '../types.js';
+import { localize } from '../localize/localize.js';
 import {
   browseMediaQuery,
   dispatchErrorMessageEvent,
@@ -25,14 +25,14 @@ import {
   dispatchPlayEvent,
   getFirstTrueMediaChildIndex,
   homeAssistantWSRequest,
-} from '../common';
+} from '../common.js';
 
-import { View } from '../view';
+import { View } from '../view.js';
 import {
   renderProgressIndicator,
-} from '../components/message';
+} from '../components/message.js';
 
-import './next-prev-control';
+import './next-prev-control.js';
 
 import viewerStyle from '../scss/viewer.scss';
 
@@ -147,7 +147,7 @@ export class FrigateCardViewer extends LitElement {
             return clipsAtSameTime.children[index];
           }
         }
-      } catch (e: any) {
+      } catch (e) {
         // Pass. This is best effort.
       }
     }
diff --git a/src/editor.ts b/src/editor.ts
index d1795c9f..c4e45fe6 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 
 import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
-import { localize } from './localize/localize';
-import type { FrigateCardConfig } from './types';
+import { localize } from './localize/localize.js';
+import type { FrigateCardConfig } from './types.js';
 
 import frigate_card_editor_style from './scss/editor.scss';
 
diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index 1bbf315a..9367392e 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/src/patches/ha-camera-stream.ts
@@ -10,8 +10,8 @@
 // ====================================================================
 
 import { TemplateResult, html } from 'lit';
-import { customElement } from 'lit/decorators';
-import { dispatchMediaLoadEvent } from '../common';
+import { customElement } from 'lit/decorators.js';
+import { dispatchMediaLoadEvent } from '../common.js';
 
 customElements.whenDefined('ha-camera-stream').then(() => {
   // ========================================================================================
diff --git a/src/patches/ha-hls-player.ts b/src/patches/ha-hls-player.ts
index 7ce1e024..a4a1b981 100644
--- a/src/patches/ha-hls-player.ts
+++ b/src/patches/ha-hls-player.ts
@@ -13,8 +13,8 @@ import {
   TemplateResult,
   html,
 } from 'lit';
-import { customElement } from 'lit/decorators';
-import { dispatchMediaLoadEvent, dispatchPauseEvent, dispatchPlayEvent } from '../common';
+import { customElement } from 'lit/decorators.js';
+import { dispatchMediaLoadEvent, dispatchPauseEvent, dispatchPlayEvent } from '../common.js';
 
 customElements.whenDefined("ha-hls-player").then(() => {
   @customElement("frigate-card-ha-hls-player")
diff --git a/src/view.ts b/src/view.ts
index 7e61850d..5408f748 100644
--- a/src/view.ts
+++ b/src/view.ts
@@ -1,4 +1,4 @@
-import type { BrowseMediaSource, FrigateCardView } from './types';
+import type { BrowseMediaSource, FrigateCardView } from './types.js';
 
 export interface ViewParameters {
   view?: FrigateCardView;
diff --git a/tsconfig.json b/tsconfig.json
index 71a1e81d..0e8ff671 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2017",
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
     "lib": [
       "es2017",