diff --git a/src/frontend/index.html b/src/frontend/index.html
index 92db98b..62939f9 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -240,17 +240,16 @@
       const bgValue = Math.round((brightness / 100) * 255);
       const bgColor = `rgb(${bgValue}, ${bgValue}, ${bgValue})`;
       
-      const headerBg = isDark ? 'rgb(10, 10, 10)' : 'rgb(245, 245, 245)';
-      const statusBg = isDark ? 'rgb(10, 10, 10)' : 'rgb(240, 240, 240)';
-      const textColor = isDark ? 'rgb(136, 136, 136)' : 'rgb(80, 80, 80)';
-      const borderColor = isDark ? 'rgb(26, 26, 26)' : 'rgb(220, 220, 220)';
+      const headerBg = `rgb(${Math.max(0, bgValue - 10)}, ${Math.max(0, bgValue - 10)}, ${Math.max(0, bgValue - 10)})`;
+      const textColor = `rgb(${Math.min(255, bgValue + 136)}, ${Math.min(255, bgValue + 136)}, ${Math.min(255, bgValue + 136)})`;
+      const borderColor = `rgb(${Math.max(0, bgValue - 26)}, ${Math.max(0, bgValue - 26)}, ${Math.max(0, bgValue - 26)})`;
       
       document.documentElement.style.setProperty('--bg-primary', bgColor);
-      document.documentElement.style.setProperty('--bg-secondary', isDark ? 'rgb(10, 10, 10)' : 'rgb(245, 245, 245)');
+      document.documentElement.style.setProperty('--bg-secondary', headerBg);
       document.documentElement.style.setProperty('--text-primary', isDark ? '#cccccc' : '#1a1a1a');
       document.documentElement.style.setProperty('--text-secondary', textColor);
       document.documentElement.style.setProperty('--border', borderColor);
-      document.documentElement.style.setProperty('--bg-tertiary', isDark ? 'rgb(30, 30, 30)' : 'rgb(230, 230, 230)');
+      document.documentElement.style.setProperty('--bg-tertiary', `rgb(${Math.max(0, bgValue - 30)}, ${Math.max(0, bgValue - 30)}, ${Math.max(0, bgValue - 30)})`);
       document.documentElement.style.setProperty('--accent', isDark ? '#ff6b6b' : '#2980b9');
 
       const terminalTheme = isDark ? {
@@ -402,9 +401,7 @@
       terminalsContainer.style.display = 'grid';
       terminalsContainer.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
       terminalsContainer.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
-      terminalsContainer.style.gap = '4px';
-      terminalsContainer.style.padding = '4px';
-      terminalsContainer.style.background = 'var(--bg-primary)';
+      terminalsContainer.style.gap = '0px';
 
       const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
       const wsUrl = `${wsProtocol}//${window.location.host}?shell=${encodeURIComponent(shell)}`;
@@ -413,9 +410,9 @@
       for (let i = 0; i < totalTerminals; i++) {
         const pane = document.createElement('div');
         pane.className = 'terminal-pane';
-        pane.style.background = 'var(--bg-primary)';
-        pane.style.padding = '4px';
         pane.style.overflow = 'hidden';
+        pane.style.margin = '0';
+        pane.style.padding = '0';
         terminalsContainer.appendChild(pane);
 
         try {
diff --git a/src/frontend/styles.css b/src/frontend/styles.css
index 66f3221..b6cd9b2 100644
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@@ -84,17 +84,26 @@ html, body {
   display: flex;
   flex-direction: column;
   background: var(--bg-primary);
+  gap: 0;
 }
 
 .terminal-pane {
   flex: 1;
-  padding: 4px;
   background: var(--bg-primary);
   overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 .terminal-pane .xterm {
   height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.terminal-pane .xterm-viewport {
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .terminal-divider {