diff --git a/src/App.jsx b/src/App.jsx
index 4c549719..3c929d40 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -67,29 +67,35 @@ function App() {
     const closeTab = (id) => {
         const newTerminals = terminals.filter((t) => t.id !== id);
         setTerminals(newTerminals);
-        setSplitTabIds(prev => prev.filter(tabId => tabId !== id));
         if (activeTab === id) {
             setActiveTab(newTerminals[0]?.id || null);
         }
     };
 
-    // Toggle split for a specific tab
+    // Toggle split for a terminal tab
     const toggleSplit = (id) => {
-        setSplitTabIds(prev => {
-            if (prev.includes(id)) {
-                return prev.filter(tabId => tabId !== id);
-            } else {
-                if (prev.length >= 1) return prev; // Limit to 1 split
-                return [...prev, id, activeTab].filter((tabId, index, self) => self.indexOf(tabId) === index);
-            }
-        });
+        if (splitTabIds.length >= 3) return; // Prevent more than 2 tabs from splitting
+
+        setSplitTabIds((prev) =>
+            prev.includes(id) ? prev.filter((splitId) => splitId !== id) : [...prev, id]
+        );
+
+        if (splitTabIds.includes(id)) {
+            setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
+        }
     };
 
-    // Get grid layout class based on split count
-    const getGridLayout = (count) => {
-        if (count === 1) return 'grid-cols-1';
-        if (count === 2) return 'grid-cols-2';
-        return 'grid-cols-1';
+    // Determine the layout based on the number of split tabs
+    const getLayoutStyle = () => {
+        if (splitTabIds.length === 1) {
+            // Horizontal split (2 tabs: left-right)
+            return "flex flex-row h-full gap-4";
+        } else if (splitTabIds.length > 1) {
+            // 2x2 Grid layout (4 tabs max), with evenly spaced rows
+            return "grid grid-cols-2 grid-rows-2 gap-4 h-full overflow-hidden";
+        }
+        // No split, main tab takes the entire screen
+        return "flex flex-col h-full";
     };
 
     return (
@@ -153,48 +159,29 @@ function App() {
                     </div>
 
                     {/* Terminal Views */}
-                    <div className="flex-1 relative p-4">
-                        {splitTabIds.length > 0 ? (
-                            <div className={`grid gap-4 h-full ${getGridLayout(splitTabIds.length)}`}>
-                                {splitTabIds.map(id => {
-                                    const terminal = terminals.find(t => t.id === id);
-                                    return terminal ? (
-                                        <div key={terminal.id} className="bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 h-full">
-                                            <NewTerminal
-                                                key={terminal.id}
-                                                hostConfig={terminal.hostConfig}
-                                                ref={(ref) => {
-                                                    if (ref && !terminal.terminalRef) {
-                                                        setTerminals(prev => prev.map(t =>
-                                                            t.id === terminal.id ? { ...t, terminalRef: ref } : t
-                                                        ));
-                                                    }
-                                                }}
-                                            />
-                                        </div>
-                                    ) : null;
-                                })}
+                    <div className={`relative p-4 ${getLayoutStyle()}`}>
+                        {terminals.map((terminal) => (
+                            <div
+                                key={terminal.id}
+                                className={`bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 ${splitTabIds.includes(terminal.id) || activeTab === terminal.id ? "block" : "hidden"} flex-1`}
+                            >
+                                <NewTerminal
+                                    key={terminal.id}
+                                    hostConfig={terminal.hostConfig}
+                                    ref={(ref) => {
+                                        if (ref && !terminal.terminalRef) {
+                                            setTerminals((prev) =>
+                                                prev.map((t) =>
+                                                    t.id === terminal.id
+                                                        ? { ...t, terminalRef: ref }
+                                                        : t
+                                                )
+                                            );
+                                        }
+                                    }}
+                                />
                             </div>
-                        ) : (
-                            <div className="absolute top-4 left-4 right-4 bottom-4">
-                                {terminals.find(t => t.id === activeTab) && (
-                                    <div className="bg-neutral-800 rounded-lg overflow-hidden shadow-xl border-5 border-neutral-700 h-full">
-                                        <NewTerminal
-                                            key={activeTab}
-                                            hostConfig={terminals.find(t => t.id === activeTab).hostConfig}
-                                            ref={(ref) => {
-                                                const terminal = terminals.find(t => t.id === activeTab);
-                                                if (ref && terminal && !terminal.terminalRef) {
-                                                    setTerminals(prev => prev.map(t =>
-                                                        t.id === activeTab ? { ...t, terminalRef: ref } : t
-                                                    ));
-                                                }
-                                            }}
-                                        />
-                                    </div>
-                                )}
-                            </div>
-                        )}
+                        ))}
                     </div>
                 </div>
 
@@ -212,4 +199,4 @@ function App() {
     );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/TabList.jsx b/src/TabList.jsx
index c9d1a3c5..6ac09e53 100644
--- a/src/TabList.jsx
+++ b/src/TabList.jsx
@@ -2,74 +2,81 @@ import { Button, ButtonGroup } from "@mui/joy";
 import PropTypes from "prop-types";
 
 function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, splitTabIds, theme }) {
+    const isSplitScreenActive = splitTabIds.length > 0;
+
     return (
         <div className="inline-flex items-center h-full px-[0.5rem]">
-            {terminals.map((terminal, index) => (
-                <div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
-                    <ButtonGroup>
-                        <Button
-                            onClick={() => splitTabIds.length === 0 && setActiveTab(terminal.id)}
-                            disabled={splitTabIds.length > 0}
-                            sx={{
-                                backgroundColor:
-                                    terminal.id === activeTab
-                                        ? theme.palette.neutral[500]
-                                        : theme.palette.neutral[800],
-                                color: theme.palette.text.primary,
-                                "&:hover": { backgroundColor: theme.palette.neutral[300] },
-                                borderTopLeftRadius: "4px",
-                                borderBottomLeftRadius: "4px",
-                                height: "40px",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }}
-                        >
-                            {terminal.title}
-                        </Button>
-                        <Button
-                            onClick={() => toggleSplit(terminal.id)}
-                            disabled={
-                                (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
-                                (splitTabIds.length === 0 && terminal.id === activeTab)
-                            }
-                            sx={{
-                                backgroundColor: splitTabIds.includes(terminal.id)
-                                    ? theme.palette.neutral[500]
-                                    : theme.palette.neutral[700],
-                                color: theme.palette.text.primary,
-                                "&:hover": { backgroundColor: theme.palette.neutral[300] },
-                                borderTopRightRadius: "4px",
-                                borderBottomRightRadius: "4px",
-                                height: "40px",
-                                fontSize: "1rem",
-                                opacity: (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
-                                (splitTabIds.length === 0 && terminal.id === activeTab) ? 0.5 : 1,
-                                cursor: (splitTabIds.length >= 1 && !splitTabIds.includes(terminal.id)) ||
-                                (splitTabIds.length === 0 && terminal.id === activeTab)
-                                    ? "not-allowed"
-                                    : "pointer",
-                            }}
-                        >
-                            /
-                        </Button>
-                        <Button
-                            onClick={() => closeTab(terminal.id)}
-                            sx={{
-                                backgroundColor: theme.palette.neutral[700],
-                                color: theme.palette.text.primary,
-                                "&:hover": { backgroundColor: theme.palette.neutral[300] },
-                                borderTopRightRadius: "4px",
-                                borderBottomRightRadius: "4px",
-                                height: "40px",
-                                fontSize: "1rem",
-                            }}
-                        >
-                            ×
-                        </Button>
-                    </ButtonGroup>
-                </div>
-            ))}
+            {terminals.map((terminal, index) => {
+                const isActive = terminal.id === activeTab;
+                const isSplit = splitTabIds.includes(terminal.id);
+
+                // Disable split screen button for the active tab (before and after splitting)
+                const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
+
+                return (
+                    <div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
+                        <ButtonGroup>
+                            {/* Set active tab button */}
+                            <Button
+                                onClick={() => setActiveTab(terminal.id)}
+                                disabled={isSplit} // Disabled for split screen tabs
+                                sx={{
+                                    backgroundColor:
+                                        isActive ? theme.palette.neutral[500] : theme.palette.neutral[800],
+                                    color: theme.palette.text.primary,
+                                    "&:hover": { backgroundColor: theme.palette.neutral[300] },
+                                    ":disabled": { backgroundColor: theme.palette.neutral[800] },
+                                    borderTopLeftRadius: "4px",
+                                    borderBottomLeftRadius: "4px",
+                                    height: "40px",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                }}
+                            >
+                                {terminal.title}
+                            </Button>
+                            {/* Split screen button */}
+                            <Button
+                                onClick={() => toggleSplit(terminal.id)}
+                                disabled={isSplitButtonDisabled || isActive} // Disable for the active tab (before and after split)
+                                sx={{
+                                    backgroundColor: isSplit
+                                        ? theme.palette.neutral[500]  // Split tabs get color 700
+                                        : theme.palette.neutral[700], // Active tab has disabled color
+                                    color: theme.palette.text.primary,
+                                    ":disabled": { backgroundColor: theme.palette.neutral[800] },
+                                    "&:hover": { backgroundColor: theme.palette.neutral[300] },
+                                    borderTopRightRadius: "4px",
+                                    borderBottomRightRadius: "4px",
+                                    height: "40px",
+                                    fontSize: "1rem",
+                                    cursor: isSplitButtonDisabled ? "not-allowed" : "pointer",
+                                }}
+                            >
+                                /
+                            </Button>
+                            {/* Close tab button */}
+                            <Button
+                                onClick={() => closeTab(terminal.id)}
+                                disabled={isSplitScreenActive && isActive || isSplit}
+                                sx={{
+                                    backgroundColor: theme.palette.neutral[700],
+                                    color: theme.palette.text.primary,
+                                    "&:hover": { backgroundColor: theme.palette.neutral[300] },
+                                    ":disabled": { backgroundColor: theme.palette.neutral[800] },
+                                    borderTopRightRadius: "4px",
+                                    borderBottomRightRadius: "4px",
+                                    height: "40px",
+                                    fontSize: "1rem",
+                                }}
+                            >
+                                ×
+                            </Button>
+                        </ButtonGroup>
+                    </div>
+                );
+            })}
         </div>
     );
 }
@@ -84,4 +91,4 @@ TabList.propTypes = {
     theme: PropTypes.object.isRequired,
 };
 
-export default TabList;
\ No newline at end of file
+export default TabList;