diff --git a/sample_prep_protocol.html b/sample_prep_protocol.html
new file mode 100644
index 0000000..fe0b2d1
--- /dev/null
+++ b/sample_prep_protocol.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+  <header>
+    <link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link>
+    <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script>
+  </header>
+
+  <body>
+    <div class="container">
+      <form class="needs-validation" name = "sample">
+        <div class="row">
+          <div class="col">
+            <label class = "form-label" for="name">
+              Name of Preparation Protocol
+            </label>
+          </div>
+          <div class="col">
+            <input class="form-control" type="text" name="name" id = "name"
+                       placeholder="e.g. my favourite protocol">
+            </input>
+          </div>
+        </div>
+
+        <div class="row">
+        	<div class="col-6">
+            <label class="form-label" for="sample_size">
+              Sample size [uL]
+            </label>
+          </div>
+          <div class="col">
+            <input class="form-control" type="number"
+                id = "Sample_Size" name="sample_size" value=40>
+            </input>
+          </div>
+        </div>
+
+        <div class="row">
+        	<div class="col-6">
+            <label class = "form-label" for="main_dilution">
+              Main dilution
+            </label>
+          </div>
+          <div class="col">
+            <input class="form-control" type="text" name="main_dilution"
+                     placeholder="e.g. 1:5">
+            </input>
+      	  </div>
+      	</div>
+
+        <div class="row">
+        	<div class="col-6">
+            <label class = "form-label" for="setteling_time">
+              Setteling time [s]
+            </label>
+          </div>
+          <div class="col">
+            <input class="form-control" type="number" id="Setteling_Time"
+                        name="setteling_time" value=15>
+            </input>
+
+          </div>
+        </div>
+        <div class="row">
+        	<div class="col-6">
+            <label class="form-label" for="prep-notes">
+                Notes
+            </label>
+          </div>
+          <div class="col">
+            <textarea class="form-control" name="prep-notes" id="Prep_Notes"
+                          placeholder="Notes about the preparation"
+                          rows="1" cols="60">
+            </textarea>
+          </div>
+        </div>
+        <button class="btn btn-primary float-end" onclick="add();">submit</button>
+      </form>
+    </div>
+  </body>
+  <script>
+
+  var db;
+  let openRequest = indexedDB.open("my_db");
+
+  openRequest.onupgradeneeded = function() {
+    db = openRequest.result;
+    db.createObjectStore("microscope_setup", {autoIncrement : true});
+    db.createObjectStore("prep_protocol", {autoIncrement : true});
+
+  };
+
+  openRequest.onerror = function() {
+    console.error("Error", openRequest.error);
+  };
+
+  openRequest.onsuccess = function() {
+    db = openRequest.result;
+    // continue working with database using db object
+  };
+  function add(e){
+    e.preventDefault();
+    let prep_protocol = {
+      "name" : document.getElementById("name").value,
+      "Sample_Size" : document.getElementById("Sample_Size").value,
+      "Setteling_Time" : document.getElementById("Setteling_Time").value,
+      "Prep_Notes" : document.getElementById("Prep_Notes").value
+    }
+    let transaction =  db.transaction(["prep_protocol"], "readwrite");
+    let objectStore = transaction.objectStore("prep_protocol");
+    let add_request = objectStore.add(prep_protocol); // (3)
+
+    transaction.oncomplete = (event) => {
+      console.log("All done!");
+    };
+    transaction.onerror = (event) => {
+      console.log("something went wrong");
+      // Don't forget to handle errors!
+    };
+    return false;
+  }
+
+
+
+
+  </script>
+
+</html>
