diff --git a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
index db34ced95..ff3078ae6 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
@@ -12,7 +12,7 @@ import type { AppRouter } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
 const wsClient = createWSClient({
-  url: "ws://localhost:3001",
+  url: typeof window === "undefined" ? "ws://localhost:3001" : `ws://${window.location.hostname}:3001`,
 });
 
 export function TRPCReactProvider(props: PropsWithChildren) {
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/client.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/client.tsx
new file mode 100644
index 000000000..304505d63
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/client.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const ClientSideTerminalComponent = dynamic(
+  () => import("./terminal").then(({ TerminalComponent }) => TerminalComponent),
+  {
+    ssr: false,
+  },
+);
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
index 7822da49c..da45b84bb 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
@@ -4,11 +4,10 @@ import { getScopedI18n } from "@homarr/translation/server";
 
 import "@xterm/xterm/css/xterm.css";
 
-import dynamic from "next/dynamic";
-
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { fullHeightWithoutHeaderAndFooter } from "~/constants";
 import { createMetaTitle } from "~/metadata";
+import { ClientSideTerminalComponent } from "./client";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -18,10 +17,6 @@ export async function generateMetadata() {
   };
 }
 
-const ClientSideTerminalComponent = dynamic(() => import("./terminal"), {
-  ssr: false,
-});
-
 export default function LogsManagementPage() {
   return (
     <>
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
index 428f1f300..b989e8e58 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
@@ -10,7 +10,7 @@ import { clientApi } from "@homarr/api/client";
 
 import classes from "./terminal.module.css";
 
-export default function TerminalComponent() {
+export const TerminalComponent = () => {
   const ref = useRef<HTMLDivElement>(null);
 
   const terminalRef = useRef<Terminal>();
@@ -54,4 +54,4 @@ export default function TerminalComponent() {
     };
   }, []);
   return <Box ref={ref} id="terminal" className={classes.outerTerminal} h="100%"></Box>;
-}
+};