diff --git a/AppImage/app/globals.css b/AppImage/app/globals.css
index fba5a98..840c6af 100644
--- a/AppImage/app/globals.css
+++ b/AppImage/app/globals.css
@@ -1,43 +1,58 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(1 0 0); /* blanco */
+  --foreground: oklch(0.145 0 0); /* casi negro */
+
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --card-foreground: var(--foreground);
+
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.205 0 0); /* gris oscuro */
+  --primary-foreground: oklch(0.985 0 0); /* blanco */
+
   --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
+  --secondary-foreground: var(--primary);
+
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.556 0 0); /* gris medio */
+
   --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent-foreground: var(--primary);
+
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.145 0 0);
+
   --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
+  --input: var(--border);
   --ring: oklch(0.708 0 0);
+
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
+
   --radius: 0.625rem;
+
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent-foreground: var(--primary);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
 }
 
+/* ===================== */
+/* Dark Mode (gris)      */
+/* ===================== */
 .dark {
   --background: oklch(0.22 0 0); /* gris oscuro */
   --foreground: oklch(0.97 0 0); /* blanco/gris claro */
@@ -124,58 +139,67 @@
 }
 
 /* ===================== */
-/* Base styles           */
+/* Base layer            */
 /* ===================== */
-* {
-  border-color: var(--border);
-  outline-color: color-mix(in oklch, var(--ring), transparent 50%);
-}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
 
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-}
+  body {
+    @apply bg-background text-foreground;
+  }
 
-/* Foco accesible */
-:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
-  outline: none;
-}
-:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
-  outline: 2px solid color-mix(in oklch, var(--ring), transparent 50%);
-  outline-offset: 2px;
+  /* Foco accesible */
+  :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
+    @apply outline-none;
+  }
+  :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
+    @apply ring-2;
+    --tw-ring-color: var(--ring);
+    --tw-ring-opacity: 0.5; /* equivalente al /50 */
+  }
 }
 
 /* ===================== */
 /* Ajustes para Charts   */
 /* ===================== */
-/* Recharts axis */
-.recharts-cartesian-axis-tick tspan {
-  fill: var(--muted-foreground);
-}
-.recharts-cartesian-axis-line,
-.recharts-cartesian-grid line {
-  stroke: var(--border);
-}
+@layer components {
+  /* Recharts axis */
+  .recharts-cartesian-axis-tick tspan {
+    fill: var(--muted-foreground);
+  }
+  .recharts-cartesian-axis-line,
+  .recharts-cartesian-grid line {
+    stroke: var(--border);
+  }
 
-/* Chart.js axis */
-.chartjs-render-monitor text {
-  fill: var(--muted-foreground);
-}
-.chartjs-render-monitor line {
-  stroke: var(--border);
-}
+  /* Chart.js axis */
+  .chartjs-render-monitor text {
+    fill: var(--muted-foreground);
+  }
+  .chartjs-render-monitor line {
+    stroke: var(--border);
+  }
 
-/* ===================== */
-/* Terminal xterm styles */
-/* ===================== */
-.xterm {
-  padding: 0 !important;
-}
+  /* Fix xterm.js padding and centering issues */
+  .xterm {
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
 
-.xterm .xterm-viewport {
-  overflow-y: auto !important;
-}
+  .xterm .xterm-viewport {
+    width: 100% !important;
+  }
 
-.xterm .xterm-screen {
-  padding: 0 !important;
+  .xterm .xterm-screen {
+    width: 100% !important;
+  }
+
+  /* Remove internal padding from xterm rows to fix menu centering */
+  .xterm .xterm-rows {
+    padding: 0 !important;
+  }
 }
diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx
index 4729d03..38acb3a 100644
--- a/AppImage/components/terminal-panel.tsx
+++ b/AppImage/components/terminal-panel.tsx
@@ -288,7 +288,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
       cursorBlink: true,
       scrollback: 2000,
       disableStdin: false,
-      cols: isMobile ? 80 : layout === "grid" ? 60 : 120,
+      cols: isMobile ? 40 : layout === "grid" ? 60 : 120,
       rows: isMobile ? 20 : layout === "grid" ? 15 : 30,
       theme: {
         background: "#000000",
@@ -318,7 +318,10 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
     term.loadAddon(fitAddon)
 
     term.open(container)
-    fitAddon.fit()
+
+    setTimeout(() => {
+      fitAddon.fit()
+    }, 100)
 
     const wsUrl = websocketUrl || getWebSocketUrl()
     const ws = new WebSocket(wsUrl)
@@ -560,11 +563,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
             </TabsList>
             {terminals.map((terminal) => (
               <TabsContent key={terminal.id} value={terminal.id} className="flex-1 m-0 p-0">
-                <div
-                  ref={setContainerRef(terminal.id)}
-                  className="w-full h-full bg-black"
-                  style={{ height: "calc(100vh - 24rem)" }}
-                />
+                <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black overflow-hidden" />
               </TabsContent>
             ))}
           </Tabs>
@@ -587,7 +586,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
                     </button>
                   )}
                 </div>
-                <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black pt-7" />
+                <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black overflow-hidden" />
               </div>
             ))}
           </div>