diff --git a/about/index.html b/about/index.html
index cf36510..45d5c16 100644
--- a/about/index.html
+++ b/about/index.html
@@ -12,7 +12,7 @@
   <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" defer></script>
   <link href="/style.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-  
+
 </head>
 
 <body class="bg-dark">
@@ -235,19 +235,7 @@ <h2 class="accordion-header" id="headingSix">
     </div>
   </div>
 
-  <script>
-    const icon = document.getElementById("icon");
-    const icon1 = document.getElementById("a");
-    const icon2 = document.getElementById("b");
-    const icon3 = document.getElementById("c");
-
-    icon.addEventListener('click', function () {
-      document.getElementById('sidebar').classList.toggle('active');
-      icon1.classList.toggle('a');
-      icon2.classList.toggle('c');
-      icon3.classList.toggle('b');
-    });
-  </script>
+  <script src="/sidebar.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/create/index.html b/create/index.html
index 335500b..6d64996 100644
--- a/create/index.html
+++ b/create/index.html
@@ -15,67 +15,72 @@
     defer></script>
   <link href="/style.css" rel="stylesheet">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+  <style>
+    .form-control.empty {
+      border-color: red !important;
+      border-width: 2px;
+    }
+  </style>
 </head>
+
 <body class="bg-dark">
   <main class="container text-white mt-5">
     <h1>Create</h1>
     <p>Create a JSON file compatible with our activities, which can be uploaded <a href="#">here</a></p>
-    <div class="input-group">
-        <input type="text" class="form-control" placeholder="Title" id="Title">
-    </div>
+
     <div class="list-group">
-      <div class="list-group-item">
-        Terms
-        <input type="checkbox" id="imgs" value="imgs">
-        <label for="imgs">Include images</label>
+      <div class="list-group-item" style="background-color: rgb(224, 224, 224);">
+        <div class="input-group my-1">
+          <input type="text" class="form-control" placeholder="Title" id="title">
+        </div>
       </div>
       <div class="list-group-item bg-light">
-        <div class="input-group mb-3">
+        <div class="input-group mb-2">
           <span class="input-group-text">Term</span>
           <input type="text" class="form-control">
         </div>
-        <div class="input-group my-1">
+        <div class="input-group my-3">
           <span class="input-group-text">Definition</span>
           <textarea class="form-control"></textarea>
         </div>
-        <div class="input-group mb-3">
-          <label class="input-group-text" for="fileInput1">Upload image</label>
-          <input type="file" class="form-control" id="fileInput1">
-        </div>
+        <button class="btn btn-danger delete-item">
+          <i class="bi bi-trash3-fill"></i> Delete
+        </button>
       </div>
       <div class="list-group-item bg-light">
-        <div class="input-group mb-3">
+        <div class="input-group mb-2">
           <span class="input-group-text">Term</span>
           <input type="text" class="form-control">
         </div>
-        <div class="input-group my-1">
+        <div class="input-group my-3">
           <span class="input-group-text">Definition</span>
           <textarea class="form-control"></textarea>
         </div>
-        <div class="input-group mb-3">
-          <label class="input-group-text" for="fileInput2">Upload image</label>
-          <input type="file" class="form-control" id="fileInput2">
-        </div>
+        <button class="btn btn-danger delete-item">
+          <i class="bi bi-trash3-fill"></i> Delete
+        </button>
       </div>
-      
+
       <div class="list-group-item bg-light">
-        <div class="input-group mb-3">
+        <div class="input-group mb-2">
           <span class="input-group-text">Term</span>
-          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+          <input type="text" class="form-control">
         </div>
-        <div class="input-group my-1">
+        <div class="input-group my-3">
           <span class="input-group-text">Definition</span>
-          <textarea class="form-control" aria-label="Definition"></textarea>
-        </div>
-        <div class="input-group mb-3">
-          <label class="input-group-text" for="fileInput3">Upload image</label>
-          <input type="file" class="form-control" id="fileInput3">
+          <textarea class="form-control"></textarea>
         </div>
+        <button class="btn btn-danger delete-item">
+          <i class="bi bi-trash3-fill"></i> Delete
+        </button>
+      </div>
+      <div class="list-group-item p-3" style="background-color: rgb(224, 224, 224);">
+        <button class="btn btn-success download">Download .json</button>
+        <button class="btn btn-primary add-item">Add Item</button>
       </div>
-      <button class="btn btn-success">Download <!-- Title -->.json </button>      
     </div>
   </main>
-  
+
   <div class="hamburger-icon" id="icon">
     <div class="icon-1" id="a"></div>
     <div class="icon-2" id="b"></div>
@@ -92,7 +97,123 @@ <h1>Create</h1>
       </div>
     </div>
   </div>
-  
+
   <script src="/sidebar.js"></script>
+
+  <script>
+    const download = document.querySelector('.download');
+    const title = document.getElementById('title');
+    const addButton = document.querySelector('.add-item');
+    let itemIndex = 0;
+    let inputs = document.querySelectorAll('.form-control');
+
+    addButton.addEventListener('click', function () {
+      const listItem = document.createElement('div');
+      listItem.classList.add('list-group-item', 'bg-light');
+      listItem.innerHTML = `
+        <div class="input-group mb-2">
+          <span class="input-group-text">Term</span>
+          <input type="text" class="form-control">
+        </div>
+        <div class="input-group my-3">
+          <span class="input-group-text">Definition</span>
+          <textarea class="form-control"></textarea>
+        </div>
+        <button class="btn btn-danger delete-item">
+          <i class="bi bi-trash3-fill"></i> Delete
+        </button>
+      `;
+      const listGroup = document.querySelector('.list-group');
+      listGroup.insertBefore(listItem, listGroup.lastElementChild);
+      updateDeleteButtonState();
+      inputs = document.querySelectorAll('.form-control');
+      inputs.forEach(function (input) {
+        input.addEventListener('input', removeEmptyBorder);
+      });
+    });
+
+    document.addEventListener('click', function (event) {
+      if (event.target && event.target.classList.contains('delete-item')) {
+        event.target.closest('.list-group-item').remove();
+        updateDeleteButtonState();
+      }
+    });
+
+    function updateDeleteButtonState() {
+      const deleteButtons = document.querySelectorAll('.delete-item');
+      deleteButtons.forEach(function (button) {
+        button.disabled = deleteButtons.length <= 1;
+      });
+    }
+
+    function removeEmptyBorder() {
+      inputs.forEach(function (item) {
+        if (item.value.trim() !== "") { item.classList.remove('empty'); }
+      });
+    }
+
+    title.addEventListener('input', function () {
+      download.textContent = "Download " + this.value + ".json";
+    });
+
+    download.addEventListener('click', function () {
+      let firstEmptyInput = null;
+
+      removeEmptyBorder();
+
+      inputs.forEach(function (item) {
+        if (item.value.trim() === "") { item.classList.add('empty'); }
+      });
+
+      inputs.forEach(function (item) {
+        if (item.value === "" || item.value === null) {
+          item.classList.add('empty');
+          if (!firstEmptyInput) { firstEmptyInput = item; }
+        } else { item.classList.remove('empty'); }
+      });
+
+      if (firstEmptyInput) { firstEmptyInput.focus(); }
+      else {
+        const jsonData = generateJSONData();
+        const blob = new Blob([jsonData], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = title.value + ".json";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      }
+    });
+
+    function generateJSONData() {
+      const jsonData = [];
+
+      document.querySelectorAll('.list-group-item.bg-light').forEach(function (item) {
+        const termInput = item.querySelector('.input-group.mb-2 input');
+        const definitionInput = item.querySelector('.input-group.my-3 textarea');
+
+        if (termInput && definitionInput) {
+          const termValue = termInput.value.trim();
+          const definitionValue = definitionInput.value.trim();
+
+          if (termValue !== "" && definitionValue !== "") {
+            const newItem = {
+              "term": termValue,
+              "definition": definitionValue
+            };
+            jsonData.push(newItem);
+          }
+        }
+      });
+
+      return JSON.stringify(jsonData, null, 2);
+    }
+  </script>
+
+
 </body>
-</html>
+
+</html>
\ No newline at end of file
