diff --git a/src/App.jsx b/src/App.jsx
index 6459b95b..d204071b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import { CssVarsProvider } from "@mui/joy";
 import theme from "./theme";
 import TabList from "./TabList.jsx";
 import Launchpad from "./Launchpad.jsx";
+import { Debounce } from './Utils';
 import TermixIcon from "./images/termix_icon.png";
 import RocketIcon from './images/launchpad_rocket.png';
 
@@ -50,7 +51,7 @@ function App() {
     }, [splitTabIds, activeTab, terminals]);
 
     useEffect(() => {
-        const handleResize = () => {
+        const handleResize = Debounce(() => {
             terminals.forEach((terminal) => {
                 if (
                     (terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
@@ -59,7 +60,7 @@ function App() {
                     terminal.terminalRef.resizeTerminal();
                 }
             });
-        };
+        }, 100);
 
         window.addEventListener("resize", handleResize);
 
@@ -97,7 +98,7 @@ function App() {
             setActiveTab(nextId);
             setNextId(nextId + 1);
             setIsAddHostHidden(true);
-            setForm({ name: "", ip: "", user: "", password: "", rsaKey: "", port: 22, authMethod: "password" });
+            setForm({ name: "", ip: "", user: "", password: "", rsaKey: "", port: 22, authMethod: "Select Auth" });
         } else {
             alert("Please fill out all fields.");
         }
@@ -198,7 +199,7 @@ function App() {
                     </div>
 
                     {/* Terminal Views */}
-                    <div className={`relative p-4 ${getLayoutStyle()}`}>
+                    <div className={`relative p-4 terminal-container ${getLayoutStyle()}`}>
                         {terminals.map((terminal) => (
                             <div
                                 key={terminal.id}
diff --git a/src/Terminal.jsx b/src/Terminal.jsx
index ece75e1c..6522b98c 100644
--- a/src/Terminal.jsx
+++ b/src/Terminal.jsx
@@ -18,26 +18,20 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
 
         if (!parentContainer || !isVisible) return;
 
-        // Force a reflow to ensure the container's dimensions are up-to-date
         void parentContainer.offsetHeight;
 
-        // Use a small delay to ensure the DOM has fully updated
-        setTimeout(() => {
-            const parentWidth = parentContainer.clientWidth;
-            const parentHeight = parentContainer.clientHeight;
+        const parentWidth = parentContainer.clientWidth;
+        const parentHeight = parentContainer.clientHeight - 16;
 
-            terminalContainer.style.width = `${parentWidth}px`;
-            terminalContainer.style.height = `${parentHeight}px`;
+        terminalContainer.style.width = `${parentWidth}px`;
+        terminalContainer.style.height = `${parentHeight}px`;
 
-            // Fit the terminal to the container
-            fitAddon.current.fit();
+        fitAddon.current.fit();
 
-            // Notify the backend of the new terminal size
-            if (socketRef.current && terminalInstance.current) {
-                const { cols, rows } = terminalInstance.current;
-                socketRef.current.emit("resize", { cols, rows });
-            }
-        }, 10); // Small delay to ensure proper DOM updates
+        if (socketRef.current && terminalInstance.current) {
+            const { cols, rows } = terminalInstance.current;
+            socketRef.current.emit("resize", { cols, rows });
+        }
     };
 
     useImperativeHandle(ref, () => ({
@@ -61,7 +55,6 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
         });
 
         terminalInstance.current.loadAddon(fitAddon.current);
-
         terminalInstance.current.open(terminalRef.current);
 
         setTimeout(() => {
@@ -119,6 +112,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
         }
     }, [isVisible]);
 
+    useEffect(() => {
+        const terminalContainer = terminalRef.current;
+        if (!terminalContainer) return;
+
+        const observer = new ResizeObserver(() => {
+            resizeTerminal();
+        });
+
+        observer.observe(terminalContainer);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
     return (
         <div
             ref={terminalRef}
diff --git a/src/Utils.jsx b/src/Utils.jsx
new file mode 100644
index 00000000..9128b83e
--- /dev/null
+++ b/src/Utils.jsx
@@ -0,0 +1,7 @@
+export const Debounce = (func, wait) => {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 36290d4e..bd106716 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,4 +7,13 @@
   height: 24px;
   background-color: #4a5568;
   margin: 0 8px;
+}
+
+.terminal-container {
+  min-height: 0;
+}
+
+.terminal-container > div {
+  flex: 1;
+  min-height: 0;
 }
\ No newline at end of file