diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..bdebce8b0
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "ZnDraw",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/zndraw/app.py b/zndraw/app.py
index 30dd139c5..55b8d53c7 100644
--- a/zndraw/app.py
+++ b/zndraw/app.py
@@ -343,3 +343,8 @@ def draw_schema():
 @io.on("atoms:delete")
 def delete_atoms(data):
     emit("atoms:delete", data, broadcast=True, include_self=False)
+
+
+@io.on("atoms:insert")
+def insert_atoms(data):
+    emit("atoms:insert", data, broadcast=True, include_self=False)
diff --git a/zndraw/static/package-lock.json b/zndraw/static/package-lock.json
index e12c3e53b..91bc02141 100644
--- a/zndraw/static/package-lock.json
+++ b/zndraw/static/package-lock.json
@@ -62,9 +62,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.5.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
-      "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ=="
+      "version": "20.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.2.tgz",
+      "integrity": "sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw=="
     },
     "node_modules/accepts": {
       "version": "1.3.8",
@@ -87,9 +87,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
-      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
       "funding": [
         {
           "type": "github",
diff --git a/zndraw/static/pycom/Cache.js b/zndraw/static/pycom/Cache.js
index 89b4e1aa8..b47288234 100644
--- a/zndraw/static/pycom/Cache.js
+++ b/zndraw/static/pycom/Cache.js
@@ -121,6 +121,35 @@ class Cache {
       ).innerHTML = `${slider.value} / ${slider.max}`;
     });
 
+    this._socket.on("atoms:insert", (data) => {
+      // move all keys after id one step forward
+      const remainingKeys = Object.keys(this._cache);
+      const id = parseInt(Object.keys(data)[0]);
+      for (let i = remainingKeys.length - 1; i >= id; i--) {
+        const currentKey = remainingKeys[i];
+        const newIndex = i + 1;
+        this._cache[newIndex] = this._cache[currentKey];
+        delete this._cache[currentKey];
+      }
+      // insert new atoms
+      this._cache[id] = new Atoms({
+        positions: data[id].positions,
+        cell: data[id].cell,
+        numbers: data[id].numbers,
+        colors: data[id].colors,
+        radii: data[id].radii,
+        connectivity: data[id].connectivity,
+        calc: data[id].calc,
+        pbc: data[id].pbc,
+      });
+      // update slider
+      const slider = document.getElementById("frame-slider");
+      slider.max = Object.keys(this._cache).length - 1;
+      document.getElementById(
+        "info",
+      ).innerHTML = `${slider.value} / ${slider.max}`;
+    });
+
     this._socket.on("atoms:download", (ids) => {
       // send all atoms at once
       const data = {};
diff --git a/zndraw/zndraw.py b/zndraw/zndraw.py
index 3f584ab4c..2d92942db 100644
--- a/zndraw/zndraw.py
+++ b/zndraw/zndraw.py
@@ -173,7 +173,9 @@ def display(self, index):
 
     def insert(self, index, value):
         """Insert atoms before index"""
-        raise NotImplementedError
+        self.socket.emit("atoms:insert", {index: atoms_to_json(value)})
+        if self.display_new:
+            self.display(index)
 
     def append(self, value: ase.Atoms) -> None:
         """Append atoms to the end of the list"""