diff --git a/src/App.vue b/src/App.vue
index a2ba161e2..eef62ff20 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,6 +52,7 @@
             <screen-toolbar
               @undo="$refs.builder.undo()"
               @redo="$refs.builder.redo()"
+              @open-templates="openTemplatesPanel"
               @open-calc="openComputedProperties"
               @open-customCss="openCustomCSS"
               @open-watchers="openWatchersPopup"
@@ -443,7 +444,9 @@ export default {
         minimap: {
           enabled: false
         }
-      }
+      },
+      showTemplatesPanel: false,
+      sharedTemplatesData: null,
     };
   },
   computed: {
@@ -696,6 +699,9 @@ export default {
     openWatchersPopup() {
       this.$refs.watchersPopup.show();
     },
+    openTemplatesPanel() {
+      this.$refs.builder.openTemplatesPanel();
+    },
     openComputedProperties() {
       this.$refs.computedProperties.show();
     },
diff --git a/src/components/CssIcon.vue b/src/components/CssIcon.vue
new file mode 100644
index 000000000..d792b31ac
--- /dev/null
+++ b/src/components/CssIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg width="58" height="58" viewBox="0 0 71 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="34.9456" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
+    <rect x="38.1" y="21.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="38.1" y="28.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="38.1" y="35.1" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="0.945605" y="16.7" width="31.6" height="59.6" rx="1.8" fill="#EAF2FF" stroke="#E9ECF1" stroke-width="0.4"/>
+    <rect x="3.84561" y="20.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="27.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="34.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="41.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="3.84561" y="48.6" width="26.8" height="4.8" rx="1.9" fill="#CCDFFF" stroke="#E9ECF1" stroke-width="0.2"/>
+    <rect x="1.2" y="0.2" width="65.6" height="13.1882" rx="1.8" fill="#81AFFF" stroke="#E9ECF1" stroke-width="0.4"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CssIcon",
+};
+</script>
\ No newline at end of file
diff --git a/src/components/ScreenTemplateCard.vue b/src/components/ScreenTemplateCard.vue
new file mode 100644
index 000000000..323173bf5
--- /dev/null
+++ b/src/components/ScreenTemplateCard.vue
@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <b-card
+      img-top
+      class="mb-2 screenbuilder-template-card"
+      @click="showDetails"
+    >
+      <div
+        v-if="thumbnail"
+        class="thumbnail-container thumbnail-image-container"
+      >
+        <img class="thumbnail-image" :src="thumbnail" :alt="`${template.name}`"/>
+      </div>
+      <div
+        v-else
+        class="thumbnail-container thumbnail-icon-container d-flex align-items-center justify-content-center"
+      >
+        <i class="p-4 fas fa-palette thumbnail-icon"></i>
+      </div>
+      <hr class="card-divider">
+      <b-card-body class="p-1">
+        <div class="template-details">
+          <span class="template-name d-block pt-1">{{ template.name }}</span>
+          <span class="template-description d-block">{{ template.description }}</span>
+        </div>
+        <b-collapse v-model="showApplyOptions">
+            <b-form-checkbox-group
+              class="apply-options-group p-2"
+              v-model="selected"
+              name="apply-options"
+            >
+            <div class="row row-cols-3 icons-row">
+              <div
+                v-for="option in applyOptions"
+                :key="option.value"
+                class="col apply-options-container d-flex align-items-baseline flex-column"
+              >
+                <div class="icon-container">
+                  <div v-if="option.value === 'CSS'">
+                    <css-icon />
+                  </div>
+                  <div v-else>
+                    <i :class="option.icon"></i>
+                  </div>
+                </div>
+                <b-form-checkbox
+                  class="option-checkbox"
+                  :value="option.value"
+                >
+                  {{ option.text }}
+                </b-form-checkbox>
+              </div>
+            </div>
+            </b-form-checkbox-group>
+            <hr class="bottom-card-divider">
+            <div class="apply-btn-container d-flex justify-content-end">
+              <button
+                type="button"
+                size="sm"
+                class="btn btn-outline-secondary card-btn"
+                @click="onCancel"
+              >
+                {{ $t("Cancel") }}
+              </button>
+              <button
+                :disabled="!selected.length"
+                type="button"
+                size="sm"
+                class="btn btn-primary ml-2 card-btn"
+                @click="applyTemplate"
+              >
+                {{ $t("Apply") }}
+              </button>
+            </div>
+        </b-collapse>
+      </b-card-body>
+    </b-card>
+    
+  </div>
+</template>
+
+<script>
+import CssIcon from './CssIcon.vue';
+
+export default {
+  components: {
+    CssIcon,
+  },
+  mixins: [],
+  props: ['template', 'screenId', 'currentScreenPage'],
+  data() {
+    return {
+      showApplyOptions: false,
+      selected: [],
+      applyOptions: [
+        { text: 'CSS', value: 'CSS' },
+        { text: 'Fields', value: 'Fields', icon: 'fp-fields-icon' },
+        { text: 'Layout', value: 'Layout', icon: 'fp-layout-icon' },
+      ],
+    };
+  },
+  computed: {
+    thumbnail() {
+      if (this.template?.template_media && this.template.template_media.length > 0) {
+        return this.template.template_media[0].url;
+      } else if (this.template?.template_media?.thumbnail?.url) {
+        return this.template?.template_media.thumbnail.url
+      }
+      return null;
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    showDetails() {
+      this.showApplyOptions = !this.showApplyOptions;
+    },
+    applyTemplate() {
+      ProcessMaker.apiClient
+        .post(`/template/screen/${this.template.id}/apply`, {
+          screenId: this.screenId,
+          templateOptions: this.selected,
+          currentScreenPage: this.currentScreenPage,
+        })
+        .then((response) => {
+          ProcessMaker.alert(this.$t("The template options have been applied."), "success");
+          window.location.reload();
+        })
+        .catch((error) => {
+          const errorMessage = error.response?.data?.message  || error.response?.data?.error || error.message;
+          ProcessMaker.alert(errorMessage, "danger");
+        });
+    },
+    onCancel() {
+      this.showApplyOptions = false;
+      this.selected = [];
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.fp-fields-icon, .fp-layout-icon {
+  color: #EAF2FF;
+}
+
+.screenbuilder-template-card {
+  width: 225px;
+  margin: 8px;
+  border: 1px solid #D7DDE5;
+  border-radius: 8px;
+  box-shadow: 0px 3px 6px -3px rgb(0, 0, 0, 0.05), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+}
+
+.card-divider {
+  width: 100%;
+  margin: 0px;
+  background-color: #D7DDE5;
+}
+
+.thumbnail-container:hover,
+.thumbnail-container.active {
+  border-color: #1572C2;
+  cursor: pointer;
+}
+
+.thumbnail-image {
+  width: 100%;
+  border-radius: 8px 8px 0px 0px;
+}
+
+.thumbnail-image-container {
+  border-radius: 8px;
+  padding: 0px !important;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.thumbnail-icon {
+  color: #CDDDEE;
+  font-size: 59px;
+}
+
+.template-details {
+  padding: 10px;
+}
+
+.template-name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #2F343B;
+}
+
+.template-description {
+  font-size: 12.5px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #4E5663;
+}
+
+.apply-options-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.icons-row {
+  margin-right: -5px !important;
+  margin-left: -5px !important;
+}
+
+.apply-options-container {
+    padding: 5px;
+}
+
+.apply-options-group i {
+  display: block;
+  font-size: 58px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 66px;
+  height: 76px;
+  border: 0.7px solid #D7DDE5;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.option-checkbox {
+  font-size: 12px;
+}
+
+.bottom-card-divider {
+  width: 90%;
+  background-color: #E9ECF1;
+  margin-top: 0px;
+}
+
+.apply-btn-container {
+  padding: 0px 10px 10px 0px;
+}
+
+.card-btn {
+  font-size: 14px;
+  text-transform: none;
+  border-radius: 8px;
+  padding: 5px 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/ScreenTemplates.vue b/src/components/ScreenTemplates.vue
new file mode 100644
index 000000000..606f932dd
--- /dev/null
+++ b/src/components/ScreenTemplates.vue
@@ -0,0 +1,205 @@
+<template>
+  <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"
+      >
+        <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"
+      >
+        {{ $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"
+      >
+        {{ $t("Shared Templates") }}
+      </b-button>
+    </div>
+    <div class="d-flex justify-content-center cards-container">
+      <div
+        v-if="myTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="my-templates-list"
+      >
+        <b-card-group>
+          <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"
+            :screen-id="screenId"
+            :currentScreenPage="currentScreenPage"
+          />
+        </b-card-group>
+      </div>
+      <div
+        v-if="sharedTemplatesSelected"
+        class="d-flex justify-content-center p-0"
+        data-cy="shared-templates-list"
+      >
+        <b-card-group>
+          <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"
+            :screen-id="screenId"
+            :currentScreenPage="currentScreenPage"
+          />
+        </b-card-group>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script>
+  import ScreenTemplateCard from './ScreenTemplateCard.vue';
+
+  export default {
+    components: {
+      ScreenTemplateCard,
+    },
+    props: ['screenId', 'currentScreenPage'],
+    mounted() {
+    },
+    data() {
+      return {
+        myTemplatesData: null,
+        sharedTemplatesData: null,
+        myTemplatesSelected: true,
+        sharedTemplatesSelected: false,
+        noMyTemplatesFound: false,
+        noSharedTemplatesFound: false,
+      };
+    },
+    methods: {
+      showMyTemplates() {
+        this.myTemplatesSelected = true;
+        this.sharedTemplatesSelected = false;
+        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.myTemplatesSelected = false;
+        this.sharedTemplatesSelected = true;
+        this.fetchSharedTemplates();
+      },
+    },
+    mounted() {
+      this.showMyTemplates();
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+.cards-container {
+  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;
+  }
+
+  .default-template-btn {
+    width: 50%;
+    background-color: transparent;
+    border: none;
+    color: #596372;
+    font-size: 12px;
+    padding-left: 0px;
+    padding-right: 0px;
+    text-transform: none;
+  }
+
+  .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>
diff --git a/src/components/ScreenToolbar.vue b/src/components/ScreenToolbar.vue
index a1815d844..daf8a1eb9 100644
--- a/src/components/ScreenToolbar.vue
+++ b/src/components/ScreenToolbar.vue
@@ -21,6 +21,15 @@
         <i class="fas fa-redo" />
         {{ $t("Redo") }}
       </b-button>
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        data-cy="screen-templates"
+        @click="$emit('open-templates')"
+      >
+        <i class="fas fa-palette" />
+        {{ $t("Templates") }}
+      </b-button>
       <b-button
         type="button"
         class="screen-toolbar-button"
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 19f127351..c16b2a141 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -290,70 +290,83 @@
     <!-- Inspector -->
     <b-col
       v-if="renderControls"
-      class="overflow-hidden h-100 p-0 inspector-column"
+      class="overflow-auto mh-100 p-0 d-flex flex-column position-relative inspector-column"
     >
       <b-card
         no-body
-        class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0"
+        class="p-0 h-100 border-top-0 border-bottom-0 border-right-0 rounded-0 inspector-column"
       >
-        <b-card-body class="p-0 h-100 overflow-auto">
-          <template v-for="accordion in accordions">
-            <b-button
-              v-if="
-                getInspectorFields(accordion) &&
-                getInspectorFields(accordion).length > 0
-              "
-              :key="`${accordionName(accordion)}-button`"
-              variant="outline"
-              class="text-left card-header d-flex align-items-center w-100 outline-0 text-capitalize shadow-none"
-              :data-cy="`accordion-${accordionName(accordion).replace(
-                ' ',
-                ''
-              )}`"
-              :accordion-name="`accordion-${accordionName(accordion).replace(
-                ' ',
-                ''
-              )}`"
-              :is-open="accordion.open ? '1' : '0'"
-              @click="toggleAccordion(accordion)"
-            >
-              <i class="fas fa-cog mr-2" />
-              {{ $t(accordionName(accordion)) }}
-              <i
-                class="fas fa-angle-down ml-auto"
-                :class="{ 'fas fa-angle-right': !accordion.open }"
-              />
-            </b-button>
-            <b-collapse
-              :id="accordionName(accordion)"
-              :key="`${accordionName(accordion)}-collapse`"
-              v-model="accordion.open"
-            >
-              <component
-                :is="item.type"
-                v-for="(item, index) in getInspectorFields(accordion)"
-                :key="index"
-                v-model="inspection.config[item.field]"
-                :data-cy="'inspector-' + (item.field || item.config.name)"
-                v-bind="item.config"
-                :field-name="item.field"
-                :field-accordion="`accordion-${accordionName(accordion).replace(
+        <div v-if="showTemplatesPanel">
+          <b-card-body class="p-2 h-100 overflow-auto screen-templates-column">
+            <screen-templates
+              ref="screenTemplates"
+              :shared-templates-data="sharedTemplatesData"
+              @close-templates-panel="closeTemplatesPanel"
+              :screen-id="screen.id"
+              :currentScreenPage="currentPage"
+            />
+          </b-card-body>
+        </div>
+        <div v-else>
+          <b-card-body class="p-0 h-100 overflow-auto">
+            <template v-for="accordion in accordions">
+              <b-button
+                v-if="
+                  getInspectorFields(accordion) &&
+                  getInspectorFields(accordion).length > 0
+                "
+                :key="`${accordionName(accordion)}-button`"
+                variant="outline"
+                class="text-left card-header d-flex align-items-center w-100 outline-0 text-capitalize shadow-none"
+                :data-cy="`accordion-${accordionName(accordion).replace(
                   ' ',
                   ''
                 )}`"
-                :builder="builder"
-                :form-config="config"
-                :screen-type="screenType"
-                :current-page="currentPage"
-                :selected-control="selected"
-                class="border-bottom m-0 p-4"
-                @focusout.native="updateState"
-                @update-state="updateState"
-                @setName="inspection.config.name = $event"
-              />
-            </b-collapse>
-          </template>
-        </b-card-body>
+                :accordion-name="`accordion-${accordionName(accordion).replace(
+                  ' ',
+                  ''
+                )}`"
+                :is-open="accordion.open ? '1' : '0'"
+                @click="toggleAccordion(accordion)"
+              >
+                <i class="fas fa-cog mr-2" />
+                {{ $t(accordionName(accordion)) }}
+                <i
+                  class="fas fa-angle-down ml-auto"
+                  :class="{ 'fas fa-angle-right': !accordion.open }"
+                />
+              </b-button>
+              <b-collapse
+                :id="accordionName(accordion)"
+                :key="`${accordionName(accordion)}-collapse`"
+                v-model="accordion.open"
+              >
+                <component
+                  :is="item.type"
+                  v-for="(item, index) in getInspectorFields(accordion)"
+                  :key="index"
+                  v-model="inspection.config[item.field]"
+                  :data-cy="'inspector-' + (item.field || item.config.name)"
+                  v-bind="item.config"
+                  :field-name="item.field"
+                  :field-accordion="`accordion-${accordionName(accordion).replace(
+                    ' ',
+                    ''
+                  )}`"
+                  :builder="builder"
+                  :form-config="config"
+                  :screen-type="screenType"
+                  :current-page="currentPage"
+                  :selected-control="selected"
+                  class="border-bottom m-0 p-4"
+                  @focusout.native="updateState"
+                  @update-state="updateState"
+                  @setName="inspection.config.name = $event"
+                />
+              </b-collapse>
+            </template>  
+          </b-card-body>
+        </div>
       </b-card>
     </b-col>
 
@@ -488,6 +501,7 @@ import MultipleUploadsCheckbox from "./utils/multiple-uploads-checkbox";
 import { formTypes } from "@/global-properties";
 import TabsBar from "./TabsBar.vue";
 import Sortable from './sortable/Sortable.vue';
+import ScreenTemplates from './ScreenTemplates.vue';
 
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
@@ -555,6 +569,7 @@ export default {
     ...renderer,
     PagesDropdown,
     Sortable,
+    ScreenTemplates,
   },
   mixins: [HasColorProperty, testing],
   props: {
@@ -580,7 +595,10 @@ export default {
     },
     processId: {
       default: 0
-    }
+    },
+    sharedTemplatesData: {
+      type: Array,
+    },
   },
   data() {
     const config = this.initialConfig || defaultConfig;
@@ -631,6 +649,7 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
+      showTemplatesPanel: false,
     };
   },
   computed: {
@@ -1105,6 +1124,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();
@@ -1265,6 +1290,7 @@ export default {
       });
     },
     inspect(element = {}) {
+      this.closeTemplatesPanel();
       this.inspection = element;
       this.selected = element;
       const defaultAccordion = this.accordions.find(
@@ -1398,7 +1424,6 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
-
   }
 };
 </script>
@@ -1532,6 +1557,12 @@ $side-bar-font-size: 0.875rem;
 .inspector-column {
   max-width: 265px;
   font-size: $side-bar-font-size;
+  border-left: 1px solid rgba(0, 0, 0, 0.125);
+  height: 100%;
+}
+
+.screen-templates-column {
+  overflow-y: auto;
 }
 
 .form-control-ghost {
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