diff --git a/ui/src/environments/index.ts b/ui/src/environments/index.ts
index e10181d51c..a5790f059f 100644
--- a/ui/src/environments/index.ts
+++ b/ui/src/environments/index.ts
@@ -96,3 +96,10 @@ export interface Environment {
     },
     readonly PRODUCT_TYPES: (translate: TranslateService) => Filter | null
 }
+
+/*
+ * Return the proper websocket scheme (WS or WSS) depending on whether the page is accessed via HTTP or HTTPS.
+ */
+export function getWebsocketScheme(): string {
+    return window.location.protocol === "https:" ? "wss://" : "ws://";
+}
diff --git a/ui/src/themes/openems/environments/backend-dev.ts b/ui/src/themes/openems/environments/backend-dev.ts
index a6726d2b8c..66af32592b 100644
--- a/ui/src/themes/openems/environments/backend-dev.ts
+++ b/ui/src/themes/openems/environments/backend-dev.ts
@@ -1,11 +1,12 @@
 import { Environment } from "src/environments";
+import { getWebsocketScheme } from "src/environments";
 import { theme } from "./theme";
 
 export const environment: Environment = {
     ...theme, ...{
 
         backend: "OpenEMS Backend",
-        url: "ws://" + location.hostname + ":8082",
+        url: getWebsocketScheme() + location.hostname + ":8082",
 
         production: false,
         debugMode: true,
diff --git a/ui/src/themes/openems/environments/backend-prod.ts b/ui/src/themes/openems/environments/backend-prod.ts
index ebfe2b1ecf..7c695bab03 100644
--- a/ui/src/themes/openems/environments/backend-prod.ts
+++ b/ui/src/themes/openems/environments/backend-prod.ts
@@ -1,11 +1,12 @@
 import { Environment } from "src/environments";
+import { getWebsocketScheme } from "src/environments";
 import { theme } from "./theme";
 
 export const environment: Environment = {
     ...theme, ...{
 
         backend: "OpenEMS Backend",
-        url: "ws://" + location.hostname + ":8082",
+        url: getWebsocketScheme() + location.hostname + ":8082",
 
         production: true,
         debugMode: false,
diff --git a/ui/src/themes/openems/environments/edge-dev.ts b/ui/src/themes/openems/environments/edge-dev.ts
index b36d202ef2..8e7292f8b8 100644
--- a/ui/src/themes/openems/environments/edge-dev.ts
+++ b/ui/src/themes/openems/environments/edge-dev.ts
@@ -1,11 +1,12 @@
 import { Environment } from "src/environments";
+import { getWebsocketScheme } from "src/environments";
 import { theme } from "./theme";
 
 export const environment: Environment = {
     ...theme, ...{
 
         backend: "OpenEMS Edge",
-        url: "ws://" + location.hostname + ":8085",
+        url: getWebsocketScheme() + location.hostname + ":8085",
 
         production: false,
         debugMode: true,
diff --git a/ui/src/themes/openems/environments/edge-prod.ts b/ui/src/themes/openems/environments/edge-prod.ts
index 183a4f0fef..2bda82ceee 100644
--- a/ui/src/themes/openems/environments/edge-prod.ts
+++ b/ui/src/themes/openems/environments/edge-prod.ts
@@ -1,11 +1,12 @@
 import { Environment } from "src/environments";
+import { getWebsocketScheme } from "src/environments";
 import { theme } from "./theme";
 
 export const environment: Environment = {
     ...theme, ...{
 
         backend: "OpenEMS Edge",
-        url: "ws://" + location.hostname + ":8075",
+        url: getWebsocketScheme() + location.hostname + ":8075",
 
         production: true,
         debugMode: false,