diff --git a/esphome/components/web_server/__init__.py b/esphome/components/web_server/__init__.py
index 2708b5d06e..bbd5bc662e 100644
--- a/esphome/components/web_server/__init__.py
+++ b/esphome/components/web_server/__init__.py
@@ -44,6 +44,11 @@ def default_url(config):
             config[CONF_CSS_URL] = ""
         if not (CONF_JS_URL in config):
             config[CONF_JS_URL] = "https://oi.esphome.io/v2/www.js"
+    if config[CONF_VERSION] == 3:
+        if not (CONF_CSS_URL in config):
+            config[CONF_CSS_URL] = ""
+        if not (CONF_JS_URL in config):
+            config[CONF_JS_URL] = "https://oi.esphome.io/v3/www.js"
     return config
 
 
@@ -64,7 +69,7 @@ CONFIG_SCHEMA = cv.All(
         {
             cv.GenerateID(): cv.declare_id(WebServer),
             cv.Optional(CONF_PORT, default=80): cv.port,
-            cv.Optional(CONF_VERSION, default=2): cv.one_of(1, 2, int=True),
+            cv.Optional(CONF_VERSION, default=2): cv.one_of(1, 2, 3, int=True),
             cv.Optional(CONF_CSS_URL): cv.string,
             cv.Optional(CONF_CSS_INCLUDE): cv.file_,
             cv.Optional(CONF_JS_URL): cv.string,
@@ -152,7 +157,7 @@ async def to_code(config):
     cg.add_define("USE_WEBSERVER")
     cg.add_define("USE_WEBSERVER_PORT", config[CONF_PORT])
     cg.add_define("USE_WEBSERVER_VERSION", version)
-    if version == 2:
+    if version >= 2:
         # Don't compress the index HTML as the data sizes are almost the same.
         add_resource_as_progmem("INDEX_HTML", build_index_html(config), compress=False)
     else:
diff --git a/esphome/components/web_server/web_server.cpp b/esphome/components/web_server/web_server.cpp
index 69d601ed49..f065dc6684 100644
--- a/esphome/components/web_server/web_server.cpp
+++ b/esphome/components/web_server/web_server.cpp
@@ -358,7 +358,7 @@ void WebServer::handle_index_request(AsyncWebServerRequest *request) {
   stream->print(F("</article></body></html>"));
   request->send(stream);
 }
-#elif USE_WEBSERVER_VERSION == 2
+#elif USE_WEBSERVER_VERSION >= 2
 void WebServer::handle_index_request(AsyncWebServerRequest *request) {
   AsyncWebServerResponse *response =
       request->beginResponse_P(200, "text/html", ESPHOME_WEBSERVER_INDEX_HTML, ESPHOME_WEBSERVER_INDEX_HTML_SIZE);
diff --git a/esphome/components/web_server/web_server.h b/esphome/components/web_server/web_server.h
index 06c59ecaca..57cbbe1339 100644
--- a/esphome/components/web_server/web_server.h
+++ b/esphome/components/web_server/web_server.h
@@ -13,7 +13,7 @@
 #include <freertos/semphr.h>
 #endif
 
-#if USE_WEBSERVER_VERSION == 2
+#if USE_WEBSERVER_VERSION >= 2
 extern const uint8_t ESPHOME_WEBSERVER_INDEX_HTML[] PROGMEM;
 extern const size_t ESPHOME_WEBSERVER_INDEX_HTML_SIZE;
 #endif
diff --git a/tests/test10.yaml b/tests/test10.yaml
index 7e3a685b36..854173cfe9 100644
--- a/tests/test10.yaml
+++ b/tests/test10.yaml
@@ -23,6 +23,9 @@ logger:
 api:
   reboot_timeout: 10min
 
+web_server:
+  version: 3
+
 time:
   - platform: sntp