diff --git a/wiki/pages/notebook.html b/wiki/pages/notebook.html
index ef7a5f005c0082f14ccde15168bc19259326bac6..c21625eb45246c9e3cabf80685e0f5c9a777081b 100644
--- a/wiki/pages/notebook.html
+++ b/wiki/pages/notebook.html
@@ -74,16 +74,29 @@
 
     openPage() {
       //  This opens the notebook 'page' HTML.
-      document.getElementById("viewbox").style.display = "block";
+      document.getElementById("viewbox").style.display = "flex";
       document.getElementById("backdrop").style.display = "block";
     }
   }
 
+  class Backdrop {
+    constructor(backdropId) {
+      this.backdrop = document.getElementById(backdropId);
+      this.backdrop.addEventListener("click", (event) => this.closePage());
+    }
+
+    closePage() {
+      document.getElementById("viewbox").style.display = "none";
+      document.getElementById("backdrop").style.display = "none";
+    }
+  }
+
   document.addEventListener('DOMContentLoaded', () => {
     new NotebookPage("cell1","ref");
     new NotebookPage("cell2","ref");
     new NotebookPage("cell3","ref");
     new NotebookPage("cell4","ref");
+    new Backdrop("backdrop");
   });
 </script>
 
@@ -126,11 +139,18 @@
   <div class="backdrop" id="backdrop">
   </div>
 
-  <div class="viewbox" id="viewbox" style="border: 2px solid black; text-align: center; overflow:scroll; display:flex;">
-    <div style="background-color: #ff424bff; color: white; flex: 1;">
-      <h1>Heading</h1>
+  <div class="viewbox" id="viewbox" style="border: 2px solid black; overflow:scroll; background-color: #ff424bff;">
+    <div style="background-color: #ff424bff; color: white; flex: 1; padding:5px;">
+      <h1 style="text-align: center;">Task</h1>
+      <p>Time: xx:xx xx/xx/xx</p>
+      <h2 style="text-align: center;">Participants:</h2>
+      <ul>
+        <li>Scientist 1</li>
+        <li>Researcher 2</li>
+        <li>Data collector 3</li>
+      </ul>
     </div>
-    <div style="background-color: white; color: black; flex: 2;">
+    <div style="background-color: white; color: black; flex: 2; overflow:scroll; padding:5px;">
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Ornare lectus sit amet est placerat in egestas erat imperdiet. At urna condimentum mattis pellentesque id nibh tortor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Purus gravida quis blandit turpis cursus in. Euismod lacinia at quis risus sed vulputate. Dignissim convallis aenean et tortor at risus viverra adipiscing at. Eget sit amet tellus cras adipiscing enim eu turpis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Consequat semper viverra nam libero. Pretium vulputate sapien nec sagittis.