diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index d0a19bf20c..608dbb9fb7 100644
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -33,7 +33,7 @@ export interface LovelaceResource {
 }
 
 export interface LovelaceResourcesMutableParams {
-  res_type: "css" | "js" | "module" | "html";
+  res_type: LovelaceResource["type"];
   url: string;
 }
 
diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
index 0603562940..317f05f261 100644
--- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
+++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
@@ -23,6 +23,20 @@ import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail";
 
+const detectResourceType = (url: string) => {
+  const ext = url.split(".").pop() || "";
+
+  if (ext === "css") {
+    return "css";
+  }
+
+  if (ext === "js") {
+    return "module";
+  }
+
+  return undefined;
+};
+
 @customElement("dialog-lovelace-resource-detail")
 export class DialogLovelaceResourceDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -31,7 +45,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
 
   @internalProperty() private _url!: LovelaceResource["url"];
 
-  @internalProperty() private _type!: LovelaceResource["type"];
+  @internalProperty() private _type?: LovelaceResource["type"];
 
   @internalProperty() private _error?: string;
 
@@ -44,10 +58,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
     this._error = undefined;
     if (this._params.resource) {
       this._url = this._params.resource.url || "";
-      this._type = this._params.resource.type || "module";
+      this._type = this._params.resource.type || undefined;
     } else {
       this._url = "";
-      this._type = "module";
+      this._type = undefined;
     }
     await this.updateComplete;
   }
@@ -106,6 +120,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
                 .selected=${this._type}
                 @iron-select=${this._typeChanged}
                 attr-for-selected="type"
+                .invalid=${!this._type}
               >
                 <paper-item type="module">
                   ${this.hass!.localize(
@@ -156,7 +171,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
         <mwc-button
           slot="primaryAction"
           @click="${this._updateResource}"
-          .disabled=${urlInvalid || this._submitting}
+          .disabled=${urlInvalid || !this._type || this._submitting}
         >
           ${this._params.resource
             ? this.hass!.localize(
@@ -173,6 +188,9 @@ export class DialogLovelaceResourceDetail extends LitElement {
   private _urlChanged(ev: PolymerChangedEvent<string>) {
     this._error = undefined;
     this._url = ev.detail.value;
+    if (!this._type) {
+      this._type = detectResourceType(this._url);
+    }
   }
 
   private _typeChanged(ev: CustomEvent) {
@@ -180,6 +198,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
   }
 
   private async _updateResource() {
+    if (!this._type) {
+      return;
+    }
+
     this._submitting = true;
     try {
       const values: LovelaceResourcesMutableParams = {