diff --git a/src/index_theme.ts.template b/src/index_theme.ts.template
index d20561019..c90fe9fba 100644
--- a/src/index_theme.ts.template
+++ b/src/index_theme.ts.template
@@ -4,9 +4,23 @@ import ThemeViewGUI from "./src/UI/ThemeViewGUI.svelte"
 import LayoutConfig from "./src/Models/ThemeConfig/LayoutConfig";
 import MetaTagging from "./src/Logic/MetaTagging";
 
+function webgl_support() {
+    try {
+        var canvas = document.createElement("canvas")
+        return (
+            !!window.WebGLRenderingContext &&
+            (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+        )
+    } catch (e) {
+        return false
+    }
+}
 
-MetaTagging.setThemeMetatagging(new ThemeMetaTagging())
-const state = new ThemeViewState(new LayoutConfig(<any> layout))
-const main = new SvelteUIElement(ThemeViewGUI, { state })
-main.AttachTo("maindiv")
-        
+if (!webgl_support()) {
+     new FixedUiElement("WebGL is not supported or not enabled. This is essential for MapComplete to function, please enable this.").SetClass("block alert").AttachTo("maindiv")
+}else{
+    MetaTagging.setThemeMetatagging(new ThemeMetaTagging())
+    const state = new ThemeViewState(new LayoutConfig(<any> layout))
+    const main = new SvelteUIElement(ThemeViewGUI, { state })
+    main.AttachTo("maindiv")
+}