diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..5a938ce
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "useTabs": false
+}
diff --git a/app.js b/app.js
index 7d1d36a..22be8f7 100644
--- a/app.js
+++ b/app.js
@@ -8,6 +8,14 @@ var nunjucks = require("nunjucks");
 const passport = require('passport');
 const AtlassianOAuth2Strategy = require('passport-atlassian-oauth2');
 const session = require('express-session');
+
+var fs = require('fs');
+
+if (!fs.existsSync('.env')) {
+  console.log("No .env file found. Please create one using the .env.example file as a template.");
+  process.exit(1);
+}
+
 const dotenv = require('dotenv').config();
 
 const https = require('https');
diff --git a/controllers/jiraAPIController.js b/controllers/jiraAPIController.js
index e4ffc28..1f42ae8 100644
--- a/controllers/jiraAPIController.js
+++ b/controllers/jiraAPIController.js
@@ -124,6 +124,23 @@ exports.searchIssues = function(req, jql) {
     return withRetry(searchIssuesInternal, req, jql);
 }
 
+exports.suggestIssues = function(req, query) {
+    return withRetry(suggestIssuesInternal, req, query);
+}
+
+function suggestIssuesInternal(req, query) {
+    const url = getCallURL(req);
+    if (process.env.JIRA_PROJECT_JQL) {
+        query += '&currentJQL=' + process.env.JIRA_PROJECT_JQL
+    }
+    return fetch(url + '/rest/api/3/issue/picker?query=' + query , {
+        method: 'GET',
+        headers: getDefaultHeaders(req),
+        agent:httpsAgent
+    }).then(res => res.json());
+
+}
+
 function getIssueInternal(req, issueId) {
     const url = getCallURL(req);
     return fetch(url + '/rest/api/3/issue/' + issueId, {
diff --git a/controllers/jiraController.js b/controllers/jiraController.js
index c5404b1..378aed3 100644
--- a/controllers/jiraController.js
+++ b/controllers/jiraController.js
@@ -9,7 +9,9 @@ exports.getUsersWorkLogsAsEvent = function(req, start, end) {
     const formattedStart = filterStartTime.toLocaleDateString('en-CA');
     const formattedEnd = filterEndTime.toLocaleDateString('en-CA');
 
-    return jiraAPIController.searchIssues(req, 'worklogAuthor = currentUser() AND worklogDate >= ' + formattedStart + ' AND worklogDate <= '+ formattedEnd).then(result => {
+    let issuesPromise = jiraAPIController.searchIssues(req, 'worklogAuthor = currentUser() AND worklogDate >= ' + formattedStart + ' AND worklogDate <= '+ formattedEnd);
+    
+    return issuesPromise.then(result => {
         // create an array of issue IDs and keys from result.issues
         const issues = result.issues.map(issue => { return {issueId: issue.id, issueKey: issue.key, summary: issue.fields.summary} });
         const userWorkLogs = [];
@@ -87,6 +89,65 @@ exports.deleteWorkLog = function(req, issueId, worklogId) {
     return jiraAPIController.deleteWorkLog(req, issueId, worklogId);
 }
 
+exports.suggestIssues = function(req, start, end, query) {
+    var startDate = new Date(start).toISOString().split('T')[0];
+    var endDate = new Date(end).toISOString().split('T')[0];
+    var searchInJira = req.query.searchInJira;
+    var query = req.query.query;
+
+    var promises = [];
+
+    var emptyJQL = 'worklogAuthor = currentUser() AND worklogDate >= ' + startDate + ' AND worklogDate <= '+endDate+' OR ((assignee = currentUser() OR reporter = currentUser()) AND ((statusCategory != '+ process.env.JIRA_DONE_STATUS +') OR (statusCategory = '+ process.env.JIRA_DONE_STATUS +' AND status CHANGED DURING (' + startDate + ', '+endDate+'))))';
+
+    var keyJQL = 'key = ' + query
+
+    if (searchInJira != 'true') {
+        promises.push(jiraAPIController.searchIssues(req, emptyJQL));
+    } else {
+      promises.push(jiraAPIController.searchIssues(req, keyJQL));
+      promises.push(jiraAPIController.suggestIssues(req, query));
+    }
+
+    
+
+    return Promise.all(promises).then(results => {
+        // results[0] = base JQL search
+        // if search in jira
+        // results[0] = Key search
+        // results[1] = Suggestion search
+        
+        var issues = []
+        if (searchInJira != 'true' && results[0].issues) {
+            issues = results[0].issues.map(mapIssuesFunction);
+        }
+
+        if (searchInJira == 'true') {
+            if (results[1] && results[1].sections && results[1].sections.length > 0) {
+                for (var i = 0; i < results[1].sections.length; i++) {
+                    if (results[1].sections[i].id == "cs") {
+                        //console.log(JSON.stringify(results[0].sections[i]));
+                        // add issues from the suggestion results to the issues array
+                        var mappedIssues = results[1].sections[i].issues.map(mapIssuesFunction);
+                        issues = issues.concat(mappedIssues);
+                    }
+                }
+            }
+            if (results[0] && results[0].issues) {
+                issues = issues.concat(results[0].issues.map(mapIssuesFunction));
+            }
+        }
+        return issues;
+    });
+}
+
+function mapIssuesFunction(issue) {
+    return {
+        id: issue.id,
+        key: issue.key,
+        summary: issue.fields ? issue.fields.summary : issue.summary
+    }
+}
+
 
 function formatDateToJira(toFormat) {
     const dayJsDate = dayjs(toFormat);
diff --git a/example.env b/example.env
index 223e240..cb048e6 100644
--- a/example.env
+++ b/example.env
@@ -29,6 +29,8 @@ JIRA_OAUTH_CALLBACK_URL=http://locahost:3000/auth/callback
 JIRA_DONE_STATUS="Done"
 # Maximum number of issues to return at once. 
 JIRA_MAX_SEARCH_RESULTS=200
+# JQL used to filter suggested issues. uswful for restricting to a project
+JIRA_PROJECT_JQL="project = PLY"
 
 # Express app settings
 # The port to run the app on
diff --git a/public/images/icons8-dots-loading.gif b/public/images/icons8-dots-loading.gif
new file mode 100644
index 0000000..4f6c443
Binary files /dev/null and b/public/images/icons8-dots-loading.gif differ
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 8dd7221..2e9fe62 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -59,6 +59,19 @@ a {
   margin-bottom: 15px;
 }
 
+.modal-content .search-options {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+}
+.modal-content .search-options input {
+  flex-grow: 0;
+}
+.modal-content .search-options label {
+  word-break: keep-all;
+  white-space: nowrap;
+}
+
 .modal .destructive {
   border: 2px solid darkred;
   background: red;
@@ -139,12 +152,16 @@ input#include-weekends {
 }
 
 
-.about-section {
+#about-section {
   position: absolute;
   bottom: 5px;
   opacity: 35%;
 }
 
+#loading-container {
+  width: 50px;
+  overflow: clip;
+}
 
 
 /********** Choices.js **********/
diff --git a/routes/index.js b/routes/index.js
index dbca415..5f96085 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -30,19 +30,13 @@ router.get('/events', function(req, res, next) {
 
 router.get('/issues/user', function(req, res, next) {
   try {
-    var startDate = new Date(req.query.start).toISOString().split('T')[0];
-
-    var endDate = new Date(req.query.end).toISOString().split('T')[0];
-    
-    jiraAPIController.searchIssues(req, 'worklogAuthor = currentUser() AND worklogDate >= ' + startDate + ' AND worklogDate <= '+endDate+' OR ((assignee = currentUser() OR reporter = currentUser()) AND ((statusCategory != '+ process.env.JIRA_DONE_STATUS +') OR (statusCategory = '+ process.env.JIRA_DONE_STATUS +' AND status CHANGED DURING (' + startDate + ', '+endDate+'))))').then(result => {
-      if (!result.issues) {
-        console.log(result);
-      }
-      res.json(result.issues);
+    jiraController.suggestIssues(req, req.query.start, req.query.end, req.query.query).then(result => {
+      res.json(result);
     });
   } catch (error) {
     console.log(error);
   }
+  
 });
 
 router.get('/issues/:issueId', function(req, res, next) { 
diff --git a/views/aboutModal.njk b/views/aboutModal.njk
new file mode 100644
index 0000000..42a3b46
--- /dev/null
+++ b/views/aboutModal.njk
@@ -0,0 +1,39 @@
+{% macro modal() %}
+<div class="modal unselectable modal-about" style="display:none;"> 
+    <div class="modal-content">
+        <h2>About Plywood</h2>
+        <form class="modal-form" id="modal-form-update" method="PUT" action="{{ endpoint }}">
+            <div class="about-ctn">
+                <div class="icons-8">
+                    <p><a target="_blank" href="https://icons8.com/icon/4ONNYCMz9R42/plywood">Plywood</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a></p>
+                    <p><a target="_blank" href="https://icons8.com/icon/KnQ23R20ge4i/dots-loading">Dots Loading</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a></p>
+                </div>
+                <p>Software licensed under the <a target="_blank" href="https://opensource.org/license/MIT/">MIT License</a></p>
+                <p>Version: 0.2.1</p>
+            </div>
+            <div class="buttons">
+                <button id="close-btn-about" title="Close" type="button">✖️</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+
+    function showAboutModal() {
+      const modal = document.querySelector('.modal-about');
+      modal.style.display = 'block';
+    }
+
+    // Hide the modal
+    function hideAboutModal() {
+      const modal = document.querySelector('.modal-about');
+      modal.style.display = 'none';
+    }
+
+    // Add event listeners to the buttons
+    const closeBtnAbout = document.getElementById('close-btn-about');
+    closeBtnAbout.addEventListener('click', hideAboutModal);
+
+</script>
+{% endmacro %}
\ No newline at end of file
diff --git a/views/createModal.njk b/views/createModal.njk
new file mode 100644
index 0000000..b1b471b
--- /dev/null
+++ b/views/createModal.njk
@@ -0,0 +1,225 @@
+{% macro modal(endpoint) %}
+<!-- HTML structure for the modal form -->
+<div class="modal unselectable modal-create">
+  <div class="modal-content">
+    <h2>Create work log</h2>
+    <form
+      class="modal-form"
+      id="modal-form-create"
+      method="POST"
+      action="{{ endpoint }}"
+    >
+      <input type="hidden" name="workLogId-create" value="" />
+      <input type="hidden" name="start-create" value="" />
+      <input type="hidden" name="duration-create" value="" />
+      <label for="issue-create">Issue:</label>
+      <select id="issue-create" name="issue-create" required></select>
+      <div class="search-options">
+        <label for="search-in-jira">Search using jira (slow):</label>
+        <input
+          type="checkbox"
+          id="search-in-jira"
+          value="on"
+          name="search-in-jira"
+          onchange="reinitializeDropdown(!this.checked);"
+        />
+      </div>
+      <label for="comment-create">Comment:</label>
+      <textarea
+        class="comment"
+        id="comment-create"
+        name="comment-create"
+      ></textarea>
+      <div class="buttons">
+        <button id="cancel-btn-create" title="Cancel" type="button">✖️</button>
+        <button
+          class="primary"
+          id="submit-btn-create"
+          title="Submit"
+          type="submit"
+        >
+          ☑️
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+<!-- JavaScript to show the modal and handle form submission -->
+<script>
+  var choicesCreate;  // choices.js instance
+
+
+  function showCreateModal(start, end) {
+    calendar.setOption('unselectAuto', false);
+    hideUpdateModal();
+    const startInput = document.querySelector('input[name="start-create"]');
+    startInput.value = start.toISOString();
+
+    const durationInput = document.querySelector('input[name="duration-create"]');
+    durationInput.value = (end - start)/1000;
+
+    const modal = document.querySelector('.modal-create');
+    modal.style.display = 'block';
+
+  }
+
+  // Hide the modal
+  function hideCreateModal() {
+    const modal = document.querySelector('.modal-create');
+    modal.style.display = 'none';
+    calendar.unselect();
+    calendar.setOption('unselectAuto', true);
+  }
+
+  function handleCreateSubmit(event) {
+    showLoading();
+    event.preventDefault();
+    const form = document.getElementById('modal-form-create');
+    const canSubmit = form.checkValidity();
+    if (!canSubmit) {
+      alert('Please select an issue !');
+      return false;
+    }
+    const formData = new FormData(form);
+
+    const reqBody = {
+      issueId: formData.get("issue-create"),
+      comment: formData.get("comment-create"),
+      start: formData.get("start-create"),
+      duration: formData.get("duration-create")
+    };
+    return fetch('{{ endpoint }}', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(reqBody)
+    })
+    .then(response => {
+        // Handle the response
+        hideLoading();
+        resetControls();
+        refreshEverything();
+        
+      })
+      .catch(error => {
+        handleError(error);
+        console.log(error);
+        // Handle errors
+        hideLoading();
+      });
+  }
+  // Add event listeners to the buttons
+  const cancelBtnCreate = document.getElementById('cancel-btn-create');
+  cancelBtnCreate.addEventListener('click', hideCreateModal);
+
+  const submitBtnCreate = document.getElementById('submit-btn-create');
+  submitBtnCreate.addEventListener('click', handleCreateSubmit);
+
+  // Setup choices.js
+  document.addEventListener('DOMContentLoaded', function() {
+    initializeDropdown(!document.getElementById('search-in-jira').checked);
+    reloadDropdownValues();
+
+  });
+
+  function initializeDropdown(clientSearch) {
+    var choicesElement = document.getElementById('issue-create');
+    choicesCreate = new Choices(choicesElement, {
+      searchEnabled: true,
+      searchFields: ["key","label"],
+      itemSelectText: '',
+      searchFloor: 3,
+      shouldSort: true,
+      searchChoices: clientSearch,
+      shouldSortItems: true,
+    });
+
+    choicesElement.addEventListener('search', function(event) {
+      searchDebounce();
+    });
+  }
+
+  function reinitializeDropdown(clientSearch) {
+    choicesCreate.destroy();
+    initializeDropdown(clientSearch);
+    reloadDropdownValues()
+  }
+
+  function reloadDropdownValues() {
+    fetchOptions().then(options => {
+      choicesCreate.setChoices(options, 'value', 'label', true);
+    });
+  }
+
+  const searchDebounce = debounce(() => searchIssues(choicesCreate.input.value).then(options => {
+    choicesCreate.setChoices(options, 'value', 'label', true);
+  }), 300);
+
+  function debounce(func, timeout = 300){
+      let timer;
+      return (...args) => {
+          clearTimeout(timer);
+          timer = setTimeout(() => { func.apply(this, args); }, timeout);
+      };
+  }
+
+  // Fetch options for the 'Issue' dropdown
+  function fetchOptions() {
+      showLoading();
+    var startDate = encodeURIComponent(new Date(calendar.view.activeStart).toISOString());
+    var endDate = encodeURIComponent(new Date(calendar.view.activeEnd).toISOString());
+    var searchInJira = document.getElementById('search-in-jira').checked;
+    return fetch('/issues/user?start='+ startDate + '&end=' + endDate + "&searchInJira=" + searchInJira)
+    .then((res) => res.json())
+      .then(data => {
+        var options = [];
+        // Add options from the fetched data
+        data.forEach(issue => {
+            const option = {
+              value: issue.id,
+              label: issue.key + ' - ' +issue.summary,
+              key: issue.key
+            };
+            options.push(option);
+        });
+          hideLoading();
+        return options;
+      })
+      .catch(error => {
+        // Handle errors
+        handleError(error);
+        hideLoading();
+      });
+  }
+
+  function searchIssues(query) {
+    var startDate = encodeURIComponent(new Date(calendar.view.activeStart).toISOString());
+    var endDate = encodeURIComponent(new Date(calendar.view.activeEnd).toISOString());
+    var searchInJira = document.getElementById('search-in-jira').checked;
+
+  showLoading();
+      return fetch('/issues/user?start='+ startDate + '&end=' + endDate + "&searchInJira=" + searchInJira + "&query=" + query)
+    .then((res) => res.json())
+      .then(data => {
+        var options = [];
+        // Add options from the fetched data
+        data.forEach(issue => {
+            const option = {
+              value: issue.id,
+              label: issue.key + ' - ' +issue.summary,
+              key: issue.key
+            };
+            options.push(option);
+        });
+      hideLoading();
+        return options;
+      })
+      .catch(error => {
+        // Handle errors
+        hideLoading();
+        handleError(error);
+      });
+  }
+</script>
+{% endmacro %}
diff --git a/views/index.njk b/views/index.njk
index ccd572b..dfaae52 100644
--- a/views/index.njk
+++ b/views/index.njk
@@ -1,5 +1,5 @@
 
-{% import "worklogModal.njk" as worklogModal %}
+{% import "modals.njk" as modals %}
 <!DOCTYPE html>
 <html>
     <head>  
@@ -56,6 +56,13 @@
                     endTime: '17:00', // an end time 
                 },
                 scrollTime: '08:00',
+                loading: function(bool) {
+                    if (bool) {
+                        showLoading();
+                    } else {
+                        hideLoading();
+                    }
+                },
                 events: {
                     url: '/events',
                     method: 'GET',
@@ -67,9 +74,10 @@
                         } else {
                             alert('there was an error while fetching events!');
                         }
-                        
+                        hideLoading();
                     },
                     success: function(events) {
+                        hideLoading();
                         updateTotalTime(events);
                     }
                 },
@@ -80,11 +88,11 @@
                         return true
                     })
                     updateTotalTime(visibleEvents);
-                    refreshIssuesDropdown();
                     
                 },
                 eventResize: function(info) {
                     // use fetch to call /worklog with a PUT request, passing the new start time and calculated duration
+                    showLoading();
                     fetch('/worklog/' + info.event.extendedProps.worklogId, {
                         method: 'PUT',
                         headers: {
@@ -96,15 +104,17 @@
                             duration: (info.event.end - info.event.start)/1000
                         })
                     }).then(function(response) {
-
+                        hideLoading();
                     }).catch((error) => {
                         if(error && error.message && error.message=="NetworkError when attempting to fetch resource.") {
                             window.location.href = "/auth/login";
                         }
                         info.revert();
+                        hideLoading();
                     });
                 },
                 eventDrop: function(info) {
+                    showLoading();
                     fetch('/worklog/' + info.event.extendedProps.worklogId, {
                         method: 'PUT',
                         headers: {
@@ -116,13 +126,14 @@
                             duration: (info.event.end - info.event.start)/1000
                         })
                     }).then(function(response) {
-                        
+                        hideLoading();
 
                     }).catch((error) => {
                         if(error && error.message && error.message=="NetworkError when attempting to fetch resource.") {
                             window.location.href = "/auth/login";
                         }
                         info.revert();
+                        hideLoading();
                     });
                 },
                 eventClick: function(info) {
@@ -151,25 +162,36 @@
                 if (timeVal < 10) {
                     timeVal = '0' + timeVal;
                 }
-                /*switch(this.value) {
+
+                var zoomLabel = document.getElementById("zoom-output");
+                switch(this.value) {
                     case '1':
                         calendar.setOption('slotDuration', '00:30:00');
+                        zoomLabel.innerHTML = "30 minutes / slot";
                     break;
                     case '2':
-                        calendar.setOption('slotDuration', '00:20:00');
+                        calendar.setOption('slotDuration', '00:15:00');
+                        zoomLabel.innerHTML = "15 minutes / slot";
                     break;
                     case '3':
-                        calendar.setOption('slotDuration', '00:15:00');
+                        calendar.setOption('slotDuration', '00:10:00');
+                        zoomLabel.innerHTML = "10 minutes / slot";
+                    break;
+                    case '4':
+                        calendar.setOption('slotDuration', '00:05:00');
+                        zoomLabel.innerHTML = "5 minutes / slot";
                     break;
-                }*/
-                calendar.setOption('slotDuration', '00:'+timeVal+':00');
-                document.getElementById("zoom-output").innerHTML = this.value + " minutes / slot";
+                }
+                //calendar.setOption('slotDuration', '00:'+timeVal+':00');
+                
             }
 
             var weekendInput = document.getElementById("include-weekends");
             weekendInput.addEventListener("change", () => {
                  calendar.setOption('weekends', weekendInput.checked);
             });
+
+            hideLoading();
         });
 
         function updateTotalTime(events) {
@@ -183,17 +205,27 @@
             var timeElement = document.getElementById('total-time-value');
             timeElement.innerHTML = moment.duration(totalTime).format("H [hour and] m [min]");
         }
+
+        function showLoading() {
+            document.getElementById('loading').style.display = 'block';
+        }
+
+        function hideLoading() {
+            document.getElementById('loading').style.display = 'none';
+        }
         </script>
     </head>
 
     <body>
-        {{ worklogModal.modalForm('/worklog/') }}
+        {{ modals.modals('/worklog/') }}
         <div id='calendar'></div>
         <footer class="unselectable">
+            <div id="about-section"><a href="#" onclick="showAboutModal();">About</a></div>
             <div id='total-time'><h3>Total time : </h2><div id='total-time-value'></div></div>
+            <div id='loading-container'><img id="loading" src="/images/icons8-dots-loading.gif" /></div>
             <div id='weekend-container'><input type="checkbox" id="include-weekends" name="include-weekends"><label for="include-weekends">Weekends</label></div>
-            <div id='zoom-container'><input type="range" min="5" max="60" step="5" value="15" id="zoom-range" name="zoom-range"><output for="zoom-range" id="zoom-output">15 minutes / slot</output></div>
-            <div class="about-section"><div class="icons-8"><a target="_blank" href="https://icons8.com/icon/4ONNYCMz9R42/plywood">Plywood</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a></div>Software licensed under the <a target="_blank" href="https://opensource.org/license/MIT/">MIT License</a></div>
+            <div id='zoom-container'><input type="range" min="1" max="4" step="1" value="2" id="zoom-range" name="zoom-range"><output for="zoom-range" id="zoom-output">15 minutes / slot</output></div>
+
         </footer>
     </body>
 </html>
\ No newline at end of file
diff --git a/views/modals.njk b/views/modals.njk
new file mode 100644
index 0000000..32ebb7e
--- /dev/null
+++ b/views/modals.njk
@@ -0,0 +1,57 @@
+{% macro modals(endpoint) %}
+{% import "createModal.njk" as createModal %}
+{% import "updateModal.njk" as updateModal %}
+{% import "aboutModal.njk" as aboutModal %}
+  {{ aboutModal.modal() }}
+  {{ createModal.modal(endpoint) }}
+  {{ updateModal.modal(endpoint) }}
+  <script>
+    function handleError(error) {
+      if(error && error.message && error.message=="NetworkError when attempting to fetch resource.") {
+        return fetch('/auth/refreshToken').catch((error)=>{
+          window.location.href = "/auth/login";
+        });
+      }
+    }
+
+    function resetControls() {
+      showLoading();
+      const updateWorkLogIdInput = document.querySelector('input[name="workLogId-update"]');
+      updateWorkLogIdInput.value = '';
+
+      const updateStartInput = document.querySelector('input[name="start-update"]');
+      updateStartInput.value = '';
+
+      const updateDurationInput = document.querySelector('input[name="duration-update"]');
+      updateDurationInput.value = '';
+
+      const updateCommentInput = document.getElementById('comment-update');
+      updateCommentInput.value = '';
+
+      const createWorkLogIdInput = document.querySelector('input[name="workLogId-create"]');
+      createWorkLogIdInput.value = '';
+
+      const createStartInput = document.querySelector('input[name="start-create"]');
+      createStartInput.value = '';
+
+      const createDurationInput = document.querySelector('input[name="duration-create"]');
+      createDurationInput.value = '';
+
+      const createCommentInput = document.getElementById('comment-create');
+      createCommentInput.value = '';
+
+      calendar.unselect();
+      hideUpdateModal();
+      hideCreateModal();
+
+      choicesCreate.clearInput();
+      hideLoading();
+    }
+
+    function refreshEverything() {
+      calendar.refetchEvents();
+      
+    }
+
+  </script>
+{% endmacro %}
\ No newline at end of file
diff --git a/views/updateModal.njk b/views/updateModal.njk
new file mode 100644
index 0000000..6335e8b
--- /dev/null
+++ b/views/updateModal.njk
@@ -0,0 +1,160 @@
+{% macro modal(endpoint) %}
+  <!-- HTML structure for the modal form -->
+  <div class="modal unselectable modal-update">
+    <div class="modal-content">
+      <h2>Update work log</h2>
+      <form class="modal-form" id="modal-form-update" method="PUT" action="{{ endpoint }}">
+        <input type="hidden" name="workLogId-update" value="">
+        <input type="hidden" name="start-update" value="">
+        <input type="hidden" name="duration-update" value="">
+        <label for="issue-update">Issue:</label>
+        <input type="hidden" id="issue-update" name="issue-update">
+        <div id="issue-label" style="text-align: center;" name="issue-label"  placeholder="No issue"></div>
+        <label for="comment-update">Comment:</label>
+        <textarea class="comment" id="comment-update" name="comment-update"></textarea>
+        <div class="buttons">
+          <button class="destructive" id="delete-btn-update" title="Delete" type="button">🗑️</button>
+          <button id="cancel-btn-update" title="Cancel" type="button">✖️</button>
+          <button class="primary" id="submit-btn-update" title="Submit" type="submit">☑️</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- JavaScript to show the modal and handle form submission -->
+  <script>
+
+    // Show the modal when needed
+    function showUpdateModal(eventObj) {
+      hideCreateModal();
+      const workLogId = eventObj.extendedProps.worklogId;
+      const issueId = eventObj.extendedProps.issueId;
+      const workLogIdInput = document.querySelector('input[name="workLogId-update"]');
+      workLogIdInput.value = workLogId;
+
+      const startInput = document.querySelector('input[name="start-update"]');
+      startInput.value = eventObj.start.toISOString();
+
+      const durationInput = document.querySelector('input[name="duration-update"]');
+      durationInput.value = (eventObj.end - eventObj.start)/1000;
+
+      const modal = document.querySelector('.modal-update');
+      modal.style.display = 'block';
+
+      return fetchWorkLog(workLogId, issueId);
+    }
+
+    // Hide the modal
+    function hideUpdateModal() {
+      const modal = document.querySelector('.modal-update');
+      modal.style.display = 'none';
+    }
+
+    // Handle form submission
+    function handleUpdateSubmit(event) {
+      showLoading();
+      event.preventDefault();
+      const form = document.getElementById('modal-form-update');
+      const formData = new FormData(form);
+
+      const reqBody = {
+        issueId: formData.get("issue-update"),
+        comment: formData.get("comment-update"),
+        start: formData.get("start-update"),
+        duration: formData.get("duration-update")
+      };
+      return fetch('{{ endpoint }}' +formData.get("workLogId-update"), {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(reqBody)
+      })
+      .then(response => {
+          // Handle the response
+          hideLoading();
+          resetControls();
+          refreshEverything();
+        })
+        .catch(error => {
+          handleError(error);
+          console.log(error); 
+          // Handle errors
+          hideLoading();
+        });
+    }
+
+    function handleUpdateDelete(event) {
+      showLoading();
+      event.preventDefault();
+      const form = document.getElementById('modal-form-update');
+      const formData = new FormData(form);
+
+      if (confirm('Are you sure you want to delete this work log ?')) {
+        return fetch('{{ endpoint }}' + formData.get("workLogId-update") + '?issueId=' + formData.get("issue-update"), {
+        method: 'DELETE',
+      })
+      .then(response => {
+        hideLoading();
+          // Handle the response
+          resetControls();
+          refreshEverything();
+        })
+        .catch(error => {
+          handleError(error);
+          console.log(error); 
+          // Handle errors
+          hideLoading();
+        });
+      } else {
+        return false;
+      }
+
+      
+    }
+
+    function fetchWorkLog(workLogId, issueId) {
+      showLoading();
+      fetch(`/worklog/${workLogId}?issueId=${issueId}`)
+        .then((res) => res.json())
+        .then(data => {
+          // Set the form values
+          const issueInput = document.getElementById('issue-update');
+          issueInput.value = data.issueId;
+          fetchIssue(data.issueId)
+          .then((issue) => {
+            const issueLabel = document.getElementById('issue-label');
+            issueLabel.innerHTML = issue.key + ' ' + issue.fields.summary;
+            hideLoading();
+          });
+
+          const commentInput = document.getElementById('comment-update');
+          commentInput.value = data.comment || '';
+        })
+        .catch(error => {
+          handleError(error);
+          hideLoading();
+        });
+    }
+
+    
+    function fetchIssue(issueId) {
+      return fetch(`/issues/${issueId}`)
+      .then((res) => res.json())
+        .catch(error => {
+          handleError(error);
+        });
+    }
+
+    // Add event listeners to the buttons
+    const cancelBtnUpdate = document.getElementById('cancel-btn-update');
+    cancelBtnUpdate.addEventListener('click', hideUpdateModal);
+
+    const submitBtnUpdate = document.getElementById('submit-btn-update');
+    submitBtnUpdate.addEventListener('click', handleUpdateSubmit);
+
+    const deleteBtnUpdate = document.getElementById('delete-btn-update');
+    deleteBtnUpdate.addEventListener('click', handleUpdateDelete);
+
+  </script>
+{% endmacro %}
\ No newline at end of file
diff --git a/views/worklogModal.njk b/views/worklogModal.njk
deleted file mode 100644
index 2354909..0000000
--- a/views/worklogModal.njk
+++ /dev/null
@@ -1,328 +0,0 @@
-{% macro modalForm(endpoint) %}
-  <!-- HTML structure for the modal form -->
-  <div class="modal unselectable modal-update">
-    <div class="modal-content">
-      <h2>Update work log</h2>
-      <form class="modal-form" id="modal-form-update" method="PUT" action="{{ endpoint }}">
-        <input type="hidden" name="workLogId-update" value="">
-        <input type="hidden" name="start-update" value="">
-        <input type="hidden" name="duration-update" value="">
-        <label for="issue-update">Issue:</label>
-        <input type="hidden" id="issue-update" name="issue-update">
-        <div id="issue-label" style="text-align: center;" name="issue-label"  placeholder="No issue"></div>
-        <label for="comment-update">Comment:</label>
-        <textarea class="comment" id="comment-update" name="comment-update"></textarea>
-        <div class="buttons">
-          <button class="destructive" id="delete-btn-update" title="Delete" type="button">🗑️</button>
-          <button id="cancel-btn-update" title="Cancel" type="button">✖️</button>
-          <button class="primary" id="submit-btn-update" title="Submit" type="submit">☑️</button>
-        </div>
-      </form>
-    </div>
-  </div>
-  <div class="modal unselectable modal-create">
-    <div class="modal-content">
-      <h2>Create work log</h2>
-      <form class="modal-form" id="modal-form-create" method="POST" action="{{ endpoint }}">
-        <input type="hidden" name="workLogId-create" value="">
-        <input type="hidden" name="start-create" value="">
-        <input type="hidden" name="duration-create" value="">
-        <label for="issue-create">Issue:</label>
-        <select id="issue-create" name="issue-create" required>
-        </select>
-        <label for="comment-create">Comment:</label>
-        <textarea class="comment" id="comment-create" name="comment-create"></textarea>
-        <div class="buttons">
-          <button id="cancel-btn-create" title="Cancel" type="button">✖️</button>
-          <button class="primary" id="submit-btn-create" title="Submit" type="submit">☑️</button>
-        </div>
-      </form>
-    </div>
-  </div>
-  <!-- JavaScript to show the modal and handle form submission -->
-  <script>
-    function handleError(error) {
-      if(error && error.message && error.message=="NetworkError when attempting to fetch resource.") {
-        return fetch('/auth/refreshToken').catch((error)=>{
-          window.location.href = "/auth/login";
-        });
-      }
-    }
-
-    var choicesCreate;  // choices.js instance
-    // Show the modal when needed
-    function showUpdateModal(eventObj) {
-      hideCreateModal();
-      const workLogId = eventObj.extendedProps.worklogId;
-      const issueId = eventObj.extendedProps.issueId;
-      const workLogIdInput = document.querySelector('input[name="workLogId-update"]');
-      workLogIdInput.value = workLogId;
-
-      const startInput = document.querySelector('input[name="start-update"]');
-      startInput.value = eventObj.start.toISOString();
-
-      const durationInput = document.querySelector('input[name="duration-update"]');
-      durationInput.value = (eventObj.end - eventObj.start)/1000;
-
-      const modal = document.querySelector('.modal-update');
-      modal.style.display = 'block';
-
-      return fetchWorkLog(workLogId, issueId);
-    }
-
-    function showCreateModal(start, end) {
-      calendar.setOption('unselectAuto', false);
-      hideUpdateModal();
-      const startInput = document.querySelector('input[name="start-create"]');
-      startInput.value = start.toISOString();
-
-      const durationInput = document.querySelector('input[name="duration-create"]');
-      durationInput.value = (end - start)/1000;
-
-      const modal = document.querySelector('.modal-create');
-      modal.style.display = 'block';
-      
-    }
-
-    // Hide the modal
-    function hideUpdateModal() {
-      const modal = document.querySelector('.modal-update');
-      modal.style.display = 'none';
-    }
-
-    // Hide the modal
-    function hideCreateModal() {
-      const modal = document.querySelector('.modal-create');
-      modal.style.display = 'none';
-      calendar.unselect();
-      calendar.setOption('unselectAuto', true);
-    }
-
-    // Handle form submission
-    function handleUpdateSubmit(event) {
-      event.preventDefault();
-      const form = document.getElementById('modal-form-update');
-      const formData = new FormData(form);
-
-      const reqBody = {
-        issueId: formData.get("issue-update"),
-        comment: formData.get("comment-update"),
-        start: formData.get("start-update"),
-        duration: formData.get("duration-update")
-      };
-      return fetch('{{ endpoint }}' +formData.get("workLogId-update"), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(reqBody)
-      })
-      .then(response => {
-          // Handle the response
-          resetControls();
-          refreshEverything();
-        })
-        .catch(error => {
-          handleError(error);
-          console.log(error); 
-          // Handle errors
-        });
-    }
-
-    function handleUpdateDelete(event) {
-      event.preventDefault();
-      const form = document.getElementById('modal-form-update');
-      const formData = new FormData(form);
-
-      if (confirm('Are you sure you want to delete this work log ?')) {
-        return fetch('{{ endpoint }}' + formData.get("workLogId-update") + '?issueId=' + formData.get("issue-update"), {
-        method: 'DELETE',
-      })
-      .then(response => {
-          // Handle the response
-          resetControls();
-          refreshEverything();
-        })
-        .catch(error => {
-          handleError(error);
-          console.log(error); 
-          // Handle errors
-        });
-      } else {
-        return false;
-      }
-
-      
-    }
-
-    function handleCreateSubmit(event) {
-      event.preventDefault();
-      const form = document.getElementById('modal-form-create');
-      const canSubmit = form.checkValidity();
-      if (!canSubmit) {
-        alert('Please select an issue !');
-        return false;
-      }
-      const formData = new FormData(form);
-
-      const reqBody = {
-        issueId: formData.get("issue-create"),
-        comment: formData.get("comment-create"),
-        start: formData.get("start-create"),
-        duration: formData.get("duration-create")
-      };
-      return fetch('{{ endpoint }}', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(reqBody)
-      })
-      .then(response => {
-          // Handle the response
-          resetControls();
-          refreshEverything();
-        })
-        .catch(error => {
-          handleError(error);
-          console.log(error); 
-          // Handle errors
-        });
-    }
-
-    // Fetch options for the 'Issue' dropdown
-    function fetchOptions() {
-      var startDate = encodeURIComponent(new Date(calendar.view.activeStart).toISOString());
-      var endDate = encodeURIComponent(new Date(calendar.view.activeEnd).toISOString());
-      return fetch('/issues/user?start='+ startDate + '&end=' + endDate)
-      .then((res) => res.json())
-        .then(data => {
-          var options = [];
-          // Add options from the fetched data
-          data.forEach(issue => {
-              const option = {
-                value: issue.id,
-                label: issue.key + ' - ' +issue.fields.summary
-              };
-              options.push(option);
-          });
-
-          return options;
-        })
-        .catch(error => {
-          // Handle errors
-          handleError(error);
-        });
-    }
-
-    function fetchIssue(issueId) {
-      return fetch(`/issues/${issueId}`)
-      .then((res) => res.json())
-        .catch(error => {
-          handleError(error);
-        });
-    }
-
-    function fetchWorkLog(workLogId, issueId) {
-      fetch(`/worklog/${workLogId}?issueId=${issueId}`)
-        .then((res) => res.json())
-        .then(data => {
-          // Set the form values
-          const issueInput = document.getElementById('issue-update');
-          issueInput.value = data.issueId;
-          fetchIssue(data.issueId)
-          .then((issue) => {
-            const issueLabel = document.getElementById('issue-label');
-            issueLabel.innerHTML = issue.key + ' ' + issue.fields.summary;
-          });
-
-          const commentInput = document.getElementById('comment-update');
-          commentInput.value = data.comment || '';
-        })
-        .catch(error => {
-          handleError(error);
-        });
-    }
-
-    // Add event listeners to the buttons
-    const cancelBtnUpdate = document.getElementById('cancel-btn-update');
-    cancelBtnUpdate.addEventListener('click', hideUpdateModal);
-
-    const submitBtnUpdate = document.getElementById('submit-btn-update');
-    submitBtnUpdate.addEventListener('click', handleUpdateSubmit);
-
-    const deleteBtnUpdate = document.getElementById('delete-btn-update');
-    deleteBtnUpdate.addEventListener('click', handleUpdateDelete);
-
-    const cancelBtnCreate = document.getElementById('cancel-btn-create');
-    cancelBtnCreate.addEventListener('click', hideCreateModal);
-
-    const submitBtnCreate = document.getElementById('submit-btn-create');
-    submitBtnCreate.addEventListener('click', handleCreateSubmit);
-
-    // Setup choices.js
-    document.addEventListener('DOMContentLoaded', function() {
-      choicesCreate = new Choices('#issue-create', {
-        searchEnabled: true,
-        itemSelectText: '',
-        shouldSort: false,
-      });
-
-      choicesCreate.setChoices(async () => {
-        const options = await fetchOptions();
-        return options;
-      });
-
-    });
-
-
-    function resetControls() {
-      const updateWorkLogIdInput = document.querySelector('input[name="workLogId-update"]');
-      updateWorkLogIdInput.value = '';
-
-      const updateStartInput = document.querySelector('input[name="start-update"]');
-      updateStartInput.value = '';
-
-      const updateDurationInput = document.querySelector('input[name="duration-update"]');
-      updateDurationInput.value = '';
-
-      const updateCommentInput = document.getElementById('comment-update');
-      updateCommentInput.value = '';
-
-      const createWorkLogIdInput = document.querySelector('input[name="workLogId-create"]');
-      createWorkLogIdInput.value = '';
-
-      const createStartInput = document.querySelector('input[name="start-create"]');
-      createStartInput.value = '';
-
-      const createDurationInput = document.querySelector('input[name="duration-create"]');
-      createDurationInput.value = '';
-
-      const createCommentInput = document.getElementById('comment-create');
-      createCommentInput.value = '';
-
-      calendar.unselect();
-      hideUpdateModal();
-      hideCreateModal();
-
-      choicesCreate.clearInput();
-    }
-
-    function refreshEverything() {
-      calendar.refetchEvents();
-      
-      refreshIssuesDropdown();
-    }
-
-    function refreshIssuesDropdown() {
-      if (choicesCreate) {
-      choicesCreate.clearChoices();
-      choicesCreate.setChoices(async () => {
-        const options = await fetchOptions();
-        return options;
-      });
-      }
-    }
-
-  </script>
-{% endmacro %}
\ No newline at end of file