diff --git a/ProcessMaker/Http/Controllers/TaskController.php b/ProcessMaker/Http/Controllers/TaskController.php
index 415bece910..6206f28fca 100755
--- a/ProcessMaker/Http/Controllers/TaskController.php
+++ b/ProcessMaker/Http/Controllers/TaskController.php
@@ -62,7 +62,9 @@ public function index()
 
         $userConfiguration = (new UserConfigurationController())->index()['ui_configuration'] ?? [];
 
-        return view('tasks.index', compact('title', 'userFilter', 'defaultColumns', 'taskDraftsEnabled', 'userConfiguration', 'showOldTaskScreen'));
+        $currentUser = Auth::user();
+
+        return view('tasks.index', compact('title', 'userFilter', 'defaultColumns', 'taskDraftsEnabled', 'userConfiguration', 'showOldTaskScreen', 'currentUser'));
     }
 
     public function edit(ProcessRequestToken $task, string $preview = '')
diff --git a/resources/js/tasks/components/DashboardViewer.vue b/resources/js/tasks/components/DashboardViewer.vue
index aa5fd80457..81d8859d8f 100644
--- a/resources/js/tasks/components/DashboardViewer.vue
+++ b/resources/js/tasks/components/DashboardViewer.vue
@@ -1,19 +1,32 @@
 <template>
     <div>
-        <h2>Dashboard Viewer</h2>
-        <p v-if="dashboardId">Dashboard ID: {{ dashboardId }}</p>
-        <p v-else>No selected dashboard</p>
+        <vue-form-renderer
+          v-model="formData"
+          :config="screen.config"
+          :computed="screen.computed"
+          :custom-css="screen.custom_css"
+          :watchers="screen.watchers"
+        />
     </div>
 </template>
 
 <script>
-export default {
-    name: 'DashboardViewer',
-    props: {
-        dashboardId: {
-            type: [String, null],
-            default: null
+
+  export default {
+    props: ["screen", "formData"],
+    data() {
+      return {
+        disabled: false,
+      };
+    },
+    methods: {},
+    watch: {
+      screen: {
+        deep: true,
+        handler() {
+          this.disabled = false;
         }
+      }
     }
-}
-</script>
\ No newline at end of file
+  };
+</script>
diff --git a/resources/js/tasks/components/ProcessesDashboardsMenu.vue b/resources/js/tasks/components/ProcessesDashboardsMenu.vue
index 6fd5dd39f7..ad427767f9 100644
--- a/resources/js/tasks/components/ProcessesDashboardsMenu.vue
+++ b/resources/js/tasks/components/ProcessesDashboardsMenu.vue
@@ -22,20 +22,18 @@
 
       <div class="divider-custom"></div>
 
-      <div class="dashboard-section">
-        <div class="buttons-list-dashboard">
-          <button
-            v-for="dashboard in dashboards"
-            :key="dashboard.id"
-            class="menu-btn"
-            @click="openProcessDashboard(dashboard.id, 'dashboard')"
-          >
-            <i class="fp-tachometer-alt-average"></i>
-            <span :id="`dashboard-${dashboard.id}`" class="title-dashboard">
-              {{ dashboard.name }}
-            </span>
-          </button>
-        </div>
+      <div class="buttons-list-dashboard">
+        <button
+          v-for="dashboard in dashboards"
+          :key="dashboard.id"
+          class="menu-btn"
+          @click="openProcessDashboard(dashboard.id, 'dashboard')"
+        >
+          <i class="fp-tachometer-alt-average"></i>
+          <span :id="`dashboard-${dashboard.id}`" class="title-dashboard">
+            {{ dashboard.title }}
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -50,15 +48,14 @@ export default {
       pmql: `user_id=${window.ProcessMaker.user.id}`,
       processesList: [],
       labelIcon: "Default Icon",
-      dashboards: [
-        { id: 1, name: "Dashboard 1" },
-        { id: 2, name: "Dashboard 2" },
-        { id: 3, name: "Dashboard 3" },
-      ],
+      dashboards: [],
+      screen: null,
+      formData: null,
     };
   },
   mounted() {
     this.loadProcesses();
+    this.loadDashboards();
   },
   methods: {
     openProcessDashboard(id, type) {
@@ -76,21 +73,29 @@ export default {
             }
           });
       } else {
-        router
-          .push({
-            name: "dashboard",
-            params: { dashboardId: id.toString() },
-          })
-          .catch((err) => {
-            if (err.name !== "NavigationDuplicated") {
-              throw err;
-            }
-          });
+        this.getDashboardViewScreen(id.toString());
       }
 
       this.$emit("processDashboardSelected", { id, type });
       this.$emit("menuItemSelected");
     },
+    callDashboardViewScreen(id, screen, formData) {
+      const router = this.$router || this.$root.$router;
+      router
+        .push({
+          name: "dashboard",
+          params: {
+            dashboardId: id.toString(),
+            screen: screen,
+            formData: formData,
+          },
+        })
+        .catch((err) => {
+          if (err.name !== "NavigationDuplicated") {
+            throw err;
+          }
+        });
+    },
     loadProcesses() {
       const url = this.buildURL();
 
@@ -98,6 +103,13 @@ export default {
         this.processesList = this.processesList.concat(response.data.data);
       });
     },
+    loadDashboards() {
+      const url = this.buildURLDashboards();
+
+      ProcessMaker.apiClient.get(url).then((response) => {
+        this.dashboards = this.dashboards.concat(response.data);
+      });
+    },
     /**
      * Build URL for Process Cards
      */
@@ -109,6 +121,12 @@ export default {
         &order_by=name&order_direction=asc
         &include=user,categories,category`;
     },
+    buildURLDashboards() {
+      return `/dynamic-ui/custom-dashboards`;
+    },
+    buildURLDashboardsScreen(id) {
+      return `/dynamic-ui/custom-dashboards/screen/${id}`;
+    },
     getIconProcess(process) {
       let icon = "Default Icon";
       const unparseProperties = process?.launchpad?.properties || null;
@@ -118,6 +136,15 @@ export default {
 
       return `/img/launchpad-images/icons/${icon}.svg`;
     },
+    getDashboardViewScreen(id) {
+      const url = this.buildURLDashboardsScreen(id);
+
+      ProcessMaker.apiClient.get(url).then((response) => {
+        this.screen = response.data.screen;
+        this.formData = response.data.formData;
+        this.callDashboardViewScreen(id, this.screen, this.formData);
+      });
+    },
   },
 };
 </script>
diff --git a/resources/js/tasks/router.js b/resources/js/tasks/router.js
index 375852d6d1..7740705672 100644
--- a/resources/js/tasks/router.js
+++ b/resources/js/tasks/router.js
@@ -24,7 +24,9 @@ const router = new VueRouter({
       name: "dashboard",
       component: DashboardViewer,
       props: route => ({
-        dashboardId: route.params.dashboardId || null
+        dashboardId: route.params.dashboardId || null,
+        screen: route.params.screen || null,
+        formData: route.params.formData || null
       })
     }
   ]
diff --git a/resources/views/tasks/index.blade.php b/resources/views/tasks/index.blade.php
index 08b4050ead..457f96b708 100644
--- a/resources/views/tasks/index.blade.php
+++ b/resources/views/tasks/index.blade.php
@@ -159,6 +159,7 @@
         window.ProcessMaker.userConfiguration = @json($userConfiguration ?? []);
         window.sessionStorage.setItem('elementDestinationURL', window.location.href);
         window.ProcessMaker.showOldTaskScreen = @json($showOldTaskScreen);
+        window.Processmaker.user = @json($currentUser);
     </script>
     <script>
         window.ProcessMaker.ellipsisPermission = {{