diff --git a/.eslintrc.js b/.eslintrc.js
index 15e339a43..f074c53ac 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,10 @@ module.exports = {
     node: true
   },
 
+  globals: {
+    ProcessMaker: "readonly"
+  },
+
   extends: [
     "plugin:vue/recommended",
     "airbnb-base",
diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
index 71291a444..56c12bff5 100644
--- a/src/components/ScreenTemplateCard.vue
+++ b/src/components/ScreenTemplateCard.vue
@@ -3,7 +3,7 @@
     <b-card
       img-top
       class="mb-2 screenbuilder-template-card"
-      @click="showDetails"
+      @click="toggleDetails"
     >
       <div
         v-if="thumbnail"
@@ -29,7 +29,7 @@
             template.description
           }}</span>
         </div>
-        <b-collapse v-model="showApplyOptions">
+        <b-collapse v-model="isApplyOptionsActive">
           <b-form-checkbox-group
             v-model="selected"
             class="apply-options-group p-2"
@@ -93,10 +93,27 @@ export default {
     CssIcon
   },
   mixins: [],
-  props: ["template", "screenId", "currentScreenPage"],
+  props: {
+    template: {
+      type: Object,
+      required: true
+    },
+    screenId: {
+      type: Number,
+      required: true
+    },
+    currentScreenPage: {
+      type: Number,
+      default: 0
+    },
+    activeTemplateId: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
-      showApplyOptions: false,
+      isApplyOptionsActive: false,
       selected: [],
       applyOptions: [
         { text: "CSS", value: "CSS" },
@@ -112,16 +129,21 @@ export default {
         this.template.template_media.length > 0
       ) {
         return this.template.template_media[0].url;
-      } else if (this.template?.template_media?.thumbnail?.url) {
+      }
+      if (this.template?.template_media?.thumbnail?.url) {
         return this.template?.template_media.thumbnail.url;
       }
       return null;
     }
   },
-  mounted() {},
+  watch: {
+    activeTemplateId(newVal) {
+      this.isApplyOptionsActive = newVal === this.template.id;
+    }
+  },
   methods: {
-    showDetails() {
-      this.showApplyOptions = !this.showApplyOptions;
+    toggleDetails() {
+      this.$emit("toggle-active", this.template.id);
     },
     applyTemplate() {
       ProcessMaker.apiClient
@@ -130,7 +152,7 @@ export default {
           templateOptions: this.selected,
           currentScreenPage: this.currentScreenPage
         })
-        .then((response) => {
+        .then(() => {
           ProcessMaker.alert(
             this.$t("The template options have been applied."),
             "success"
@@ -146,7 +168,7 @@ export default {
         });
     },
     onCancel() {
-      this.showApplyOptions = false;
+      this.isApplyOptionsActive = false;
       this.selected = [];
     },
     toggleOption(value) {
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
index ab477e95a..4edf2b73e 100644
--- a/src/components/ScreenTemplates.vue
+++ b/src/components/ScreenTemplates.vue
@@ -1,32 +1,29 @@
 <template>
-  <div
-    class="screen-templates-container"
-    data-cy="screen-templates-section"
-  >
+  <div class="screen-templates-container" data-cy="screen-templates-section">
     <div class="d-flex justify-content-between">
       <h6 class="pt-2">{{ $t("Select a Template") }}</h6>
       <button
         class="panel-close-btn"
-        @click="$emit('close-templates-panel')"
         data-cy="close-templates-section"
+        @click="$emit('close-templates-panel')"
       >
         <i class="fas fa-times"></i>
       </button>
     </div>
     <div class="d-flex template-tabs justify-content-center">
       <b-button
-        @click="showMyTemplates"
         class="d-inline default-template-btn px-1"
         :class="{ 'my-templates-selected': myTemplatesSelected }"
         data-cy="my-templates-tab"
+        @click="showMyTemplates"
       >
         {{ $t("My Templates") }}
       </b-button>
       <b-button
-        @click="showSharedTemplates"
         class="d-inline default-template-btn"
         :class="{ 'shared-templates-selected': sharedTemplatesSelected }"
         data-cy="shared-templates-tab"
+        @click="showSharedTemplates"
       >
         {{ $t("Shared Templates") }}
       </b-button>
@@ -48,12 +45,14 @@
             <h5>{{ $t("No templates found.") }}</h5>
           </b-card-body>
           <screen-template-card
-            v-else
             v-for="template in myTemplatesData"
+            v-else
             :key="template.id"
             :template="template"
             :screen-id="screenId"
-            :currentScreenPage="currentScreenPage"
+            :current-screen-page="currentScreenPage"
+            :active-template-id="activeTemplateId"
+            @toggle-active="setActiveTemplate"
           />
         </b-card-group>
       </div>
@@ -73,67 +72,99 @@
             <h5>{{ $t("No templates found.") }}</h5>
           </b-card-body>
           <screen-template-card
-            v-else
             v-for="template in sharedTemplatesData"
+            v-else
             :key="template.id"
             :template="template"
             :screen-id="screenId"
-            :currentScreenPage="currentScreenPage"
+            :current-screen-page="currentScreenPage"
+            :active-template-id="activeTemplateId"
+            @toggle-active="setActiveTemplate"
           />
         </b-card-group>
       </div>
     </div>
   </div>
 </template>
-  
+
 <script>
-  import ScreenTemplateCard from './ScreenTemplateCard.vue';
+import ScreenTemplateCard from "./ScreenTemplateCard.vue";
 
-  export default {
-    components: {
-      ScreenTemplateCard,
+export default {
+  components: {
+    ScreenTemplateCard
+  },
+  props: {
+    screenId: {
+      type: Number,
+      required: true
+    },
+    currentScreenPage: {
+      type: Number,
+      default: 0
+    },
+    screenType: {
+      type: String,
+      default: "FORM"
+    }
+  },
+  data() {
+    return {
+      myTemplatesData: null,
+      sharedTemplatesData: null,
+      myTemplatesSelected: true,
+      sharedTemplatesSelected: false,
+      noMyTemplatesFound: false,
+      noSharedTemplatesFound: false,
+      activeTemplateId: null,
+      loading: false
+    };
+  },
+  mounted() {
+    this.showMyTemplates();
+  },
+  methods: {
+    setActiveTemplate(id) {
+      // If the same template that is already active is clicked, it deactivates it.
+      this.activeTemplateId = this.activeTemplateId === id ? null : id;
     },
-    props: {
-      screenId: {
-        type: Number,
-        required: true,
-      },
-      currentScreenPage: {
-        type: Number,   
-        default: 0,
-      },
-      screenType: {
-        type: String,   
-        default: 'FORM',
-      }
+    showMyTemplates() {
+      this.myTemplatesSelected = true;
+      this.sharedTemplatesSelected = false;
+      this.activeTemplateId = null;
+      this.fetchMyTemplates();
     },
-    data() {
-      return {
-        myTemplatesData: null,
-        sharedTemplatesData: null,
-        myTemplatesSelected: true,
-        sharedTemplatesSelected: false,
-        noMyTemplatesFound: false,
-        noSharedTemplatesFound: false,
-        loading: false,
-      };
+    fetchMyTemplates() {
+      this.loading = true;
+      ProcessMaker.apiClient
+        .get(`templates/screen?is_public=0&screen_type=${this.screenType}`)
+        .then((response) => {
+          this.myTemplatesData = response.data.data;
+          if (
+            this.myTemplatesData.length === 0 ||
+            this.myTemplatesData === undefined
+          ) {
+            this.noMyTemplatesFound = true;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    methods: {
-      showMyTemplates() {
-        this.myTemplatesSelected = true;
-        this.sharedTemplatesSelected = false;
-        this.fetchMyTemplates();
-      },
-      fetchMyTemplates() {
-        this.loading = true;
-        ProcessMaker.apiClient
-          .get(
-            `templates/screen?is_public=0&screen_type=${this.screenType}`,
-          )
-          .then((response) => {
-            this.myTemplatesData = response.data.data;
-            if (this.myTemplatesData.length === 0 || this.myTemplatesData === undefined) {
-              this.noMyTemplatesFound = true;
+    fetchSharedTemplates() {
+      this.loading = true;
+      ProcessMaker.apiClient
+        .get(`templates/screen?is_public=1&screen_type=${this.screenType}`)
+        .then((response) => {
+          this.sharedTemplatesData = response.data.data;
+          if (
+            this.sharedTemplatesData.length === 0 ||
+            this.sharedTemplatesData === undefined
+          ) {
+            this.noSharedTemplatesFound = true;
           }
         })
         .catch((error) => {
@@ -142,36 +173,15 @@
         .finally(() => {
           this.loading = false;
         });
-      },
-      fetchSharedTemplates() {
-        this.loading = true;
-        ProcessMaker.apiClient
-          .get(
-            `templates/screen?is_public=1&screen_type=${this.screenType}`,
-          )
-          .then((response) => {
-            this.sharedTemplatesData = response.data.data;
-            if (this.sharedTemplatesData.length === 0 || this.sharedTemplatesData === undefined) {
-              this.noSharedTemplatesFound = true;
-            }
-          })
-          .catch((error) => {
-            console.error(error);
-          })
-          .finally(() => {
-            this.loading = false;
-          });
-      },
-      showSharedTemplates() {
-        this.myTemplatesSelected = false;
-        this.sharedTemplatesSelected = true;
-        this.fetchSharedTemplates();
-      },
     },
-    mounted() {
-      this.showMyTemplates();
+    showSharedTemplates() {
+      this.myTemplatesSelected = false;
+      this.sharedTemplatesSelected = true;
+      this.activeTemplateId = null;
+      this.fetchSharedTemplates();
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -179,53 +189,56 @@
   height: 100%;
 }
 
-  .panel-close-btn {
-    background-color: transparent;
-    border: none;
-    color: #596372;
-  }
-
-  .template-tabs {
-    padding: 4px;
-    background-color: #E9ECF1;
-    border-radius: 8px;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
+.panel-close-btn {
+  background-color: transparent;
+  border: none;
+  color: #596372;
+}
 
-  .default-template-btn {
-    width: 50%;
-    background-color: transparent;
-    border: none;
-    color: #596372;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    text-transform: none;
-  }
+.template-tabs {
+  padding: 4px;
+  background-color: #e9ecf1;
+  border-radius: 8px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 
-  .my-templates-selected {
-    background-color: #ffffff;
-    color: #20242A;
-    border-radius: 8px;
-    border: none;
-    font-weight: 600;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05), 0px 1px 0px -1px rgb(0, 0, 0, 0.05);
-  }
+.default-template-btn {
+  width: 50%;
+  background-color: transparent;
+  border: none;
+  color: #596372;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  text-transform: none;
+}
 
-  .shared-templates-selected {
-    background-color: #ffffff;
-    color: #20242A;
-    border-radius: 8px;
-    border: none;
-    font-weight: 600;
-    font-size: 12px;
-    padding-left: 0px;
-    padding-right: 0px;
-    box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05), 0px 1px 0px -1px rgb(0, 0, 0, 0.05);
-  }
+.my-templates-selected {
+  background-color: #ffffff;
+  color: #20242a;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
+    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+}
 
+.shared-templates-selected {
+  background-color: #ffffff;
+  color: #20242a;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  font-size: 12px;
+  padding-left: 0px;
+  padding-right: 0px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05),
+    0px 2px 4px -2px rgba(0, 0, 0, 0.05), 0px 1px 2px -1px rgb(0, 0, 0, 0.05),
+    0px 1px 0px -1px rgb(0, 0, 0, 0.05);
+}
 </style>