diff --git a/ui/package.json b/ui/package.json
index 9a7fae57..7eab1235 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -39,7 +39,7 @@
     "tailwind-merge": "^2.2.2",
     "usehooks-ts": "^3.1.0",
     "validator": "^13.12.0",
-    "xterm": "^5.3.0",
+    "@xterm/xterm": "^5.0.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
diff --git a/ui/src/components/Xterm.tsx b/ui/src/components/Xterm.tsx
index 1a0a008b..7dfbc9fa 100644
--- a/ui/src/components/Xterm.tsx
+++ b/ui/src/components/Xterm.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useLayoutEffect, useRef } from "react";
-import { Terminal } from "xterm";
+import { Terminal } from "@xterm/xterm";
 import { Unicode11Addon } from "@xterm/addon-unicode11";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { FitAddon } from "@xterm/addon-fit";
 import { ClipboardAddon } from "@xterm/addon-clipboard";
 
-import "xterm/css/xterm.css";
+import "@xterm/xterm/css/xterm.css";
 import { useRTCStore, useUiStore } from "../hooks/stores";
 
 const isWebGl2Supported = !!document.createElement("canvas").getContext("webgl2");