diff --git a/src/main/resources/public/js/view-process-instance.js b/src/main/resources/public/js/view-process-instance.js
index addcc599..08f72864 100644
--- a/src/main/resources/public/js/view-process-instance.js
+++ b/src/main/resources/public/js/view-process-instance.js
@@ -71,6 +71,7 @@ function loadProcessInstanceDetailsViews() {
 
   loadElementInstancesOfProcessInstance();
   loadJobsOfProcessInstance();
+  loadUserTasksOfProcessInstance();
   loadIncidentsOfProcessInstance();
   loadMessageSubscriptionsOfProcessInstance();
   loadTimersOfProcessInstance();
@@ -569,6 +570,62 @@ function removeTaskPlayableMarkersOfJobs(jobs) {
       });
 }
 
+function loadUserTasksOfProcessInstance() {
+
+  const processInstanceKey = getProcessInstanceKey();
+
+  queryUserTasksByProcessInstance(processInstanceKey)
+      .done(function (response) {
+
+        let processInstance = response.data.processInstance;
+        let userTasks = processInstance.userTasks;
+
+        let totalCount = userTasks.totalCount;
+        let nodes = userTasks.nodes;
+
+        // TODO (#67): show user tasks in tab
+
+        nodes.forEach((userTask, index) => {
+
+          const bpmnElement = userTask.elementInstance.element;
+          const elementId = bpmnElement.elementId;
+
+          const isActiveTask = userTask.state === "CREATED";
+          if (isActiveTask) {
+            makeTaskPlayable(elementId, userTask.key);
+          }
+        });
+
+        removeUserTaskMarkers(nodes);
+      });
+}
+
+function removeUserTaskMarkers(userTasks) {
+  let elementIdsOfActiveTasks = userTasks
+      .filter(function (userTask) {
+        return userTask.state === "CREATED";
+      })
+      .map(function (userTask) {
+        return userTask.elementInstance.element.elementId
+      });
+
+  let elementIdsOfNotActiveTasks = userTasks
+      .filter(function (userTask) {
+        return userTask.state !== "CREATED";
+      })
+      .map(function (userTask) {
+        return userTask.elementInstance.element.elementId
+      })
+
+  elementIdsOfNotActiveTasks
+      .filter(function (elementId) {
+        return !elementIdsOfActiveTasks.includes(elementId);
+      })
+      .forEach(function (elementId) {
+        removeTaskPlayableMarker(elementId);
+      });
+}
+
 function loadIncidentsOfProcessInstance() {
 
   const processInstanceKey = getProcessInstanceKey();
diff --git a/src/main/resources/public/js/zeeqs-client.js b/src/main/resources/public/js/zeeqs-client.js
index c1ff2958..84d30fa9 100644
--- a/src/main/resources/public/js/zeeqs-client.js
+++ b/src/main/resources/public/js/zeeqs-client.js
@@ -285,6 +285,34 @@ const jobsByProcessInstanceQuery = `query JobsOfProcessInstance($key: ID!, $zone
     }
   }`;
 
+const userTasksByProcessInstanceQuery = `query UserTasksOfProcessInstance($key: ID!) {  
+    processInstance(key: $key) {    
+       userTasks(perPage: 100) {
+        totalCount
+        nodes {
+          key
+          state
+          
+          assignee
+          candidateGroups
+          
+          form {
+            resource
+          }
+          
+          elementInstance {
+            key
+            element {
+              elementId
+              elementName
+              bpmnElementType
+            }
+          }
+        }
+      }
+    }
+  }`;
+
 const incidentsByProcessInstanceQuery = `query IncidentsOfProcessInstance($key: ID!, $zoneId: String!) {  
     processInstance(key: $key) {    
       incidents {
@@ -640,6 +668,13 @@ function queryJobsByProcessInstance(processInstanceKey) {
   });
 }
 
+function queryUserTasksByProcessInstance(processInstanceKey) {
+
+  return fetchData(userTasksByProcessInstanceQuery, {
+    key: processInstanceKey
+  });
+}
+
 function queryIncidentsByProcessInstance(processInstanceKey) {
 
   return fetchData(incidentsByProcessInstanceQuery, {