diff --git a/frontend/index.html b/frontend/index.html
index 42b9df0..259fa93 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="/env.js"></script>
-    <title>Vite + React</title>
+    <title>Labmap</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index c916b47..4abcf92 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -198,136 +198,87 @@ function Diagram() {
 
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
-      <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}>
-  <div style={{ position: 'relative', display: 'inline-block', marginRight: 8 }}>
-    <select
-      value={diagramName || ''}
-      onChange={(e) => setDiagramName(e.target.value)}
-      className="btn"
-      style={{
-        padding: '10px 16px',
-        height: 48,
-        fontSize: 16,
-        fontWeight: 'bold',
-        borderRadius: '12px',
-        border: 'none',
-        background: '#111',
-        color: 'white',
-        cursor: 'pointer',
-        appearance: 'none',
-        width: 180,
-      }}
-    >
-      {diagramList.map((name) => (
-        <option key={name} value={name} style={{ color: 'white' }}>
-          📌 {name}
-        </option>
-      ))}
-    </select>
-    <div
-      style={{
-        position: 'absolute',
-        right: 16,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        pointerEvents: 'none',
-      }}
-    >
-      ⏷
-    </div>
-  </div>
+      <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: '10px', height: '48px' }}>
+        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+          <select
+            value={diagramName || ''}
+            onChange={(e) => setDiagramName(e.target.value)}
+            style={{
+              padding: '10px 16px',
+              height: '48px',
+              fontSize: '16px',
+              fontWeight: 'bold',
+              borderRadius: '12px',
+              border: 'none',
+              background: '#111',
+              color: 'white',
+              cursor: 'pointer',
+              appearance: 'none',
+              width: 180,
+              paddingRight: 32,
+            }}
+          >
+            {diagramList.map((name) => (
+              <option key={name} value={name} style={{ color: 'white', font: 'bold 16px Arial' }}>
+                📌 {name}
+              </option>
+            ))}
+          </select>
+          <div
+            style={{
+              position: 'absolute',
+              right: 12,
+              top: '50%',
+              transform: 'translateY(-50%)',
+              pointerEvents: 'none',
+              fontSize: 16,
+              color: 'white',
+            }}
+          >
+            ⏷
+          </div>
+        </div>
 
-
-        <button
-          className="btn"
-          style={{ marginLeft: 8, background: '#d28519', color: 'white' }}
-          onClick={() => {
-            const newName = prompt("Enter new diagram name:");
-            if (newName) {
-              if (!diagramList.includes(newName)) {
-                const updatedList = [...diagramList, newName];
-                setDiagramList(updatedList);
-              }
-              setDiagramName(newName);
-              setNodes([]);
-              setEdges([]);
-              setSelectedNode(null);
-              setSelectedEdge(null);
+        <button className="btn" style={{ background: '#d28519' }} onClick={() => {
+          const newName = prompt("Enter new diagram name:");
+          if (newName) {
+            if (!diagramList.includes(newName)) {
+              const updatedList = [...diagramList, newName];
+              setDiagramList(updatedList);
             }
-          }}
-        >
-          🆕 New Diagram
-        </button>
-        <button onClick={handleSave} className="btn" style={{ marginLeft: 8, background: 'green' }}>💾 Save</button>
-        <button onClick={handleAddNode} className="btn" style={{ marginLeft: 8, background: 'blue' }}>➕ Add Node</button>
-        <button
-          onClick={handleDeleteNode}
-          className="btn"
-          style={{
-            marginLeft: 8,
-            background: selectedNode ? '#b81a1a' : '#ccc',
-            color: selectedNode ? 'white' : '#666',
-            cursor: selectedNode ? 'pointer' : 'not-allowed',
-          }}
-          disabled={!selectedNode}
-        >
-          🗑️ Delete Node
-        </button>
-        <button
-          onClick={handleDeleteEdge}
-          className="btn" 
-          style={{ 
-            marginLeft: 8,
-            background: selectedNode ? '#b81a1a' : '#ccc',
-            color: selectedNode ? 'white' : '#666',
-            cursor: selectedNode ? 'pointer' : 'not-allowed',
-          }} 
-          disabled={!selectedEdge}
-        >
-          🗑️ Delete Edge
-        </button>
-        <button onClick={handleDeleteDiagram} className="btn" style={{ marginLeft: 8, background: 'red' }}>🗑️ Delete Diagram</button>
+            setDiagramName(newName);
+            setNodes([]);
+            setEdges([]);
+            setSelectedNode(null);
+            setSelectedEdge(null);
+          }
+        }}>🆕 New Diagram</button>
+
+        <button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
+        <button className="btn" onClick={handleAddNode} style={{ background: 'blue' }}>➕ Add Node</button>
+
+        <button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc', color: selectedNode ? 'white' : '#666', cursor: selectedNode ? 'pointer' : 'not-allowed' }} disabled={!selectedNode}>🗑️ Delete Node</button>
+
+        <button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc', color: selectedEdge ? 'white' : '#666', cursor: selectedEdge ? 'pointer' : 'not-allowed' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
+
+        <button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
       </div>
 
       {showForm && (
-        <div
-          style={{
-            position: 'absolute',
-            zIndex: 20,
-            right: 10,
-            top: 80,
-            background: '#e6f0fa',
-            padding: '16px',
-            borderRadius: '12px',
-            boxShadow: '0 4px 8px rgba(0,0,0,0.15)',
-            width: 280,
-          }}
-        >
-          <h4 style={{ color: '#125ea8', marginBottom: 12, fontSize: 18, display: 'flex', alignItems: 'center', gap: 8 }}>
-            🧩 Add New Node
-          </h4>
-          <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>
-            Label:
-          </label>
+        <div style={{ position: 'absolute', zIndex: 20, right: 10, top: 80, background: '#e6f0fa', padding: '16px', borderRadius: '12px', boxShadow: '0 4px 8px rgba(0,0,0,0.15)', width: 280 }}>
+          <h4 style={{ color: '#125ea8', marginBottom: 12, fontSize: 18, display: 'flex', alignItems: 'center', gap: 8 }}>🧩 Add New Node</h4>
+          <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Label:</label>
           <input
             type="text"
             placeholder="Enter label"
             value={newLabel}
             onChange={(e) => setNewLabel(e.target.value)}
-            style={{
-              padding: '6px',
-              width: '100%',
-              borderRadius: 6,
-              border: '1px solid #ccc',
-              marginBottom: 12,
-            }}
+            style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
           />
           <IconSelector onSelect={setSelectedIcon} />
           <div style={{ marginTop: 12 }}>
             <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
-            <button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>
-              ❌ Cancel
-            </button>
+            <button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button>
           </div>
         </div>
       )}
@@ -351,7 +302,6 @@ function Diagram() {
         <Background />
         <Controls />
       </ReactFlow>
-
     </div>
   );
 }
