diff --git a/Data/WebUI/src/App.jsx b/Data/WebUI/src/App.jsx
index 5ee2ecd..4fa1dbd 100644
--- a/Data/WebUI/src/App.jsx
+++ b/Data/WebUI/src/App.jsx
@@ -21,6 +21,8 @@ import {
     Divider
 } from "@mui/material";
 
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import Tooltip from "@mui/material/Tooltip";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
@@ -52,8 +54,7 @@ nodeContext.keys().forEach((path) => {
     if (!categorizedNodes[category]) {
         categorizedNodes[category] = [];
     }
-    categorizedNodes[category].push({ type, label });
-
+    categorizedNodes[category].push(mod.default); // includes type, label, component, defaultContent
     nodeTypes[type] = component;
 });
 
@@ -85,7 +86,7 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) {
                 position,
                 data: {
                     label: nodeMeta?.label || type,
-                    content: nodeMeta?.label || "Node"
+                    content: nodeMeta?.defaultContent
                 }
             };
 
@@ -286,7 +287,7 @@ export default function App() {
                             <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={accordionHeaderStyle}>
                                 <Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Workflows</b></Typography>
                             </AccordionSummary>
-                            <AccordionDetails sx={{ p: 0 }}>
+                            <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
                                 <Button fullWidth sx={sidebarBtnStyle} onClick={handleSaveWorkflow}>SAVE WORKFLOW</Button>
                                 <Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenWorkflow}>OPEN WORKFLOW</Button>
                                 <Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenCloseDialog}>CLOSE WORKFLOW</Button>
@@ -299,16 +300,17 @@ export default function App() {
                             </AccordionSummary>
                             <AccordionDetails sx={{ p: 0 }}>
                                 {Object.entries(categorizedNodes).map(([category, items]) => (
-                                    <Box key={category} sx={{ mb: 2 }}>
+                                    <Box key={category} sx={{ mb: 0, bgcolor: "#232323" }}>
                                         <Divider
                                             sx={{
-                                                bgcolor: "#2c2c2c",
-                                                mb: 1,
-                                                px: 1,
-                                                py: 0.5,
+                                                bgcolor: "transparent",
+                                                px: 2,
+                                                py: 0.75,
                                                 display: "flex",
-                                                justifyContent: "center"
+                                                justifyContent: "center",
+                                                borderColor: "#333"
                                             }}
+                                            variant="fullWidth"
                                         >
                                             <Typography
                                                 variant="caption"
@@ -321,18 +323,20 @@ export default function App() {
                                             </Typography>
                                         </Divider>
                                         {items.map(({ type, label }) => (
-                                            <Button
-                                                key={`${category}-${type}`}
-                                                fullWidth
-                                                sx={sidebarBtnStyle}
-                                                draggable
-                                                onDragStart={(event) => {
-                                                    event.dataTransfer.setData("application/reactflow", type);
-                                                    event.dataTransfer.effectAllowed = "move";
-                                                }}
-                                            >
-                                                {label}
-                                            </Button>
+                                            <Tooltip key={`${category}-${type}`} title="Drag & Drop into Editor" placement="right">
+                                                <Button
+                                                    fullWidth
+                                                    sx={sidebarBtnStyle}
+                                                    draggable
+                                                    onDragStart={(event) => {
+                                                        event.dataTransfer.setData("application/reactflow", type);
+                                                        event.dataTransfer.effectAllowed = "move";
+                                                    }}
+                                                    startIcon={<DragIndicatorIcon sx={{ color: "#666" }} />}
+                                                >
+                                                    {label}
+                                                </Button>
+                                            </Tooltip>
                                         ))}
                                     </Box>
                                 ))}
@@ -400,7 +404,11 @@ const sidebarBtnStyle = {
     backgroundColor: "#232323",
     justifyContent: "flex-start",
     pl: 2,
-    fontSize: "0.9rem"
+    fontSize: "0.9rem",
+    textTransform: "none",
+    "&:hover": {
+        backgroundColor: "#2a2a2a"
+    }
 };
 
 const accordionHeaderStyle = {
diff --git a/Data/WebUI/src/Borealis.css b/Data/WebUI/src/Borealis.css
index 9341699..94ff3aa 100644
--- a/Data/WebUI/src/Borealis.css
+++ b/Data/WebUI/src/Borealis.css
@@ -20,4 +20,11 @@
     rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */
     );
     z-index: -1; /* Ensures it stays behind the React Flow elements */
-}
\ No newline at end of file
+}
+
+/* Emphasize Drag & Drop Node Functionality */
+.sidebar-button:hover {
+    background-color: #2a2a2a !important;
+    box-shadow: 0 0 5px rgba(88, 166, 255, 0.3);
+    cursor: grab;
+}
diff --git a/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx b/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx
index 27aa7da..4e2e26f 100644
--- a/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx
+++ b/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx
@@ -52,7 +52,7 @@ const experimentalNode = ({ data }) => {
                 {data.label || "Experimental Node"}
             </div>
             <div style={{ padding: "10px" }}>
-                {data.content || "Experimental Node"}
+                {data.content || "Placeholder Experimental Content"}
             </div>
         </div>
     );
@@ -61,5 +61,6 @@ const experimentalNode = ({ data }) => {
 export default {
     type: "experimentalNode", // Must match the type used in nodeTypes
     label: "Experimental Node",
+    defaultContent: "Placeholder Node",
     component: experimentalNode
 };
diff --git a/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx b/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx
index c6dce2d..3313d1f 100644
--- a/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx	
+++ b/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx	
@@ -52,7 +52,7 @@ const flyffNode = ({ data }) => {
                 {data.label || "Flyff Node"}
             </div>
             <div style={{ padding: "10px" }}>
-                {data.content || "Flyff Node"}
+                {data.content || "Placeholder Flyff Content"}
             </div>
         </div>
     );
@@ -61,5 +61,6 @@ const flyffNode = ({ data }) => {
 export default {
     type: "flyffNode", // Must match the type used in nodeTypes
     label: "Flyff Node",
+    defaultContent: "Placeholder Node",
     component: flyffNode
 };
diff --git a/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx b/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx
index 6217563..1af247f 100644
--- a/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx	
+++ b/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx	
@@ -52,7 +52,7 @@ const dataNode = ({ data }) => {
                 {data.label || "Data Node"}
             </div>
             <div style={{ padding: "10px" }}>
-                {data.content || "Data Node"}
+                {data.content || "Placeholder Data Content"}
             </div>
         </div>
     );
@@ -61,5 +61,6 @@ const dataNode = ({ data }) => {
 export default {
     type: "dataNode", // Must match the type used in nodeTypes
     label: "Data Node",
+    defaultContent: "Placeholder Node",
     component: dataNode
 };
diff --git a/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx b/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx
index 33f7dd7..6a0da51 100644
--- a/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx
+++ b/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx
@@ -52,7 +52,7 @@ const nodeGroupBox = ({ data }) => {
                 {data.label || "Node Group Box"}
             </div>
             <div style={{ padding: "10px" }}>
-                {data.content || "Node Group Box"}
+                {data.content || "Placeholder Group Box Content"}
             </div>
         </div>
     );
@@ -61,5 +61,6 @@ const nodeGroupBox = ({ data }) => {
 export default {
     type: "nodeGroupBox", // Must match the type used in nodeTypes
     label: "Node Group Box",
+    defaultContent: "Placeholder Node",
     component: nodeGroupBox
 };
diff --git a/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx b/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
index f06d480..7bce0ed 100644
--- a/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
+++ b/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
@@ -52,7 +52,7 @@ const ExportToCSVNode = ({ data }) => {
                 {data.label || "Export to CSV"}
             </div>
             <div style={{ padding: "10px" }}>
-                {data.content || "Export to CSV"}
+                {data.content || "Placeholder CSV Content"}
             </div>
         </div>
     );
@@ -61,5 +61,6 @@ const ExportToCSVNode = ({ data }) => {
 export default {
     type: "ExportToCSVNode", // Must match the type used in nodeTypes
     label: "Export to CSV",
+    defaultContent: "Placeholder Node",
     component: ExportToCSVNode
 };