diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index 51074fb..29964c9 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -42,7 +42,7 @@ function Diagram() {
         const { diagrams } = await listDiagrams();
         setDiagramList(diagrams);
         if (diagrams.length > 0) {
-          setDiagramName((prev) => prev || diagrams[0]);
+          setDiagramName(diagrams[0]);
         } else {
           setDiagramName(null);
         }
@@ -218,8 +218,8 @@ function Diagram() {
 
             <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
             <button className="btn" onClick={() => setShowForm(true)} style={{ background: 'blue' }}>➕ Add Node</button>
-            <button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc' }} disabled={!selectedNode}>🗑️ Delete Node</button>
-            <button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
+            <button className="btn" onClick={handleDeleteNode} style={{ color: 'white', background: selectedNode ? '#b81a1a' : '#424040' }} disabled={!selectedNode}>🗑️ Delete Node</button>
+            <button className="btn" onClick={handleDeleteEdge} style={{ color: 'white', background: selectedEdge ? '#b81a1a' : '#424040' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
             <button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
           </>
         )}