diff --git a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
index 31dce5b..48aea32 100644
--- a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
+++ b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
@@ -1,29 +1,9 @@
 ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Configuration_Sidebar.jsx
-import React from "react";
-import { Box, Typography, IconButton } from "@mui/material";
-import { Settings as SettingsIcon } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
 
 export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) {
   return (
     <>
-      {/* Top-right gear icon */}
-      <IconButton
-        onClick={() => setDrawerOpen(true)}
-        size="small"
-        sx={{
-          position: "absolute",
-          top: 8,
-          right: 8,
-          zIndex: 1500,
-          bgcolor: "#2a2a2a",
-          color: "#58a6ff",
-          border: "1px solid #444",
-          "&:hover": { bgcolor: "#3a3a3a" }
-        }}
-      >
-        <SettingsIcon fontSize="small" />
-      </IconButton>
-
       {/* Dim overlay when drawer is open */}
       {drawerOpen && (
         <Box
@@ -65,10 +45,10 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
           right: 0,
           bottom: 0,
           width: 400,
-          bgcolor: "#121212",
+          bgcolor: "#2C2C2C",
           color: "#ccc",
           borderLeft: "1px solid #333",
-          padding: 2,
+          padding: 0,
           zIndex: 11,
           overflowY: "auto",
           transform: drawerOpen ? "translateX(0)" : "translateX(100%)",
@@ -76,15 +56,28 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
         }}
         onClick={(e) => e.stopPropagation()}
       >
-        <Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
-          {title || "Node Configuration Panel"}
-        </Typography>
-        <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
-          This sidebar will be used to configure nodes in the future.
-        </p>
-        <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
-          The idea is that this area will allow for more node configuration controls to be dynamically-populated by the nodes to allow more complex node documentation and configuration.
-        </p>
+        {/* Title bar section */}
+        <Box
+          sx={{
+            backgroundColor: "#232323",
+            padding: "16px",
+            borderBottom: "1px solid #333"
+          }}
+        >
+          <Typography variant="h6" sx={{ color: "#0475c2" }}>
+            {title || "Node Configuration Panel"}
+          </Typography>
+        </Box>
+
+        {/* Content */}
+        <Box sx={{ padding: 2 }}>
+          <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
+            This sidebar will be used to configure nodes in the future.
+          </p>
+          <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
+            The idea is that this area will allow for more node configuration controls to be dynamically-populated by the nodes to allow more complex node documentation and configuration.
+          </p>
+        </Box>
       </Box>
     </>
   );