diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
new file mode 100644
index 0000000000..5ccc9c54e6
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Illuminate\Http\Request;
+use ProcessMaker\Http\Controllers\Controller;
+
+class ProcessesCatalogueController extends Controller
+{
+    public function index(Request $request)
+    {
+        return view('processes-catalogue.index');
+    }
+}
diff --git a/ProcessMaker/Http/Middleware/GenerateMenus.php b/ProcessMaker/Http/Middleware/GenerateMenus.php
index fae364d68b..81301893d8 100644
--- a/ProcessMaker/Http/Middleware/GenerateMenus.php
+++ b/ProcessMaker/Http/Middleware/GenerateMenus.php
@@ -33,6 +33,12 @@ public function handle(Request $request, Closure $next)
                     ['route' => 'requests.index', 'id' => 'requests']
                 )->active('requests/*');
             });
+            $menu->group(['prefix' => 'processes'], function ($request_items) {
+                $request_items->add(
+                    __('Processes'),
+                    ['route' => 'processes.catalogue.index', 'id' => 'processes-catalogue']
+                )->active('processes-catalogue/*');
+            });
             //@TODO change the index to the correct blade
             $menu->group(['prefix' => 'tasks'], function ($request_items) {
                 $request_items->add(
@@ -127,6 +133,9 @@ public function handle(Request $request, Closure $next)
                 'id' => 'homeid',
             ]);
         });
+        Menu::make('sidebar_processes_catalogue', function ($menu) {
+            $submenu = $menu->add(__('Processes'));
+        });
         Menu::make('sidebar_request', function ($menu) {
             $submenu = $menu->add(__('Request'));
             $submenu->add(__('My Requests'), [
diff --git a/resources/img/processes-catalogue-empty.svg b/resources/img/processes-catalogue-empty.svg
new file mode 100644
index 0000000000..530c123c48
--- /dev/null
+++ b/resources/img/processes-catalogue-empty.svg
@@ -0,0 +1,20 @@
+<svg width="146" height="152" viewBox="0 0 146 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M114.613 32.7066C114.613 39.3343 119.986 44.707 126.614 44.707C133.241 44.707 138.613 39.3343 138.613 32.7066C138.613 26.0798 133.241 20.707 126.614 20.707C119.986 20.707 114.613 26.0798 114.613 32.7066Z" fill="#7CD0B0"/>
+<path d="M127.52 26.1393L128.721 29.8374H132.61C133.216 29.8374 133.468 30.6124 132.978 30.9691L129.831 33.2544L131.033 36.9534C131.22 37.5289 130.561 38.0077 130.071 37.6528L126.925 35.3657L123.778 37.6528C123.289 38.0077 122.629 37.5289 122.816 36.9534L124.018 33.2544L120.872 30.9691C120.383 30.6124 120.634 29.8374 121.239 29.8374H125.128L126.33 26.1393C126.518 25.5629 127.332 25.5629 127.52 26.1393Z" fill="white"/>
+<path d="M81.9614 0C79.4721 7.468 73.8027 8.29732 73.8027 8.29732C73.8027 8.29732 79.4721 9.128 81.9614 16.5947C84.4507 9.128 90.1201 8.29732 90.1201 8.29732C90.1201 8.29732 84.4507 7.468 81.9614 0Z" fill="#DEEFFA"/>
+<path d="M48.9627 135C46.4721 142.468 40.8027 143.297 40.8027 143.297C40.8027 143.297 46.4721 144.127 48.9627 151.595C51.4507 144.127 57.1214 143.297 57.1214 143.297C57.1214 143.297 51.4507 142.468 48.9627 135Z" fill="#DEEFFA"/>
+<path d="M139.515 93C137.771 98.228 133.803 98.8093 133.803 98.8093C133.803 98.8093 137.771 99.3893 139.515 104.616C141.257 99.3893 145.225 98.8093 145.225 98.8093C145.225 98.8093 141.257 98.228 139.515 93Z" fill="#DEEFFA"/>
+<path d="M8.51343 30C6.77209 35.2267 2.80273 35.808 2.80273 35.808C2.80273 35.808 6.77209 36.388 8.51343 41.6147C10.2561 36.388 14.2254 35.808 14.2254 35.808C14.2254 35.808 10.2561 35.2267 8.51343 30Z" fill="#DEEFFA"/>
+<path d="M121.568 74.8772C121.568 104.083 97.8908 127.76 68.6855 127.76C39.4802 127.76 15.8027 104.083 15.8027 74.8772C15.8027 45.6719 39.4802 22 68.6855 22C97.8908 22 121.568 45.6719 121.568 74.8772Z" fill="#DEEFFA"/>
+<path d="M0.0127563 124.957C0.0127563 132.827 6.39276 139.207 14.2634 139.207C22.1349 139.207 28.5157 132.827 28.5157 124.957C28.5157 117.086 22.1349 110.707 14.2634 110.707C6.39276 110.707 0.0127563 117.086 0.0127563 124.957Z" fill="#77A9F2"/>
+<path d="M15.9307 129.535C13.7745 129.572 11.5914 129.601 9.60895 129.464C8.98188 129.421 8.439 128.423 9.20134 128.109C8.88064 127.944 8.5555 127.785 8.41575 127.425C8.28317 127.086 8.4417 126.623 8.79734 126.536C8.04933 126.72 7.75461 125.535 8.33778 125.151C8.02873 124.888 7.77165 124.541 7.70715 124.141C7.64175 123.74 7.80568 123.288 8.16222 123.095C8.39602 122.967 8.67284 122.963 8.93889 122.961C9.8356 122.954 10.7323 122.947 11.629 122.94C11.3862 121.538 11.3128 120.009 12.0258 118.777C12.2408 118.405 12.8178 117.961 13.2755 118.246C13.7046 118.514 13.5863 119.179 13.5639 119.599C13.4753 121.344 14.4679 123.099 16.0096 123.921C16.0096 123.921 15.9074 127.639 15.9307 129.535Z" fill="white"/>
+<path d="M16.7147 129.524H19.9737V123.916H16.7147V129.524Z" fill="white"/>
+<g clip-path="url(#clip0_2194_73220)">
+<path d="M45 75C45 68.6348 47.5286 62.5303 52.0294 58.0294C56.5303 53.5286 62.6348 51 69 51C75.3652 51 81.4697 53.5286 85.9706 58.0294C90.4714 62.5303 93 68.6348 93 75C93 81.3652 90.4714 87.4697 85.9706 91.9706C81.4697 96.4714 75.3652 99 69 99C62.6348 99 56.5303 96.4714 52.0294 91.9706C47.5286 87.4697 45 81.3652 45 75ZM62.6531 64.7906C61.9406 65.1844 61.5 65.9438 61.5 66.75V83.25C61.5 84.0656 61.9406 84.8156 62.6531 85.2094C63.3656 85.6031 64.2281 85.5938 64.9313 85.1625L78.4313 76.9125C79.0969 76.5 79.5094 75.7781 79.5094 74.9906C79.5094 74.2031 79.0969 73.4812 78.4313 73.0687L64.9313 64.8187C64.2375 64.3969 63.3656 64.3781 62.6531 64.7719V64.7906Z" fill="#1572C2"/>
+</g>
+<defs>
+<clipPath id="clip0_2194_73220">
+<rect width="48" height="48" fill="white" transform="translate(45 51)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
new file mode 100644
index 0000000000..b245fe3710
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="d-flex w-100">
+    <div class="w-25">
+      <h4> {{ $t('Processes Browser') }} </h4>
+    </div>
+    <div class="w-100">
+      <div v-if="!fields.length" class="d-flex justify-content-center py-5 w-100">
+        <div>
+          <div class="d-flex justify-content-center my-5">
+            <img
+              class="image d-flex"
+              src="/img/processes-catalogue-empty.svg"
+              alt="recent projects"
+            >
+          </div>
+          <h4 class="text-center">
+            {{ $t('Currently you dont have processes created') }}
+          </h4>
+          <p class="text-center">
+            {{ $t('We encourage you to create new processes using our templates') }}
+          </p>
+          <p class="text-center my-4">
+            <button
+              type="button"
+              class="btn btn-primary text-capitalize"
+            >
+              {{ $t("Show Me The Templates") }}
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      fields: [],
+    };
+  },
+  methods: {
+  },
+};
+</script>
+
diff --git a/resources/js/processes-catalogue/index.js b/resources/js/processes-catalogue/index.js
new file mode 100644
index 0000000000..acbe35c721
--- /dev/null
+++ b/resources/js/processes-catalogue/index.js
@@ -0,0 +1,11 @@
+import Vue from "vue";
+import ProcessesCatalogue from "./components/ProcessesCatalogue";
+
+new Vue({
+  el: "#processes-catalogue",
+  components: { ProcessesCatalogue },
+  data: {
+  },
+  methods: {
+  },
+});
diff --git a/resources/views/processes-catalogue/index.blade.php b/resources/views/processes-catalogue/index.blade.php
new file mode 100644
index 0000000000..178e2a51d9
--- /dev/null
+++ b/resources/views/processes-catalogue/index.blade.php
@@ -0,0 +1,19 @@
+@extends('layouts.layout')
+
+@section('title')
+    {{__('Processes Catalogue')}}
+@endsection
+
+@section('sidebar')
+    @include('layouts.sidebar', ['sidebar' => Menu::get('sidebar_processes_catalogue')])
+@endsection
+
+@section('content')
+  <div class="px-3 page-content mb-0" id="processes-catalogue">
+    <processes-catalogue></processes-catalogue>
+  </div>
+@endsection
+
+@section('js')
+    <script src="{{mix('js/processes-catalogue/index.js')}}"></script>
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 0d37a8ca77..9bdc56853a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,6 +27,7 @@
 use ProcessMaker\Http\Controllers\Process\ScriptController;
 use ProcessMaker\Http\Controllers\Process\SignalController;
 use ProcessMaker\Http\Controllers\ProcessController;
+use ProcessMaker\Http\Controllers\ProcessesCatalogueController;
 use ProcessMaker\Http\Controllers\ProfileController;
 use ProcessMaker\Http\Controllers\RequestController;
 use ProcessMaker\Http\Controllers\TaskController;
@@ -89,6 +90,9 @@
 
     Route::get('designer/scripts/categories', [ScriptController::class, 'index'])->name('script-categories.index')->middleware('can:view-script-categories');
     Route::get('designer', [DesignerController::class, 'index'])->name('designer.index');
+
+    Route::get('processes-catalogue', [ProcessesCatalogueController::class, 'index'])->name('processes.catalogue.index');
+
     Route::get('processes', [ProcessController::class, 'index'])->name('processes.index');
     Route::get('processes/{process}/edit', [ProcessController::class, 'edit'])->name('processes.edit')->middleware('can:edit-processes');
     Route::get('processes/{process}/export/{page?}', [ProcessController::class, 'export'])->name('processes.export')->middleware('can:export-processes');
diff --git a/webpack.mix.js b/webpack.mix.js
index 5d729dde12..43a83240de 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -116,6 +116,8 @@ mix.js("resources/js/app-layout.js", "public/js")
 
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
+  .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")
+
   .js("resources/js/tasks/index.js", "public/js/tasks/index.js")
   .js("resources/js/tasks/mobile.js", "public/js/tasks/mobile.js")
   .js("resources/js/tasks/show.js", "public/js/tasks/show.js")