diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 67f29cc..ae9ceda 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { Navbar, Form, Offcanvas, Container } from "react-bootstrap";
-import { hostname, port, socket } from "./socket";
+import { authority, socket } from "./socket";
 import "./App.css";
 import {
   Notifications,
@@ -68,12 +68,12 @@ const App = () => {
 
   useEffect(() => {
     // Allow the user to add a custom css file
-    fetch(`http://${hostname}:${port}/custom.css`)
+    fetch(`http://${authority}/custom.css`)
       .then((response) => {
         if (response.ok) {
           // If the file exists, create a link element for the custom CSS
           const link = document.createElement("link");
-          link.href = `http://${hostname}:${port}/custom.css`;
+          link.href = `http://${authority}/custom.css`;
           link.type = "text/css";
           link.rel = "stylesheet";
           document.head.appendChild(link);
@@ -83,7 +83,7 @@ const App = () => {
 
     socket.on("connect", () => {
       // Fetch data from the API when the client connects
-      fetch(`http://${hostname}:${port}/service-properties`)
+      fetch(`http://${authority}/service-properties`)
         .then((response) => response.json())
         .then((data: State) => {
           dispatch({ type: "SET_DATA", data });
@@ -91,7 +91,7 @@ const App = () => {
 
           document.title = data.name; // Setting browser tab title
         });
-      fetch(`http://${hostname}:${port}/web-settings`)
+      fetch(`http://${authority}/web-settings`)
         .then((response) => response.json())
         .then((data: Record<string, WebSetting>) => setWebSettings(data));
       setConnectionStatus("connected");
diff --git a/frontend/src/socket.ts b/frontend/src/socket.ts
index 9c5495a..f0d6544 100644
--- a/frontend/src/socket.ts
+++ b/frontend/src/socket.ts
@@ -2,10 +2,10 @@ import { io } from "socket.io-client";
 import { serializeDict, serializeList } from "./utils/serializationUtils";
 import { SerializedObject } from "./types/SerializedObject";
 
-export const hostname =
+const hostname =
   process.env.NODE_ENV === "development" ? `localhost` : window.location.hostname;
-export const port =
-  process.env.NODE_ENV === "development" ? 8001 : window.location.port;
+const port = process.env.NODE_ENV === "development" ? 8001 : window.location.port;
+
 // Get the forwarded prefix from the global variable
 export const forwardedPrefix: string =
   (window as any) /* eslint-disable-line @typescript-eslint/no-explicit-any */
@@ -15,7 +15,6 @@ export const authority = `${hostname}:${port}${forwardedPrefix}`;
 
 const URL = `ws://${hostname}:${port}/`;
 console.debug("Websocket: ", URL);
-
 export const socket = io(URL, {
   path: `${forwardedPrefix}/ws/socket.io`,
   transports: ["websocket"],