diff --git a/resources/js/processes/screen-builder/screen.vue b/resources/js/processes/screen-builder/screen.vue
index 11d6a96274..ede1b2d734 100644
--- a/resources/js/processes/screen-builder/screen.vue
+++ b/resources/js/processes/screen-builder/screen.vue
@@ -29,7 +29,12 @@
           :screen="screen"
           :render-controls="displayBuilder"
           :process-id="processId"
+          :show-templates-panel="showTemplatesPanel"
+          :my-templates-data="myTemplatesData"
+          :shared-templates-data="sharedTemplatesData"
           @change="updateConfig"
+          @close-templates-panel="closeTemplatesPanel"
+          @show-shared-templates="fetchSharedTemplates"
         >
           <data-loading-basic :is-loaded="false" />
         </vue-form-builder>
@@ -475,6 +480,15 @@ export default {
             icon: "fas fa-redo",
             action: "redoAction()",
           },
+          {
+            id: "button_templates",
+            type: "button",
+            title: this.$t("Screen Templates"),
+            name: this.$t("Templates"),
+            variant: "link",
+            icon: "fas fa-palette",
+            action: "openTemplatesPanel()",
+          },
           {
             id: "button_calcs",
             type: "button",
@@ -594,6 +608,9 @@ export default {
         ],
       },
       iframeHeight: "600px",
+      showTemplatesPanel: false,
+      myTemplatesData: null,
+      sharedTemplatesData: null,
     };
   },
   computed: {
@@ -1017,6 +1034,39 @@ export default {
     redoAction() {
       this.$refs.builder.redo();
     },
+    openTemplatesPanel() {
+      //Filter to retrieve my templates. When select shared templates, refetch.
+      this.fetchMyTemplates();
+      this.showTemplatesPanel = true;
+    },
+    closeTemplatesPanel() {
+      this.showTemplatesPanel = false;
+    },
+    fetchMyTemplates() {
+      ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=0",
+        )
+        .then((response) => {
+          this.myTemplatesData = response.data.data;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    fetchSharedTemplates() {
+      ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=1",
+        )
+        .then((response) => {
+          this.sharedTemplatesData = response.data.data;
+          this.$emit('shared-templates-loaded');
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
     openComputedProperties() {
       this.$refs.computedProperties.show();
     },