diff --git a/docker/schwarzesbrett/src/lib/api.ts b/docker/schwarzesbrett/src/lib/api.ts
index 3348397..63607f5 100644
--- a/docker/schwarzesbrett/src/lib/api.ts
+++ b/docker/schwarzesbrett/src/lib/api.ts
@@ -1,5 +1,5 @@
-export const API_ROOT_URL = "http://techgames.gnetx.com/infoscreen";
-export const CONTENT_ROOT_URL = `${API_ROOT_URL}/listings`;
+export const API_ROOT_URL = new URL("http://techgames.gnetx.com/infoscreen");
+export const CONTENT_ROOT_URL = new URL("/listings", API_ROOT_URL);
 
 export enum ListingType {
   IMAGE = "IMAGE",
@@ -25,6 +25,6 @@ export async function fetchData(): Promise<Data> {
   return await response.json();
 }
 
-export function generateContentURL(content: string): string {
-  return `${CONTENT_ROOT_URL}/${encodeURIComponent(content)}`;
+export function generateContentURL(content: string): URL {
+  return new URL(encodeURIComponent(content), CONTENT_ROOT_URL);
 }
diff --git a/docker/schwarzesbrett/src/routes/index.svelte b/docker/schwarzesbrett/src/routes/index.svelte
index cb4b238..7d0aed6 100644
--- a/docker/schwarzesbrett/src/routes/index.svelte
+++ b/docker/schwarzesbrett/src/routes/index.svelte
@@ -42,7 +42,9 @@
     {#if data.listings[listingIndex].type == api.ListingType.IMAGE}
       <img
         class="center dynamic-size"
-        src={api.generateContentURL(data.listings[listingIndex].content)}
+        src={api
+          .generateContentURL(data.listings[listingIndex].content)
+          .toString()}
         alt={data.listings[listingIndex].name}
         on:load={() =>
           handleTime(
@@ -63,7 +65,9 @@
         on:ended={() => updateListingIndex(data.listings.length)}
       >
         <source
-          src={api.generateContentURL(data.listings[listingIndex].content)}
+          src={api
+            .generateContentURL(data.listings[listingIndex].content)
+            .toString()}
         />
         <track kind="captions" />
         <b class="error">Videos are not supported!</b>