diff --git a/ProcessMaker/Http/Controllers/Process/ScreenController.php b/ProcessMaker/Http/Controllers/Process/ScreenController.php
index 109a4f523c..1ae64dc53b 100644
--- a/ProcessMaker/Http/Controllers/Process/ScreenController.php
+++ b/ProcessMaker/Http/Controllers/Process/ScreenController.php
@@ -56,7 +56,21 @@ public function index(Request $request)
             'countCategories' => ScreenCategory::where(['status' => 'ACTIVE', 'is_system' => false])->count(),
         ];
 
-        return view('processes.screens.index', compact('listConfig', 'catConfig'));
+        $myScreenTemplates = (object) [
+
+        ];
+
+        $publicScreenTemplates = (object) [
+
+        ];
+
+        return view('processes.screens.index',
+            compact(
+                'listConfig',
+                'catConfig',
+                'myScreenTemplates',
+                'publicScreenTemplates',
+            ));
     }
 
     /**
diff --git a/resources/js/components/shared/EllipsisMenu.vue b/resources/js/components/shared/EllipsisMenu.vue
index d100f218ff..ccbc57998b 100644
--- a/resources/js/components/shared/EllipsisMenu.vue
+++ b/resources/js/components/shared/EllipsisMenu.vue
@@ -25,6 +25,10 @@
     <template v-else-if="lauchpad" #button-content>
       <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
     </template>
+    <template v-else-if="screenTemplate" #button-content>
+      <i class="fas fa-eye ellipsis-menu-icon pr-2" />
+      <i class="fas fa-ellipsis-h ellipsis-menu-icon" />
+    </template>
     <template v-else #button-content>
       <i class="fas fa-ellipsis-h ellipsis-menu-icon" />
     </template>
@@ -110,7 +114,22 @@ export default {
   components: { PmqlInput },
   filters: { },
   mixins: [],
-  props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "lauchpad", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant", "redirectTo", "redirectId"],
+  props: [
+    "actions",
+    "permission",
+    "data",
+    "isDocumenterInstalled",
+    "divider",
+    "lauchpad",
+    "screenTemplate",
+    "customButton",
+    "showProgress",
+    "isPackageInstalled",
+    "searchBar",
+    "variant",
+    "redirectTo",
+    "redirectId",
+  ],
   data() {
     return {
       active: false,
diff --git a/resources/js/components/shared/ellipsisMenuActions.js b/resources/js/components/shared/ellipsisMenuActions.js
index 554373c513..05dd07a158 100644
--- a/resources/js/components/shared/ellipsisMenuActions.js
+++ b/resources/js/components/shared/ellipsisMenuActions.js
@@ -253,6 +253,31 @@ export default {
           permission: ["delete-decision_tables", "view-additional-asset-actions"]
         },
       ],
+      myTemplateActions: [
+        //TODO: Update My Template Ellipsis Menu Actions
+        {
+          value: "edit-template",
+          content: "Edit Template",
+          link: true,
+          href: "/designer/screen-builder/{{id}}/edit",
+          permission: ["edit-screens", "view-additional-asset-actions"],
+          icon: "fas fa-pen-square",
+        },
+        {
+          value: "make-public",
+          content: "Make Public",
+          link: true,
+          href: "/designer/screens/{{id}}/edit",
+          permission: ["edit-screens", "view-additional-asset-actions"],
+          icon: "fas fa-file-export",
+        },
+        {
+          value: "delete-template",
+          content: "Delete Template",
+          permission: ["delete-screens", "view-additional-asset-actions"],
+          icon: "fas fa-trash-alt",
+        },
+      ],
     };
   },
 };
diff --git a/resources/js/processes/screen-templates/components/MyTemplatesListing.vue b/resources/js/processes/screen-templates/components/MyTemplatesListing.vue
new file mode 100644
index 0000000000..91c4dfe4af
--- /dev/null
+++ b/resources/js/processes/screen-templates/components/MyTemplatesListing.vue
@@ -0,0 +1,230 @@
+<template>
+    <div class="data-table">
+      <data-loading
+              :for="/screens/"
+              v-show="shouldShowLoader"
+              :empty="$t('No Data Available')"
+              :empty-desc="$t('')"
+              empty-icon="noData"
+      />
+      <div v-show="!shouldShowLoader" class="card card-body my-templates-table-card" data-cy="my-templates-table">
+        <filter-table
+          :headers="fields"
+          :data="data"
+          table-name="my-screen-templates"
+          style="height: calc(100vh - 355px);"
+        >
+        <!-- Slot Table Header filter Button -->
+        <template
+          v-for="(column, index) in fields"
+          #[`filter-${column.field}`]
+        >
+          <div
+            v-if="column.sortable"
+            :key="index"
+            @click="handleEllipsisClick(column)"
+          >
+            <i
+              :class="['fas', {
+                'fa-sort': column.direction === 'none',
+                'fa-sort-up': column.direction === 'asc',
+                'fa-sort-down': column.direction === 'desc',
+              }]"
+            />
+          </div>
+        </template>
+        <!-- Slot Table Body -->
+        <template
+          v-for="(row, rowIndex) in data.data"
+          #[`row-${rowIndex}`]
+        >
+          <td
+            v-for="(header, colIndex) in fields"
+            :key="`${rowIndex}_${colIndex}`"
+            :data-cy="`my-templates-table-td-${rowIndex}-${colIndex}`"
+          >
+            <div
+              v-if="containsHTML(row[header.field])"
+              :data-cy="`my-templates-table-html-${rowIndex}-${colIndex}`"
+              v-html="sanitize(row[header.field])"
+            />
+            <template v-else>
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`my-templates-table-component-${rowIndex}-${colIndex}`"
+              >
+                <component
+                  :is="row[header.field].component"
+                  v-bind="row[header.field].props"
+                />
+              </template>
+              <template
+                v-else
+                :data-cy="`my-templates-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'name'">
+                  <b-tooltip
+                    v-if="header.truncate"
+                    :target="`element-${row.id}`"
+                    custom-class="pm-table-tooltip"
+                  >
+                    {{ row[header.field] }}
+                  </b-tooltip>
+                </template>
+                <template v-if="header.field === 'actions'">
+                  <ellipsis-menu
+                    class="my-template-table"
+                    :actions="myTemplateActions"
+                    :permission="permission"
+                    :data="row"
+                    :divider="true"
+                    :screen-template="true"
+                    @navigate="onMyTemplateNavigate"
+                  />
+                </template>
+                <template v-if="header.field !== 'name'">
+                  <div
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </div>
+                </template>
+              </template>
+            </template>
+          </td>
+        </template>
+      </filter-table>
+  
+      <pagination-table
+        :meta="data.meta"
+        data-cy="my-templates-pagination"
+        @page-change="changePage"
+      />
+      <pagination
+        ref="pagination"
+        :single="$t('Template')"
+        :plural="$t('Templates')"
+        :per-page-select-enabled="true"
+        @changePerPage="changePerPage"
+        @vuetable-pagination:change-page="onPageChange"
+      />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import datatableMixin from "../../../components/common/mixins/datatable";
+  import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
+  import ellipsisMenuMixin from "../../../components/shared/ellipsisMenuActions";
+  import screenNavigationMixin from "../../../components/shared/screenNavigation";
+  import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
+  import FilterTableBodyMixin from "../../../components/shared/FilterTableBodyMixin";
+  import paginationTable from "../../../components/shared/PaginationTable.vue";
+
+  import { createUniqIdsMixin } from "vue-uniq-ids";
+  const uniqIdsMixin = createUniqIdsMixin();
+  
+  export default {
+    components: { EllipsisMenu, paginationTable },
+    mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, screenNavigationMixin, FilterTableBodyMixin],
+    props: ["filter", "id", "permission"],
+    data() {
+      return {
+        orderBy: "title",
+        screenId: null,
+        assetName: " ",
+        assignedProjects: [],
+        sortOrder: [
+          {
+            field: "title",
+            sortField: "title",
+            direction: "asc"
+          }
+        ],
+  
+        fields: [
+          {
+            label: this.$t("Name"),
+            field: "title",
+            width: 200,
+            sortable: true,
+            truncate: true,
+            direction: "none",
+          },
+          {
+            label: this.$t("Description"),
+            field: "description",
+            width: 200,
+            sortable: true,
+            direction: "none",
+            sortField: "description",
+          },
+          {
+            label: this.$t("Type of Screen"),
+            field: "screen_type",
+            width: 160,
+            sortable: true,
+            direction: "none",
+            sortField: "screen_type",
+          },
+          {
+            label: this.$t("Modified"),
+            field: "updated_at",
+            format: "datetime",
+            width: 160,
+            sortable: true,
+            direction: "none",
+          },
+          {
+            name: "__slot:actions",
+            field: "actions",
+            width: 60,
+          }
+        ]
+      };
+    },
+  
+    methods: {
+      onMyTemplateNavigate() {
+        console.log('ellipsis menu action');
+      },
+      fetch() {
+        //TODO: UPDATE FUNCTIONALITY FOR FETCHING 'MY TEMPLATES' FROM SCREEN TEMPLATES
+          this.loading = true;
+          //change method sort by slot name
+          this.orderBy = this.orderBy === "__slot:title" ? "title" : this.orderBy;
+          // Load from our api client
+          ProcessMaker.apiClient
+            .get(
+              "screens" +
+                "?page=" +
+                this.page +
+                "&per_page=" +
+                this.perPage +
+                "&filter=" +
+                this.filter +
+                "&order_by=" +
+                this.orderBy +
+                "&order_direction=" +
+                this.orderDirection +
+                "&include=categories,category" +
+                "&exclude=config"
+        )
+            .then(response => {
+              this.data = this.transform(response.data);
+              this.loading = false;
+            });
+      },
+    },
+  };
+  </script>
+  
+<style lang="scss" scoped>
+:deep(th#_description) {
+  width: 250px;
+}
+
+.my-templates-table-card {
+  padding: 0;
+}
+</style>
diff --git a/resources/js/processes/screen-templates/index.js b/resources/js/processes/screen-templates/index.js
new file mode 100644
index 0000000000..2a0e9fcc79
--- /dev/null
+++ b/resources/js/processes/screen-templates/index.js
@@ -0,0 +1,26 @@
+import Vue from "vue";
+import MyTemplatesListing from "../screen-templates/components/MyTemplatesListing";
+
+new Vue({
+  el: "#myTemplatesIndex",
+  components: {
+    MyTemplatesListing,
+  },
+  data: {
+    filter: "",
+    pmql: "",
+    urlPmql: "",
+  },
+  methods: {
+    onNLQConversion(query) {
+        this.onChange(query);
+        this.reload();
+      },
+      onChange(query) {
+        this.pmql = query;
+      },
+      reload() {
+        this.$refs.myTemplatesListing.fetch();
+      },
+  },
+});
diff --git a/resources/views/components/categorized_resource.blade.php b/resources/views/components/categorized_resource.blade.php
index d5b1aa75f6..54dcb355be 100644
--- a/resources/views/components/categorized_resource.blade.php
+++ b/resources/views/components/categorized_resource.blade.php
@@ -46,6 +46,27 @@
                     </a>
                 </li>
             @endisset
+        @elseif (isset($myScreenTemplates))
+            @if ($catConfig->permissions['view'])
+                <li class="nav-item">
+                    <a class="nav-item nav-link" id="nav-categories-tab" data-toggle="tab" href="#nav-categories"
+                    role="tab" onclick="loadCategory()" aria-controls="nav-categories" aria-selected="true">
+                        {{ $tabs[1] ?? __('Categories') }}
+                    </a>
+                </li>
+            @endif
+            <li class="nav-item">
+                <a class="{{$secondTab}}" id="nav-myTemplates-tab" data-toggle="tab" href="#nav-myTemplates"
+                role="tab" onclick="loadMyTemplates()" aria-controls="nav-myTemplates" aria-selected="true">
+                    {{ $tabs[2] ?? __('My Templates') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-item nav-link" id="nav-publicTemplates-tab" data-toggle="tab" href="#nav-publicTemplates"
+                role="tab" onclick="loadPublicTemplates()" aria-controls="nav-publicTemplates" aria-selected="true">
+                    {{ $tabs[3] ?? __('Public Templates') }}
+                </a>
+            </li>
         @else
             @if ($catConfig->permissions['view'] && $catConfig->routes->itemsIndexWeb !== "data-sources.index")
             <li class="nav-item">
@@ -105,10 +126,15 @@
                     </div>
                 </div>
                 @endcan
-                <div class="{{$secondContent}}" id="nav-categories" role="tabpanel" aria-labelledby="nav-categories-tab">
-                <div class="card card-body p-3 border-top-0">
-                    {{ $categoryList }}
-                </div>
+                <div
+                    class="{{$secondContent}}"
+                    id="nav-categories"
+                    role="tabpanel"
+                    aria-labelledby="nav-categories-tab"
+                >
+                    <div class="card card-body p-3 border-top-0">
+                        {{ $categoryList }}
+                    </div>
                 </div>
                 @isset($tabs[3])
                     <div class="tab-pane fade" id="nav-archived" role="tabpanel" aria-labelledby="nav-archived-tab">
@@ -117,8 +143,43 @@
                         </div>
                     </div>
                 @endisset
+            @elseif(isset($myScreenTemplates))
+                <div
+                    class="{{$secondContent}}"
+                    id="nav-categories"
+                    role="tabpanel"
+                    aria-labelledby="nav-categories-tab"
+                >
+                    <div class="card card-body p-3 border-top-0">
+                        {{ $categoryList }}
+                    </div>
+                </div>
+                @isset($tabs[3])
+                <div class="tab-pane fade" id="nav-myTemplates" role="tabpanel" aria-labelledby="nav-myTemplates-tab">
+                    <div class="card card-body p-3 border-top-0">
+                        {{ $myTemplatesList }}
+                    </div>
+                </div>
+                @endisset
+                @isset($tabs[4])
+                <div
+                    class="tab-pane fade"
+                    id="nav-publicTemplates"
+                    role="tabpanel"
+                    aria-labelledby="nav-publicTemplates-tab"
+                >
+                    <div class="card card-body p-3 border-top-0">
+                        {{ $publicTemplatesList }}
+                    </div>
+                </div>
+                @endisset
             @else
-                <div class="{{$secondContent}}" id="nav-categories" role="tabpanel" aria-labelledby="nav-categories-tab">
+                <div
+                    class="{{$secondContent}}"
+                    id="nav-categories"
+                    role="tabpanel"
+                    aria-labelledby="nav-categories-tab"
+                >
                     <div class="card card-body p-3 border-top-0">
                         {{ $categoryList }}
                     </div>
@@ -149,6 +210,12 @@
       loadTemplates = function () {
         ProcessMaker.EventBus.$emit("api-data-process-templates");
       }
+      loadMyTemplates = function () {
+        console.log('my templates loaded');
+      }
+      loadPublicTemplates = function () {
+        console.log('public templates loaded');
+      }
       if ({{$listConfig->countCategories}} === 0) loadCategory();
     </script>
 @append
diff --git a/resources/views/processes/screens/index.blade.php b/resources/views/processes/screens/index.blade.php
index d16ca704b7..adf1ed082f 100644
--- a/resources/views/processes/screens/index.blade.php
+++ b/resources/views/processes/screens/index.blade.php
@@ -20,9 +20,13 @@
             'tabs' => [
             __('Screens'),
             __('Categories'),
+            __('My Templates'),
+            __('Public Templates'),
         ],
         'listConfig' => $listConfig,
-        'catConfig' => $catConfig
+        'catConfig' => $catConfig,
+        'myScreenTemplates' => $myScreenTemplates,
+        'publicScreenTemplates' => $publicScreenTemplates,
     ])
         @slot('itemList')
             @component('processes.screens.list', ['config' => $listConfig])
@@ -33,6 +37,16 @@
             @component('categories.list', ['config' => $catConfig])
             @endcomponent
         @endslot
+
+        @slot('myTemplatesList')
+            @component('processes.screens.myTemplates', ['config' => $myScreenTemplates])
+            @endcomponent
+        @endslot
+
+        @slot('publicTemplatesList')
+            @component('processes.screens.publicTemplates', ['config' => $publicScreenTemplates])
+            @endcomponent
+        @endslot
     @endcomponent
 @endsection
 
diff --git a/resources/views/processes/screens/myTemplates.blade.php b/resources/views/processes/screens/myTemplates.blade.php
new file mode 100644
index 0000000000..debaf4797e
--- /dev/null
+++ b/resources/views/processes/screens/myTemplates.blade.php
@@ -0,0 +1,30 @@
+    <div class="page-content mb-0" id="myTemplatesIndex">
+        <div id="search-bar" class="search mb-3" vcloak>
+            <div class="d-flex flex-column flex-md-row">
+                <div class="flex-grow-1">
+                    <pmql-input
+                        ref="pmql_input"
+                        search-type="processes"
+                        :value="pmql"
+                        :url-pmql="urlPmql"
+                        :filters-value="pmql"
+                        :ai-enabled="false"
+                        :show-filters="false"
+                        :aria-label="$t('Search')"
+                        @submit="onNLQConversion">
+                    </pmql-input>
+                </div>
+            </div>
+        </div>
+
+        <my-templates-listing ref="myTemplatesListing"
+                        :filter="filter"
+                        :permission="{{ \Auth::user()->hasPermissionsFor('screens', 'projects') }}"
+                        v-on:reload="reload">
+        </my-templates-listing>
+    </div>
+
+@section('js')
+    <script src="{{mix('js/processes/screen-templates/index.js')}}"></script>
+
+@append
diff --git a/resources/views/processes/screens/publicTemplates.blade.php b/resources/views/processes/screens/publicTemplates.blade.php
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/webpack.mix.js b/webpack.mix.js
index 604b4b5570..dde3d42f7a 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -106,6 +106,7 @@ mix
   .js("resources/js/processes/screens/index.js", "public/js/processes/screens")
   .js("resources/js/processes/screens/edit.js", "public/js/processes/screens")
   .js("resources/js/processes/screens/preview.js", "public/js/processes/screens")
+  .js("resources/js/processes/screen-templates/index.js", "public/js/processes/screen-templates")
   .js("resources/js/processes/signals/index.js", "public/js/processes/signals")
   .js("resources/js/processes/signals/edit.js", "public/js/processes/signals")
   .js("resources/js/processes/screen-builder/main.js", "public/js/processes/screen-builder")