diff --git a/src/App.vue b/src/App.vue
index cab3d7dc9..eef62ff20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,8 +112,6 @@
           :screen="screen"
           title="Default"
           :render-controls="displayBuilder"
-          :show-templates-panel="showTemplatesPanel"
-          :reshow-templates-panel="reshowTemplatesPanel"
           @change="updateConfig"
         >
           <default-loading-spinner />
@@ -448,8 +446,6 @@ export default {
         }
       },
       showTemplatesPanel: false,
-      reshowTemplatesPanel: false,
-      myTemplatesData: null,
       sharedTemplatesData: null,
     };
   },
@@ -704,10 +700,7 @@ export default {
       this.$refs.watchersPopup.show();
     },
     openTemplatesPanel() {
-      this.showTemplatesPanel = true;
-      this.reshowTemplatesPanel = true;
-      this.$emit('update-templates-panel', this.showTemplatesPanel);
-      window.ProcessMaker.EventBus.$emit("open-templates-panel");
+      this.$refs.builder.openTemplatesPanel();
     },
     openComputedProperties() {
       this.$refs.computedProperties.show();
diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 58d9a5e30..6e802bca9 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -40,21 +40,13 @@ export default {
   mounted() {
   },
   methods: {
-    selectTemplate() {
-      this.$emit("template-selected", this.template.id);
-    },
+    
   },
 };
 </script>
 
 <style lang="scss" scoped>
 
-.screen-template-card {
-  // border: none;
-}
-
-
-
 .thumbnail-container:hover,
 .thumbnail-container.active {
   border-color: #1572C2;
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index 2db30a5a9..ceacf8a55 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,7 +1,7 @@
 <template>
   <div data-cy="screen-templates-section">
     <div class="d-flex justify-content-between">
-      <h6 class="pt-2">Select a Template</h6>
+      <h6 class="pt-2">{{ $t("Select a Template") }}</h6>
       <button
         class="panel-close-btn"
         @click="$emit('close-templates-panel')"
@@ -17,7 +17,7 @@
         :class="{ 'my-templates-selected': myTemplatesSelected }"
         data-cy="my-templates-tab"
       >
-        My Templates
+        {{ $t("My Templates") }}
       </b-button>
       <b-button
         @click="showSharedTemplates"
@@ -25,24 +25,44 @@
         :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
         data-cy="shared-templates-tab"
       >
-        Shared Templates
+        {{ $t("Shared Templates") }}
       </b-button>
     </div>
     <div class="d-flex justify-content-center">
-      <div v-if="myTemplatesSelected" class="d-flex justify-content-center p-0">
+      <div
+        v-if="myTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="my-templates-list"
+      >
+        <b-card-body
+          v-if="noMyTemplatesFound"
+          class="p-2 h-100 overflow-auto"
+        >
+          <h5>{{ $t("No templates found.") }}</h5>
+        </b-card-body>
         <screen-template-card
+          v-else
           v-for="template in myTemplatesData"
           :key="template.id"
           :template="template"
-          @template-selected="handleSelectedTemplate"
         />
       </div>
-      <div v-if="sharedTemplatesSelected" class="d-flex justify-content-center p-0">
+      <div
+        v-if="sharedTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="shared-templates-list"
+      >
+        <b-card-body
+          v-if="noSharedTemplatesFound"
+          class="p-2 h-100 overflow-auto"
+        >
+          <h5>{{ $t("No templates found.") }}</h5>
+        </b-card-body>
         <screen-template-card
+          v-else
           v-for="template in sharedTemplatesData"
           :key="template.id"
           :template="template"
-          @template-selected="handleSelectedTemplate"
         />
       </div>
     </div>
@@ -59,38 +79,60 @@
     mounted() {
         console.log('screen-templates component mounted');
     },
-    props: ['myTemplatesData', 'sharedTemplatesData'],
     data() {
       return {
+        myTemplatesData: null,
+        sharedTemplatesData: null,
         myTemplatesSelected: true,
         sharedTemplatesSelected: false,
+        noMyTemplatesFound: false,
+        noSharedTemplatesFound: false,
       };
     },
-    watch: {
-      sharedTemplatesData() {
-        if (this.sharedTemplatesData !== null) {
-          console.log('SHARED TEMPLATES DATA NOT NULL', this.sharedTemplatesData);
-        this.sharedTemplatesSelected = true;
-        this.myTemplatesSelected = false;
-        console.log('sharedTemplatesData in screen-templates', this.sharedTemplatesData);
-        }
-      },
-    },
     methods: {
       showMyTemplates() {
         this.myTemplatesSelected = true;
         this.sharedTemplatesSelected = false;
-        console.log('myTemplatesData in screen-templates', this.myTemplatesData);
+        this.fetchMyTemplates();
+      },
+      fetchMyTemplates() {
+        ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=0",
+        )
+        .then((response) => {
+          this.myTemplatesData = response.data.data;
+          if (this.myTemplatesData.length === 0 || this.myTemplatesData === undefined) {
+            this.noMyTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      },
+      fetchSharedTemplates() {
+      ProcessMaker.apiClient
+        .get(
+          "templates/screen?is_public=1",
+        )
+        .then((response) => {
+          this.sharedTemplatesData = response.data.data;
+          if (this.sharedTemplatesData.length === 0 || this.sharedTemplatesData === undefined) {
+            this.noSharedTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
       },
       showSharedTemplates() {
-        this.$emit('show-shared-templates');
+        this.myTemplatesSelected = false;
+        this.sharedTemplatesSelected = true;
+        this.fetchSharedTemplates();
       },
     },
     mounted() {
       this.showMyTemplates();
-      this.$on('shared-templates-loaded', () => {
-      console.log('Shared templates data received in screen-templates');
-    });
     }
   };
 </script>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 35dd95a61..208445cb1 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -297,15 +297,12 @@
         class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
       >
         <!--ADD NO TEMPLATES TO SHOW OPTION AND LOADING OPTION-->
-        <div v-if="showTemplatesPanel & !hideTemplatesPanel">
-        <!--{{ templatesPanelComp }}-->
+        <div v-if="showTemplatesPanel">
           <b-card-body class="p-2 h-100 overflow-auto">
             <screen-templates
               ref="screenTemplates"
-              :my-templates-data="myTemplatesData"
               :shared-templates-data="sharedTemplatesData"
               @close-templates-panel="closeTemplatesPanel"
-              @show-shared-templates="$emit('show-shared-templates')"
             />
           </b-card-body>
         </div>
@@ -598,13 +595,6 @@ export default {
     processId: {
       default: 0
     },
-    showTemplatesPanel: {
-      type: Boolean,
-      default: false
-    },
-    myTemplatesData: {
-      type: Array,
-    },
     sharedTemplatesData: {
       type: Array,
     },
@@ -658,14 +648,10 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
-      hideTemplatesPanel: false,
+      showTemplatesPanel: false,
     };
   },
   computed: {
-  // templatesPanelComp() {
-  //   console.log('SHOWTEMPLATESPANEL =', this.showTemplatesPanel);
-  //   console.log('HIDETEMPLATESPANEL =', this.hideTemplatesPanel);
-  // },
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -1137,6 +1123,12 @@ export default {
         this.$store.getters["undoRedoModule/currentState"].currentPage
       );
     },
+    openTemplatesPanel() {
+      this.showTemplatesPanel = true;
+    },
+    closeTemplatesPanel() {
+      this.showTemplatesPanel = false;
+    },
     updateConfig(items) {
       this.config[this.currentPage].items = items;
       this.updateState();
@@ -1431,10 +1423,6 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-    closeTemplatesPanel() {
-      this.hideTemplatesPanel = true;
-      window.ProcessMaker.EventBus.$emit("close-templates-panel");
-    },
   }
 };
 </script>
diff --git a/tests/e2e/specs/ScreenTemplateSection.js b/tests/e2e/specs/ScreenTemplateSection.js
deleted file mode 100644
index c40ebb329..000000000
--- a/tests/e2e/specs/ScreenTemplateSection.js
+++ /dev/null
@@ -1,84 +0,0 @@
-describe('Screen Template Section', () => {
-  it('Opens the screen template panel when Templates button is clicked', () => {
-    cy.visit("/");
-    cy.get("[data-cy=screen-templates]").click();
-    cy.get("[data-cy=screen-templates-section]").should(
-      "be.visible"
-    );
-  })
-});
-
-it("Closes the screen template panel when X button is clicked", () => {
-  cy.visit("/");
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  cy.get("[data-cy=close-templates-section]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "not.exist"
-  );
-});
-
-it("Displays My Templates when My Templates button is clicked", () => {
-  cy.visit("/");
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=my-templates-tab]").click();
-
-  // CHECK REQUEST DATA FOR is_public = 0
-
-  cy.intercept(
-    "POST",
-    "/api/1.0/scripts/execute/1",
-    JSON.stringify({
-      output: [
-        {
-          value: "Jobs",
-          content: "Steve Jobs"
-        },
-        {
-          value: "Musk",
-          content: "Elon Musk"
-        }
-      ]
-    })
-  );
-
-});
-
-it("Displays Shared Templates when Shared Templates button is clicked", () => {
-  cy.visit("/");
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=shared-templates-tab]").click();
-
-  // CHECK REQUEST DATA FOR is_public = 1
-
-});
-
-it("Is hidden when an Inspector Panel should open", () => {
-  cy.visit("/");
-
-  cy.get("[data-cy=screen-templates]").click();
-  cy.get("[data-cy=screen-templates-section]").should(
-    "be.visible"
-  );
-  
-  cy.setPreviewDataInput({ name: "" });
-  cy.openAcordeon("collapse-1");
-  cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
-    position: "bottom"
-  });
-  cy.get("[data-cy=screen-element-container]").click();
-
-  cy.get("[data-cy=screen-templates-section]").should(
-    "not.exist"
-  );
-});
\ No newline at end of file
diff --git a/tests/e2e/specs/ScreenTemplateSection.spec.js b/tests/e2e/specs/ScreenTemplateSection.spec.js
new file mode 100644
index 000000000..2fa212c2f
--- /dev/null
+++ b/tests/e2e/specs/ScreenTemplateSection.spec.js
@@ -0,0 +1,131 @@
+describe('Screen Template Section', () => {
+  it('Opens the screen template panel when Templates button is clicked', () => {
+    cy.visit("/");
+    cy.get("[data-cy=screen-templates]").click();
+    cy.get("[data-cy=screen-templates-section]").should(
+      "be.visible"
+    );
+  })
+});
+
+it("Closes the screen template panel when X button is clicked", () => {
+  cy.visit("/");
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+  cy.get("[data-cy=close-templates-section]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
+});
+
+it("Displays My Templates when My Templates button is clicked", () => {
+  cy.visit("/");
+
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should("be.visible");
+  
+  cy.intercept(
+    "GET",
+    "/api/1.0/templates/screen?is_public=0",
+    {
+      statusCode: 200,
+      body: {
+        data: [{
+          asset_type: null,
+          description: "This is a sample screen description for testing.",
+          editing_screen_uuid: null,
+          id: 1,
+          is_default_template: 0,
+          is_owner: true,
+          is_public: 0,
+          is_system: 0,
+          media: [],
+          name: "My Templates Test",
+          screen_custom_css: null,
+          screen_type: "EMAIL",
+          template_media: [],
+          updated_at: "2024-09-10T18:18:27+00:00",
+          user_id: 1,
+          version: "1"
+        }]
+    }
+  }
+  ).as("fetchMyTemplates");
+
+  cy.get("[data-cy=my-templates-tab]").click();
+
+  cy.wait("@fetchMyTemplates");
+
+  cy.get("[data-cy=my-templates-list]")
+    .should("be.visible")
+    .within(() => {
+      cy.contains("My Templates Test").should("exist");
+    });
+});
+
+it("Displays Shared Templates when Shared Templates button is clicked", () => {
+  cy.visit("/");
+
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should("be.visible");
+  
+  cy.intercept(
+    "GET",
+    "/api/1.0/templates/screen?is_public=1",
+    {
+      statusCode: 200,
+      body: {
+        data: [{
+          asset_type: null,
+          description: "This is a sample screen description for testing.",
+          editing_screen_uuid: null,
+          id: 2,
+          is_default_template: 0,
+          is_owner: true,
+          is_public: 1,
+          is_system: 0,
+          media: [],
+          name: "Shared Templates Test",
+          screen_custom_css: null,
+          screen_type: "FORM",
+          template_media: [],
+          updated_at: "2024-09-10T18:18:27+00:00",
+          user_id: 1,
+          version: "1"
+        }]
+    }
+  }
+  ).as("fetchSharedTemplates");
+
+  cy.get("[data-cy=shared-templates-tab]").click();
+
+  cy.wait("@fetchSharedTemplates");
+
+  cy.get("[data-cy=shared-templates-list]")
+    .should("be.visible")
+    .within(() => {
+      cy.contains("Shared Templates Test").should("exist");
+    });
+});
+
+it("Is hidden when an Inspector Panel should open", () => {
+  cy.visit("/");
+
+  cy.get("[data-cy=screen-templates]").click();
+  cy.get("[data-cy=screen-templates-section]").should(
+    "be.visible"
+  );
+  
+  cy.setPreviewDataInput({ name: "" });
+  cy.openAcordeon("collapse-1");
+  cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+    position: "bottom"
+  });
+  cy.get("[data-cy=screen-element-container]").click();
+
+  cy.get("[data-cy=screen-templates-section]").should(
+    "not.exist"
+  );
+});
\ No newline at end of file