diff --git a/src/AddHostModal.jsx b/src/AddHostModal.jsx
index 1b46d0dc..51f097ae 100644
--- a/src/AddHostModal.jsx
+++ b/src/AddHostModal.jsx
@@ -9,8 +9,8 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
             <Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
                 <ModalDialog
                     sx={{
-                        backgroundColor: theme.palette.neutral[700],
-                        borderColor: theme.palette.neutral[100],
+                        backgroundColor: theme.palette.general.tertiary,
+                        borderColor: theme.palette.general.secondary,
                         color: theme.palette.text.primary,
                         padding: 3,
                         borderRadius: 10,
@@ -31,7 +31,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                         onChange={(e) => setForm({ ...form, name: e.target.value })}
                                         required={false}
                                         sx={{
-                                            backgroundColor: theme.palette.neutral[500],
+                                            backgroundColor: theme.palette.general.primary,
                                             color: theme.palette.text.primary,
                                         }}
                                     />
@@ -43,7 +43,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                         onChange={(e) => setForm({ ...form, ip: e.target.value })}
                                         required
                                         sx={{
-                                            backgroundColor: theme.palette.neutral[500],
+                                            backgroundColor: theme.palette.general.primary,
                                             color: theme.palette.text.primary,
                                         }}
                                     />
@@ -55,7 +55,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                         onChange={(e) => setForm({ ...form, user: e.target.value })}
                                         required
                                         sx={{
-                                            backgroundColor: theme.palette.neutral[500],
+                                            backgroundColor: theme.palette.general.primary,
                                             color: theme.palette.text.primary,
                                         }}
                                     />
@@ -68,7 +68,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                         onChange={(e) => setForm({ ...form, password: e.target.value })}
                                         required
                                         sx={{
-                                            backgroundColor: theme.palette.neutral[500],
+                                            backgroundColor: theme.palette.general.primary,
                                             color: theme.palette.text.primary,
                                         }}
                                     />
@@ -83,7 +83,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                         required
                                         error={form.port < 1 || form.port > 65535 ? "Port must be between 1 and 65535" : ""}
                                         sx={{
-                                            backgroundColor: theme.palette.neutral[500],
+                                            backgroundColor: theme.palette.general.primary,
                                             color: theme.palette.text.primary,
                                         }}
                                     />
@@ -91,9 +91,9 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
                                 <Button
                                     type="submit"
                                     sx={{
-                                        backgroundColor: theme.palette.neutral[500],
+                                        backgroundColor: theme.palette.general.primary,
                                         '&:hover': {
-                                            backgroundColor: theme.palette.neutral[900],
+                                            backgroundColor: theme.palette.general.disabled,
                                         },
                                     }}
                                 >
diff --git a/src/App.jsx b/src/App.jsx
index 3c929d40..11107ce1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,7 +24,6 @@ function App() {
     const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false);
     const [splitTabIds, setSplitTabIds] = useState([]);
 
-    // Handle keypress for opening launchpad
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.ctrlKey && e.key === "l") {
@@ -39,7 +38,6 @@ function App() {
         };
     }, []);
 
-    // Handle adding a host
     const handleAddHost = () => {
         if (form.ip && form.user && form.password && form.port) {
             const newTerminal = {
@@ -63,7 +61,6 @@ function App() {
         }
     };
 
-    // Close a terminal tab
     const closeTab = (id) => {
         const newTerminals = terminals.filter((t) => t.id !== id);
         setTerminals(newTerminals);
@@ -72,20 +69,23 @@ function App() {
         }
     };
 
-    // Toggle split for a terminal tab
     const toggleSplit = (id) => {
-        if (splitTabIds.length >= 3) return; // Prevent more than 2 tabs from splitting
+        if (splitTabIds.includes(id)) {
+            setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
+            return;
+        }
+
+        if (splitTabIds.length >= 3) return;
 
         setSplitTabIds((prev) =>
             prev.includes(id) ? prev.filter((splitId) => splitId !== id) : [...prev, id]
         );
-
-        if (splitTabIds.includes(id)) {
-            setSplitTabIds((prev) => prev.filter((splitId) => splitId !== id));
-        }
     };
 
-    // Determine the layout based on the number of split tabs
+    const handleSetActiveTab = (tabId) => {
+        setActiveTab(tabId);
+    };
+
     const getLayoutStyle = () => {
         if (splitTabIds.length === 1) {
             // Horizontal split (2 tabs: left-right)
@@ -104,9 +104,9 @@ function App() {
                 <div className="flex-1 flex flex-col overflow-hidden">
                     {/* Topbar */}
                     <div className="bg-neutral-800 text-white p-4 flex items-center justify-between gap-4 min-h-[75px] max-h-[75px] shadow-xl border-b-5 border-neutral-700">
-                        <div className="bg-neutral-700 flex justify-center items-center gap-2 p-3 rounded-lg h-[52px]">
-                            <img src={TermixIcon} alt="Termix Icon" className="w-[30px] h-[30px]" />
-                            <h2 className="text-lg font-bold ml-[-2px]">Termix</h2>
+                        <div className="bg-neutral-700 flex justify-center items-center gap-1 p-2 rounded-lg h-[52px]">
+                            <img src={TermixIcon} alt="Termix Icon" className="w-[25px] h-[25px] object-contain" />
+                            <h2 className="text-lg font-bold">Termix</h2>
                         </div>
 
                         <div className="flex-1 bg-neutral-700 rounded-lg overflow-hidden h-[52px] flex items-center">
@@ -114,7 +114,7 @@ function App() {
                                 <TabList
                                     terminals={terminals}
                                     activeTab={activeTab}
-                                    setActiveTab={setActiveTab}
+                                    setActiveTab={handleSetActiveTab}
                                     closeTab={closeTab}
                                     toggleSplit={toggleSplit}
                                     splitTabIds={splitTabIds}
@@ -127,8 +127,8 @@ function App() {
                         <Button
                             onClick={() => setIsLaunchpadOpen(true)}
                             sx={{
-                                backgroundColor: theme.palette.neutral[700],
-                                "&:hover": { backgroundColor: theme.palette.neutral[300] },
+                                backgroundColor: theme.palette.general.tertiary,
+                                "&:hover": { backgroundColor: theme.palette.general.secondary },
                                 flexShrink: 0,
                                 height: "52px",
                                 width: "52px",
@@ -142,8 +142,8 @@ function App() {
                         <Button
                             onClick={() => setIsAddHostHidden(false)}
                             sx={{
-                                backgroundColor: theme.palette.neutral[700],
-                                "&:hover": { backgroundColor: theme.palette.neutral[300] },
+                                backgroundColor: theme.palette.general.tertiary,
+                                "&:hover": { backgroundColor: theme.palette.general.secondary },
                                 flexShrink: 0,
                                 height: "52px",
                                 width: "52px",
@@ -163,7 +163,16 @@ function App() {
                         {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`}
+                                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`}
+                                style={{
+                                    order: splitTabIds.includes(terminal.id)
+                                        ? splitTabIds.indexOf(terminal.id) + 1
+                                        : activeTab === terminal.id
+                                            ? 0
+                                            : undefined
+                                }}
                             >
                                 <NewTerminal
                                     key={terminal.id}
@@ -172,9 +181,7 @@ function App() {
                                         if (ref && !terminal.terminalRef) {
                                             setTerminals((prev) =>
                                                 prev.map((t) =>
-                                                    t.id === terminal.id
-                                                        ? { ...t, terminalRef: ref }
-                                                        : t
+                                                    t.id === terminal.id ? { ...t, terminalRef: ref } : t
                                                 )
                                             );
                                         }
@@ -199,4 +206,4 @@ function App() {
     );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Launchpad.jsx b/src/Launchpad.jsx
index 10b4be47..2b503ecb 100644
--- a/src/Launchpad.jsx
+++ b/src/Launchpad.jsx
@@ -1,29 +1,78 @@
-import {Button} from "@mui/joy";
 import PropTypes from 'prop-types';
+import { useEffect, useRef } from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import { Button } from '@mui/joy';
+import theme from './theme';
 
 function Launchpad({ onClose }) {
+    const launchpadRef = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (launchpadRef.current && !launchpadRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [onClose]);
+
     return (
-        <div
-            style={{
-                position: "fixed",
-                top: "20%",
-                left: "20%",
-                width: "60%",
-                height: "60%",
-                backgroundColor: "gray",
-                zIndex: 1000,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: "8px",
-            }}
-        >
-            <div className="text-center">
-                <h2 className="text-2xl font-bold mb-4">Launchpad</h2>
-                <p className="mb-4">This is your all-in-one launchpad panel.</p>
-                <Button onClick={onClose}>Close</Button>
+        <CssVarsProvider theme={theme}>
+            <div
+                style={{
+                    position: "fixed",
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "rgba(0, 0, 0, 0.2)",
+                    zIndex: 1000,
+                    backdropFilter: "blur(5px)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+            >
+                <div
+                    ref={launchpadRef}
+                    style={{
+                        width: "75%",
+                        height: "75%",
+                        backgroundColor: theme.palette.general.tertiary,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: "8px",
+                        boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
+                        border: `1px solid ${theme.palette.general.secondary}`,
+                        color: theme.palette.text.primary,
+                        padding: 3,
+                    }}
+                >
+                    <div className="text-center">
+                        <h2 className="text-2xl font-bold mb-4">Launchpad</h2>
+                        <p className="mb-4">W.I.P. Feature</p>
+                        <Button
+                            type="submit"
+                            onClick={onClose}
+                            sx={{
+                                backgroundColor: theme.palette.general.primary,
+                                '&:hover': {
+                                    backgroundColor: theme.palette.general.disabled,
+                                },
+                            }}
+                        >
+                            Close
+                        </Button>
+                    </div>
+                </div>
             </div>
-        </div>
+        </CssVarsProvider>
     );
 }
 
diff --git a/src/TabList.jsx b/src/TabList.jsx
index 6ac09e53..cb4ebf26 100644
--- a/src/TabList.jsx
+++ b/src/TabList.jsx
@@ -10,22 +10,21 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
                 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 */}
+                            {/* Set Active Tab Button */}
                             <Button
                                 onClick={() => setActiveTab(terminal.id)}
-                                disabled={isSplit} // Disabled for split screen tabs
+                                disabled={isSplit}
                                 sx={{
                                     backgroundColor:
-                                        isActive ? theme.palette.neutral[500] : theme.palette.neutral[800],
+                                        isActive ? theme.palette.general.primary : theme.palette.general.disabled,
                                     color: theme.palette.text.primary,
-                                    "&:hover": { backgroundColor: theme.palette.neutral[300] },
-                                    ":disabled": { backgroundColor: theme.palette.neutral[800] },
+                                    "&:hover": { backgroundColor: theme.palette.general.secondary },
+                                    ":disabled": { backgroundColor: theme.palette.general.disabled },
                                     borderTopLeftRadius: "4px",
                                     borderBottomLeftRadius: "4px",
                                     height: "40px",
@@ -36,17 +35,17 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
                             >
                                 {terminal.title}
                             </Button>
-                            {/* Split screen button */}
+                            {/* Split Screen Button */}
                             <Button
                                 onClick={() => toggleSplit(terminal.id)}
-                                disabled={isSplitButtonDisabled || isActive} // Disable for the active tab (before and after split)
+                                disabled={isSplitButtonDisabled || isActive}
                                 sx={{
                                     backgroundColor: isSplit
-                                        ? theme.palette.neutral[500]  // Split tabs get color 700
-                                        : theme.palette.neutral[700], // Active tab has disabled color
+                                        ? theme.palette.general.primary
+                                        : theme.palette.general.tertiary,
                                     color: theme.palette.text.primary,
-                                    ":disabled": { backgroundColor: theme.palette.neutral[800] },
-                                    "&:hover": { backgroundColor: theme.palette.neutral[300] },
+                                    ":disabled": { backgroundColor: theme.palette.general.disabled },
+                                    "&:hover": { backgroundColor: theme.palette.general.secondary },
                                     borderTopRightRadius: "4px",
                                     borderBottomRightRadius: "4px",
                                     height: "40px",
@@ -56,15 +55,15 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
                             >
                                 /
                             </Button>
-                            {/* Close tab button */}
+                            {/* Close Tab Button */}
                             <Button
                                 onClick={() => closeTab(terminal.id)}
                                 disabled={isSplitScreenActive && isActive || isSplit}
                                 sx={{
-                                    backgroundColor: theme.palette.neutral[700],
+                                    backgroundColor: theme.palette.general.tertiary,
                                     color: theme.palette.text.primary,
-                                    "&:hover": { backgroundColor: theme.palette.neutral[300] },
-                                    ":disabled": { backgroundColor: theme.palette.neutral[800] },
+                                    "&:hover": { backgroundColor: theme.palette.general.secondary },
+                                    ":disabled": { backgroundColor: theme.palette.general.disabled },
                                     borderTopRightRadius: "4px",
                                     borderBottomRightRadius: "4px",
                                     height: "40px",
diff --git a/src/Terminal.jsx b/src/Terminal.jsx
index 7c38ee84..ec7ed855 100644
--- a/src/Terminal.jsx
+++ b/src/Terminal.jsx
@@ -4,6 +4,7 @@ import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import io from "socket.io-client";
 import PropTypes from "prop-types";
+import theme from "./theme";
 
 export function NewTerminal({ hostConfig }) {
     const terminalRef = useRef(null);
@@ -16,9 +17,9 @@ export function NewTerminal({ hostConfig }) {
         const terminal = new Terminal({
             cursorBlink: true,
             theme: {
-                background: "#242424",
-                foreground: "#ffffff",
-                cursor: "#ffffff",
+                background: theme.palette.background.terminal,
+                foreground: theme.palette.text.primary,
+                cursor: theme.palette.text.primary,
             },
             fontSize: 14,
             scrollback: 1000,
diff --git a/src/theme.js b/src/theme.js
index ce7d8785..ae08a8c0 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -17,28 +17,21 @@ const theme = extendTheme({
                     900: '#0f0f0f',
                 },
                 background: {
-                    default: '#212121', // Dark background to contrast white text
-                    paper: '#333333', // Slightly lighter paper background for depth
+                    primary: '#3d3d3d',
+                    terminal: '#262626',
+                    paper: '#555555',
                 },
                 text: {
-                    primary: '#ffffff', // White text for readability
-                    secondary: '#b0b0b0', // Light gray for secondary text
-                },
-                primary: {
-                    main: '#ff4081', // Bright pink for the primary accent color
-                },
-                secondary: {
-                    main: '#00bcd4', // A fresh cyan-blue for secondary accents
-                },
-                error: {
-                    main: '#e53935', // Strong red for error
-                },
-                warning: {
-                    main: '#ff9800', // Vibrant yellow-orange for warning
-                },
-                success: {
-                    main: '#4caf50', // Fresh green for success
+                    primary: '#f7f7f7',
+                    secondary: '#a7a7a7',
                 },
+                general: {
+                    primary: '#6e6e6e',
+                    secondary: '#a7a7a7',
+                    tertiary: '#3d3d3d',
+                    disabled: '#262626',
+                    dark: '#0f0f0f',
+                }
             },
         },
     },
@@ -47,4 +40,4 @@ const theme = extendTheme({
     },
 });
 
-export default theme;
+export default theme;
\ No newline at end of file