diff --git a/AppImage/app/terminal/page.tsx b/AppImage/app/terminal/page.tsx
index 910bdb9..5830403 100644
--- a/AppImage/app/terminal/page.tsx
+++ b/AppImage/app/terminal/page.tsx
@@ -1,9 +1,16 @@
-"use client"
-
-import { TerminalPanel } from "@/components/terminal-panel"
+import dynamic from "next/dynamic"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { TerminalIcon } from "lucide-react"
 
+const TerminalPanel = dynamic(() => import("@/components/terminal-panel").then((mod) => mod.TerminalPanel), {
+  ssr: false,
+  loading: () => (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-muted-foreground">Loading terminal...</div>
+    </div>
+  ),
+})
+
 export default function TerminalPage() {
   return (
     <div className="min-h-screen bg-background p-6">
diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx
index 6168dc2..cae3bfb 100644
--- a/AppImage/components/terminal-panel.tsx
+++ b/AppImage/components/terminal-panel.tsx
@@ -2,9 +2,15 @@
 
 import type React from "react"
 import { useEffect, useRef } from "react"
-import { Terminal } from "xterm"
-import { FitAddon } from "xterm-addon-fit"
-import "xterm/css/xterm.css"
+
+let Terminal: any
+let FitAddon: any
+
+if (typeof window !== "undefined") {
+  Terminal = require("xterm").Terminal
+  FitAddon = require("xterm-addon-fit").FitAddon
+  require("xterm/css/xterm.css")
+}
 
 type TerminalPanelProps = {
   websocketUrl?: string // Custom WebSocket URL if needed
@@ -12,15 +18,15 @@ type TerminalPanelProps = {
 
 export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl = "ws://localhost:8008/ws/terminal" }) => {
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const termRef = useRef<Terminal | null>(null)
-  const fitAddonRef = useRef<FitAddon | null>(null)
+  const termRef = useRef<any>(null)
+  const fitAddonRef = useRef<any>(null)
   const wsRef = useRef<WebSocket | null>(null)
 
   // For touch gestures
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
 
   useEffect(() => {
-    if (!containerRef.current) return
+    if (!containerRef.current || !Terminal || !FitAddon) return
 
     const term = new Terminal({
       fontFamily: "monospace",