diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index 8d30158..c8b486c 100644
--- a/FRONTEND/src/App.tsx
+++ b/FRONTEND/src/App.tsx
@@ -458,7 +458,8 @@ function App() {
 										borderRadius: 8,
 									}}>
 									<ScrollArea
-										h={expandedBottomBar ? "80vh" : "85vh"}
+										// h={expandedBottomBar ? "80vh" : "85vh"}
+										h={expandedBottomBar ? "73vh" : "83vh"}
 										type="scroll"
 										scrollbars="y"
 										style={{ overflowX: "hidden" }}
diff --git a/FRONTEND/src/components/BottomToolBar.tsx b/FRONTEND/src/components/BottomToolBar.tsx
index b26d4fe..c07f9f2 100644
--- a/FRONTEND/src/components/BottomToolBar.tsx
+++ b/FRONTEND/src/components/BottomToolBar.tsx
@@ -352,7 +352,7 @@ const BottomToolBar = ({
       <motion.div
         initial={false}
         animate={{
-          height: isExpand ? "150px" : 0,
+          height: isExpand ? "150px" : "60px",
           y: 0,
         }}
         transition={{ type: "spring", stiffness: 180, damping: 20 }}
@@ -362,34 +362,36 @@ const BottomToolBar = ({
           bottom: 0,
           left: 0,
           zIndex: 1,
-          overflow: "hidden",
+          overflow: "visible",
         }}
       >
-        <Box style={{ position: "relative", height: isExpand ? "150px" : "0px" }}>
-          <ActionIcon
-            style={{
-              position: "absolute",
-              top: isExpand ? -4 : -24,
-              left: "50%",
-              translate: "-19px 0",
-              backgroundColor: "#e3e0e0",
-              width: "55px",
-              zIndex: 10,
-            }}
-            variant="light"
-            onClick={() => {
-              setExpanded((prev) => !prev);
-            }}
-          >
-            {isExpand ? (
-              <IconCaretDown color="green" />
-            ) : (
-              <IconCaretUp color="green" />
-            )}
-          </ActionIcon>
+        {/* ActionIcon đặt bên ngoài Box để không bị overflow: hidden cắt */}
+        <ActionIcon
+          style={{
+            position: "absolute",
+            top: isExpand ? "-4px" : "-30px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            backgroundColor: "#e3e0e0",
+            width: "55px",
+            height: "30px",
+            zIndex: 10,
+          }}
+          variant="light"
+          onClick={() => {
+            setExpanded((prev) => !prev);
+          }}
+        >
+          {isExpand ? (
+            <IconCaretDown color="green" size={20} />
+          ) : (
+            <IconCaretUp color="green" size={20} />
+          )}
+        </ActionIcon>
+        <Box style={{ position: "relative", height: isExpand ? "150px" : "60px", overflow: "hidden" }}>
           <Grid style={{ height: "100%" }}>
-            <Grid.Col span={isExpand ? 1 : 3.5}></Grid.Col>
-            <Grid.Col span={isExpand ? 10 : 5}>
+            <Grid.Col span={isExpand ? 1 : 2}></Grid.Col>
+            <Grid.Col span={isExpand ? 10 : 8 }>
               {isExpand ? (
                 <Tabs
                   defaultValue="command"
@@ -399,7 +401,7 @@ const BottomToolBar = ({
                     setActiveTabBottom(val || "command");
                   }}
                   className={classes.containerBottom}
-                  style={{ height: "100%" }}
+                  style={{ height: "100%",backgroundColor: "white", }}
                 >
                   <Tabs.List>
                     <Tabs.Tab
@@ -443,11 +445,11 @@ const BottomToolBar = ({
                   <Tabs.Panel
                     value="command"
                     p={4}
-                    style={{ height: "100%", overflow: "auto" }}
+                    style={{ height: "200px", overflow: "auto" }}
                   >
                     <Flex justify={"space-between"} align="flex-start">
                       <Box>
-                        <ScrollArea h={"8vh"}>
+                        <ScrollArea h={"11vh"}>
                           <Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
                             {selectedLines.map((el) => (
                               <Box
@@ -691,10 +693,18 @@ const BottomToolBar = ({
                   </Tabs.Panel>
                 </Tabs>
               ) : (
-                <Box p={3}>
-                  <Flex direction="column" gap="xs">
-                    <Flex justify={"space-between"} align={"center"} wrap="wrap" gap="xs">
-                      <Flex wrap={"wrap"} gap={"6px"} style={{ flex: 1, minWidth: 0 }}>
+                <Box p={3} >
+                  <Flex direction="row" align="center" gap="xs" wrap="nowrap" style={{ height: "100%" }}>
+                    {/* Danh sách Line - chiếm 1 phần, cố định width và height, hiển thị 2 hàng */}
+                    <Box
+                      style={{
+                        flex: "1 1 0",
+                        width: "100%",
+                        height: "50px",
+                        overflow: "auto",
+                      }}
+                    >
+                      <Flex wrap={"wrap"} gap={"6px"} style={{ height: "100%" }}>
                         {selectedLines.map((el) => (
                           <Box
                             key={el.id}
@@ -705,6 +715,7 @@ const BottomToolBar = ({
                               width: "55px",
                               backgroundColor: "#d4e3ff",
                               borderRadius: "6px",
+                              flexShrink: 0,
                             }}
                           >
                             <CloseButton
@@ -749,6 +760,7 @@ const BottomToolBar = ({
                               cursor: "pointer",
                               display: "flex",
                               alignItems: "center",
+                              flexShrink: 0,
                             }}
                             onClick={() => {
                               selectedLines.forEach((line) => {
@@ -767,11 +779,39 @@ const BottomToolBar = ({
                           </Box>
                         )}
                       </Flex>
-                      <Flex align={"center"} gap="xs">
-                        <Text fz={"10px"} c="dark" fw={600}>
-                          Selected: {selectedLines.length} /{" "}
-                          {station.lines.length}
-                        </Text>
+                    </Box>
+                    
+                    {/* Selected count - ở giữa */}
+                    <Flex align={"center"} style={{ flex: "0 0 auto", flexShrink: 0 }}>
+                      <Text fz={"10px"} c="dark" fw={600}>
+                        Selected: {selectedLines.length} /{" "}
+                        {station.lines.length}
+                      </Text>
+                    </Flex>
+                    
+                    {/* Input + Select All - chiếm 1 phần */}
+                    <Flex
+                      direction="row"
+                      align="center"
+                      gap="xs"
+                      style={{
+                        flex: "1 1 0",
+                        minWidth: "200px",
+                        overflow: "hidden",
+                      }}
+                    >
+                      {/* Input */}
+                      <Box style={{ flexGrow: 1.5, flexShrink: 1, flexBasis: "auto", maxWidth: "100%", overflow: "hidden" }}>
+                        <InputHistory
+                          selectedLines={selectedLines}
+                          socket={socket}
+                          station={station}
+                          inputStyle={{ width: "100%" }}
+                        />
+                      </Box>
+                      
+                      {/* Select All */}
+                      <Flex align={"center"} style={{ flex: "0 0 auto", flexShrink: 0 }}>
                         <ButtonSelect
                           selectedLines={selectedLines}
                           setSelectedLines={setSelectedLines}
@@ -806,13 +846,6 @@ const BottomToolBar = ({
                         />
                       </Flex>
                     </Flex>
-                    <Box style={{ width: "100%" }}>
-                      <InputHistory
-                        selectedLines={selectedLines}
-                        socket={socket}
-                        station={station}
-                      />
-                    </Box>
                   </Flex>
                 </Box>
               )}
@@ -822,6 +855,129 @@ const BottomToolBar = ({
         </Box>
       </motion.div>
 
+      {openScenarioModal && (
+        <div
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0,0,0,0.6)",
+            zIndex: 99998,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backdropFilter: "blur(3px)",
+          }}
+          onClick={() => setOpenScenarioModal(false)}
+        >
+          <div
+            style={{
+              background: "white",
+              borderRadius: "12px",
+              maxWidth: "90vw",
+              width: "90%",
+              height: "85vh",
+              display: "flex",
+              flexDirection: "column",
+              boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
+              overflowY: "auto",
+              overflowX: "visible",
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Header */}
+            <Flex
+              justify="space-between"
+              align="center"
+              p="lg"
+              style={{
+                borderBottom: "1px solid #e9ecef",
+                flexShrink: 0,
+              }}
+            >
+              <Text fw={700} size="xl">
+                🎯 Select Scenario to Run
+              </Text>
+              <Flex gap="md" align="center">
+                <Button
+                  leftSection={<IconPlus size={16} />}
+                  variant="light"
+                  color="green"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setOpenDrawerScenario(true);
+                  }}
+                >
+                  Add/Edit Scenario
+                </Button>
+                <CloseButton
+                  size="lg"
+                  onClick={() => setOpenScenarioModal(false)}
+                />
+              </Flex>
+            </Flex>
+     
+            {/* Content */}
+            <div
+              style={{
+                padding: "20px",
+                overflowY: "auto",
+                overflowX: "visible",
+                flex: 1,
+                position: "relative",
+              }}
+              className={classes.hideScrollBar}
+            >
+              {scenarios.length > 0 ? (
+                <Grid
+                  gutter="md"
+                  style={{
+                    margin: 0,
+                    overflow: "visible",
+                    position: "relative",
+                  }}
+                >
+                  {scenarios.map((scenario, index) => (
+                    <ScenarioCard
+                      key={scenario.id}
+                      scenario={scenario}
+                      index={index}
+                      isDisable={isDisable}
+                      selectedLines={selectedLines}
+                      user={user}
+                      socket={socket}
+                      setOpenScenarioModal={setOpenScenarioModal}
+                      setIsDisable={setIsDisable}
+                    />
+                  ))}
+                </Grid>
+              ) : (
+                <Flex
+                  direction="column"
+                  align="center"
+                  justify="center"
+                  style={{ minHeight: "300px" }}
+                  gap="md"
+                >
+                  <Text size="xl" c="dimmed">
+                    📋
+                  </Text>
+                  <Text ta="center" c="dimmed" size="lg">
+                    No scenarios available
+                  </Text>
+                  <Text ta="center" c="dimmed" size="sm">
+                    Please create a new scenario to get started
+                  </Text>
+                </Flex>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+      
       {/* Drawer Scenario để Add/Edit */}
       <DrawerScenario
         scenarios={scenarios}
diff --git a/FRONTEND/src/components/Drawer/DrawerControl.tsx b/FRONTEND/src/components/Drawer/DrawerControl.tsx
index 6cac146..905f2eb 100644
--- a/FRONTEND/src/components/Drawer/DrawerControl.tsx
+++ b/FRONTEND/src/components/Drawer/DrawerControl.tsx
@@ -1164,7 +1164,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
         </div>
       </div>
 
-      <Grid.Col span={12} pt={"4px"}>
+      <Grid.Col span={12} pt={"0px"}>
         {listPorts?.length > 0 && (
           <Box>
             <Flex gap={"8px"} wrap={"wrap"}>
@@ -1217,6 +1217,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
+                                    justifyContent: "center",
                                     width: "34px",
                                     height: "28px",
                                     backgroundColor:
@@ -1248,7 +1249,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       flexWrap: "wrap",
                                     }}
                                   >
-                                    <Text fw={500} fz={"9px"}>
+                                    <Text fw={600} fz={"10px"}>
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
@@ -1288,8 +1289,9 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
-                                    width: "40px",
-                                    height: "32px",
+                                    justifyContent: "center",
+                                    width: "34px",
+                                    height: "28px",
                                     backgroundColor:
                                       port.poe === "ON"
                                         ? "#f2dcf8"
@@ -1319,7 +1321,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       flexWrap: "wrap",
                                     }}
                                   >
-                                    <Text fw={500} fz={"11px"}>
+                                    <Text fw={600} fz={"10px"}>
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
@@ -1359,11 +1361,11 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         <Box
                           style={{
                             width: "fit-content",
-                            minWidth: "40px",
+                            minWidth: "32px",
                             minHeight: "56px",
                           }}
                         >
-                          <Flex gap={"6px"} wrap={"nowrap"}>
+                          <Flex gap={"4px"} wrap={"nowrap"}>
                             {sortedPorts(group)
                               .slice(
                                 0,
@@ -1382,8 +1384,9 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
-                                    width: "40px",
-                                    height: "32px",
+                                    justifyContent: "center",
+                                    width: "34px",
+                                    height: "28px",
                                     backgroundColor:
                                       port.poe === "ON"
                                         ? "#f2dcf8"
@@ -1413,7 +1416,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       flexWrap: "wrap",
                                     }}
                                   >
-                                    <Text fw={500} fz={"10px"}>
+                                    <Text fw={600} fz={"10px"}>
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
@@ -1434,7 +1437,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                 </Card>
                               ))}
                           </Flex>
-                          <Flex gap={"6px"} wrap={"nowrap"} mt={"6px"}>
+                          <Flex gap={"4px"} wrap={"nowrap"} mt={"4px"}>
                             {sortedPorts(group)
                               .slice(
                                 Math.ceil(sortedPorts(group).length / 2),
@@ -1453,8 +1456,9 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                   style={{
                                     flex: "0 0 auto",
                                     position: "relative",
-                                    width: "50px",
-                                    height: "40px",
+                                    justifyContent: "center",
+                                    width: "34px",
+                                    height: "28px",
                                     backgroundColor:
                                       port.poe === "ON"
                                         ? "#f2dcf8"
@@ -1484,7 +1488,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       flexWrap: "wrap",
                                     }}
                                   >
-                                    <Text fw={500} fz={"11px"}>
+                                    <Text fw={600} fz={"10px"}>
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
diff --git a/FRONTEND/src/components/InputHistory.tsx b/FRONTEND/src/components/InputHistory.tsx
index 292554a..5ffd2dc 100644
--- a/FRONTEND/src/components/InputHistory.tsx
+++ b/FRONTEND/src/components/InputHistory.tsx
@@ -10,10 +10,12 @@ export default function InputHistory({
   selectedLines,
   socket,
   station,
+  inputStyle,
 }: {
   selectedLines: TLine[];
   socket: Socket | null;
   station: TStation;
+  inputStyle?: React.CSSProperties;
 }) {
   const [value, setValue] = useState("");
   const [history, setHistory] = useState<string[]>([]);
@@ -115,6 +117,7 @@ export default function InputHistory({
       style={{
         width: "30vw",
         boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
+        ...inputStyle,
       }}
       placeholder={"Send command to port(s)"}
       value={value}