diff --git a/resources/js/tasks/components/DashboardViewer.vue b/resources/js/tasks/components/DashboardViewer.vue
new file mode 100644
index 0000000000..aa5fd80457
--- /dev/null
+++ b/resources/js/tasks/components/DashboardViewer.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>Dashboard Viewer</h2>
+        <p v-if="dashboardId">Dashboard ID: {{ dashboardId }}</p>
+        <p v-else>No selected dashboard</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DashboardViewer',
+    props: {
+        dashboardId: {
+            type: [String, null],
+            default: null
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/tasks/components/ParticipantHomeScreen.vue b/resources/js/tasks/components/ParticipantHomeScreen.vue
index 4df71961f7..1e46c75321 100644
--- a/resources/js/tasks/components/ParticipantHomeScreen.vue
+++ b/resources/js/tasks/components/ParticipantHomeScreen.vue
@@ -1,33 +1,29 @@
 <template>
-    <div
-      class="process-catalog-main"
-      id="tasks"
-      :class="{ 'menu-open': showMenu }"
-    >
-      <div class="menu">
-        <span
-          class="pl-3 menu-title"
-          style="
-            background-color: #e6f3ff;
-            padding: 5px 15px;
-            border-radius: 10px;
-          "
-        >
-          {{ $t("Inbox") }}
-        </span>
-        <p>New Menu Processes Here</p>
-      </div>
-  
-      <div class="slide-control">
-        <a href="#" @click.prevent="hideMenu">
-          <i
-            class="fa"
-            :class="{ 'fa-caret-right': !showMenu, 'fa-caret-left': showMenu }"
-          ></i>
-        </a>
-      </div>
-  
-      <div ref="processInfo" class="processes-info">
+  <div
+    class="process-catalog-main"
+    id="tasks"
+    :class="{ 'menu-open': showMenu }"
+  >
+    <div class="menu">
+      <button class="pl-3 menu-title button-class" @click="getAllTasks">
+        {{ $t("Inbox") }}
+      </button>
+      <ProcessesDashboardsMenu
+        @processDashboardSelected="processDashboardSelected"
+      />
+    </div>
+
+    <div class="slide-control">
+      <a href="#" @click.prevent="hideMenu">
+        <i
+          class="fa"
+          :class="{ 'fa-caret-right': !showMenu, 'fa-caret-left': showMenu }"
+        ></i>
+      </a>
+    </div>
+
+    <div ref="processInfo" class="home-screen-inbox">
+      <div v-if="selectedProcess === 'inbox'">
         <div class="px-3 page-content mb-0">
           <div class="row">
             <div class="col" align="right">
@@ -44,7 +40,7 @@
               </b-alert>
             </div>
           </div>
-  
+
           <div class="row">
             <div class="col-sm-12">
               <ul class="nav nav-tabs task-nav" id="requestTab" role="tablist">
@@ -71,7 +67,9 @@
                     href="#"
                     role="tab"
                     aria-controls="inbox"
-                    @click.prevent="!isDataLoading ? switchTab('priority') : null"
+                    @click.prevent="
+                      !isDataLoading ? switchTab('priority') : null
+                    "
                     aria-selected="true"
                     :class="{ active: tab === 'priority' }"
                   >
@@ -95,7 +93,7 @@
                   </a>
                 </li>
               </ul>
-  
+
               <div class="tab-content" id="task-tabContent">
                 <div
                   class="tab-pane fade show active"
@@ -139,7 +137,7 @@
                                 </div>
                               </div>
                             </template>
-  
+
                             <template v-slot:right-buttons>
                               <b-button
                                 id="idPopoverInboxRules"
@@ -208,327 +206,367 @@
           </div>
         </div>
       </div>
+      <router-view v-else :key="$route.fullPath"></router-view>
     </div>
-  </template>
-  
-  <script>
-  import ListMixin from "./ListMixin";
-  import TasksMixin from "../mixins/TasksMixin";
-  import TasksList from "./TasksList.vue";
-  
-  export default {
-    name: "ParticipantHomeScreen",
-    mixins: [TasksMixin, ListMixin],
-    components: {
-      TasksList,
+  </div>
+</template>
+
+<script>
+import ListMixin from "./ListMixin";
+import TasksMixin from "../mixins/TasksMixin";
+import TasksList from "./TasksList.vue";
+import ProcessesDashboardsMenu from "./ProcessesDashboardsMenu.vue";
+import router from "../router";
+
+export default {
+  name: "ParticipantHomeScreen",
+  mixins: [TasksMixin, ListMixin],
+  components: {
+    TasksList,
+    ProcessesDashboardsMenu,
+  },
+  router,
+  props: {
+    taskDraftsEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    userFilter: {
+      type: Object,
+      required: true,
     },
-    props: {
-      taskDraftsEnabled: {
-        type: Boolean,
-        required: true,
-      },
-      userFilter: {
-        type: Object,
-        required: true,
-      },
-      defaultColumns: {
-        type: Array,
-        required: true,
-      },
-      userConfiguration: {
-        type: Object,
-        default: () => ({}),
-      },
-      userPermissions: {
-        type: Object,
-        required: true,
-      },
-      savedsearchDefaultsEditRoute: {
-        type: String,
-        required: true,
-      },
+    defaultColumns: {
+      type: Array,
+      required: true,
     },
-    data() {
-      return {
-        showMenu: false,
-        urlConfiguration: "users/configuration",
-        localUserConfiguration: {},
-      };
+    userConfiguration: {
+      type: Object,
+      default: () => ({}),
     },
-    mounted() {
-      this.defineUserConfiguration();
+    userPermissions: {
+      type: Object,
+      required: true,
+    },
+    savedsearchDefaultsEditRoute: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showMenu: false,
+      urlConfiguration: "users/configuration",
+      localUserConfiguration: {},
+      selectedProcess: "inbox",
+    };
+  },
+  mounted() {
+    this.defineUserConfiguration();
+    this.callingTaskList();
+  },
+  methods: {
+    callingTaskList() {
       this.$nextTick(() => {
         if (this.$refs.taskList) {
           this.$refs.taskList.fetch();
         }
       });
     },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .has-search .form-control {
-    padding-left: 2.375rem;
+    getAllTasks() {
+      this.selectedProcess = "inbox";
+      this.allInbox = true;
+      this.callingTaskList();
+    },
+    processDashboardSelected(id, type) {
+      this.selectedProcess = type;
+      if (type === "process") {
+        this.$router.push({
+          name: "process-browser",
+          query: { process: id },
+        });
+      } else if (type === "dashboard") {
+        this.$router.push({
+          name: "dashboard",
+          query: { dashboard: id },
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.has-search .form-control {
+  padding-left: 2.375rem;
+}
+
+.has-search .form-control-feedback {
+  position: absolute;
+  z-index: 2;
+  display: block;
+  width: 2.375rem;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  text-align: center;
+  pointer-events: none;
+  color: #aaa;
+}
+
+.card-border {
+  border-radius: 4px !important;
+}
+
+.card-size-header {
+  width: 90px;
+}
+
+.option__image {
+  width: 27px;
+  height: 27px;
+  border-radius: 50%;
+}
+
+.initials {
+  display: inline-block;
+  text-align: center;
+  font-size: 12px;
+  max-width: 25px;
+  max-height: 25px;
+  min-width: 25px;
+  min-height: 25px;
+  border-radius: 50%;
+}
+.task-nav {
+  border-bottom: 0 !important;
+}
+.task-nav-link.active {
+  color: #1572c2 !important;
+  font-weight: 700;
+  font-size: 15px;
+}
+.task-nav-link {
+  color: #556271;
+  font-weight: 400;
+  font-size: 15px;
+  border-top-left-radius: 5px !important;
+  border-top-right-radius: 5px !important;
+}
+.task-list-body {
+  border-radius: 5px;
+}
+.task-inbox-rules {
+  width: max-content;
+}
+.task-inbox-rules-content {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+}
+.task-inbox-rules-content-text {
+  width: 310px;
+  padding-left: 10px;
+}
+.popover {
+  max-width: 450px;
+}
+
+@media (max-width: 639px) {
+  .breadcrum-main {
+    display: none;
   }
-  
-  .has-search .form-control-feedback {
-    position: absolute;
-    z-index: 2;
+}
+
+.process-catalog-main {
+  display: flex;
+
+  @media (max-width: 639px) {
     display: block;
-    width: 2.375rem;
-    height: 2.375rem;
-    line-height: 2.375rem;
-    text-align: center;
-    pointer-events: none;
-    color: #aaa;
-  }
-  
-  .card-border {
-    border-radius: 4px !important;
-  }
-  
-  .card-size-header {
-    width: 90px;
-  }
-  
-  .option__image {
-    width: 27px;
-    height: 27px;
-    border-radius: 50%;
-  }
-  
-  .initials {
-    display: inline-block;
-    text-align: center;
-    font-size: 12px;
-    max-width: 25px;
-    max-height: 25px;
-    min-width: 25px;
-    min-height: 25px;
-    border-radius: 50%;
   }
-  .task-nav {
-    border-bottom: 0 !important;
-  }
-  .task-nav-link.active {
-    color: #1572c2 !important;
-    font-weight: 700;
-    font-size: 15px;
-  }
-  .task-nav-link {
-    color: #556271;
-    font-weight: 400;
-    font-size: 15px;
-    border-top-left-radius: 5px !important;
-    border-top-right-radius: 5px !important;
-  }
-  .task-list-body {
-    border-radius: 5px;
-  }
-  .task-inbox-rules {
-    width: max-content;
+}
+
+.menu {
+  left: -100%;
+  height: calc(100vh - 145px);
+  overflow: hidden;
+  margin-top: 15px;
+  transition: all 0.3s;
+  flex: 0 0 0px;
+  background-color: #f7f9fb;
+
+  .menu-catalog {
+    background-color: #f7f9fb;
+    flex: 1;
+    width: 315px;
+    height: 95%;
+    overflow-y: scroll;
   }
-  .task-inbox-rules-content {
+
+  @media (max-width: 639px) {
+    position: absolute;
+    z-index: 4;
     display: flex;
-    justify-content: space-between;
-    padding: 15px;
+    margin-top: 0;
+    width: 85%;
+    transition: left 0.3s;
   }
-  .task-inbox-rules-content-text {
-    width: 310px;
-    padding-left: 10px;
-  }
-  .popover {
-    max-width: 450px;
+}
+
+.menu-mask {
+  display: none;
+  position: absolute;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 3;
+  transition: background-color 0.3s;
+
+  @media (max-width: 639px) {
+    display: block;
   }
-  
+}
+
+.menu-mask.menu-open {
   @media (max-width: 639px) {
-    .breadcrum-main {
-      display: none;
-    }
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: block;
   }
-  
-  .process-catalog-main {
-    display: flex;
-  
-    @media (max-width: 639px) {
-      display: block;
-    }
+}
+
+.menu-open .menu {
+  left: 0;
+  flex: 0 0 250px;
+  @media (max-width: 639px) {
+    left: 0%;
   }
-  
-  .menu {
-    left: -100%;
-    height: calc(100vh - 145px);
-    overflow: hidden;
-    margin-top: 15px;
-    transition: all 0.3s;
-    flex: 0 0 0px;
-    background-color: #f7f9fb;
-  
-    .menu-catalog {
-      background-color: #f7f9fb;
-      flex: 1;
-      width: 315px;
-      height: 95%;
-      overflow-y: scroll;
-    }
-  
-    @media (max-width: 639px) {
-      position: absolute;
-      z-index: 4;
-      display: flex;
-      margin-top: 0;
-      width: 85%;
-      transition: left 0.3s;
-    }
+}
+
+.mobile-slide-close {
+  display: none;
+  padding-left: 10px;
+  padding-top: 10px;
+  @media (max-width: 639px) {
+    display: block;
   }
-  
-  .menu-mask {
+}
+
+.slide-control {
+  border-left: 1px solid #dee0e1;
+  margin-left: 10px;
+  width: 29px;
+
+  @media (max-width: 639px) {
     display: none;
-    position: absolute;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0);
-    z-index: 3;
-    transition: background-color 0.3s;
-  
-    @media (max-width: 639px) {
-      display: block;
-    }
-  }
-  
-  .menu-mask.menu-open {
-    @media (max-width: 639px) {
-      left: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: block;
-    }
   }
-  
-  .menu-open .menu {
-    left: 0;
-    flex: 0 0 250px;
-    @media (max-width: 639px) {
-      left: 0%;
-    }
+
+  a {
+    position: relative;
+    left: -11px;
+    top: 40px;
+    z-index: 5;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 60px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    border: 1px solid #dee0e1;
+    color: #6a7888;
   }
-  
-  .mobile-slide-close {
+}
+
+.menu-open .slide-control {
+  border-left: 1px solid #dee0e1;
+
+  a {
+    left: -11px;
     display: none;
-    padding-left: 10px;
-    padding-top: 10px;
-    @media (max-width: 639px) {
-      display: block;
-    }
   }
-  
-  .slide-control {
-    border-left: 1px solid #dee0e1;
-    margin-left: 10px;
-    width: 29px;
-  
-    @media (max-width: 639px) {
-      display: none;
-    }
-  
-    a {
-      position: relative;
-      left: -11px;
-      top: 40px;
-      z-index: 5;
-  
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 60px;
-      background-color: #ffffff;
-      border-radius: 10px;
-      border: 1px solid #dee0e1;
-      color: #6a7888;
-    }
+}
+
+.slide-control:hover {
+  border-left: 1px solid rgba(72, 145, 255, 0.4);
+  box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+}
+.menu-open .slide-control:hover {
+  border-left: 1px solid rgba(72, 145, 255, 0.4);
+  box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+  a {
+    display: flex;
   }
-  
-  .menu-open .slide-control {
-    border-left: 1px solid #dee0e1;
-  
-    a {
-      left: -11px;
-      display: none;
+}
+.slide-control a:hover {
+  background-color: #eaeef2;
+}
+
+.mobile-menu-control {
+  display: none;
+  color: #6a7887;
+  font-size: 1.3em;
+  margin-top: 10px;
+  margin-left: 1em;
+  margin-right: 1em;
+  align-items: center;
+
+  .menu-button {
+    flex-grow: 1;
+    i {
+      margin-right: 3px;
     }
   }
-  
-  .slide-control:hover {
-    border-left: 1px solid rgba(72, 145, 255, 0.4);
-    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
+
+  .bookmark-button {
+    display: flex;
+    padding: 10px;
+    margin-right: 10px;
+    font-size: 1.1em;
   }
-  .menu-open .slide-control:hover {
-    border-left: 1px solid rgba(72, 145, 255, 0.4);
-    box-shadow: -1px 0 0 rgba(72, 145, 255, 0.5);
-    a {
-      display: flex;
-    }
+
+  .search-button {
+    display: flex;
+    padding: 10px;
+    font-size: 1.1em;
   }
-  .slide-control a:hover {
-    background-color: #eaeef2;
+
+  @media (max-width: 639px) {
+    display: flex;
   }
-  
-  .mobile-menu-control {
+}
+
+.menu-title {
+  color: #556271;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 46.08px;
+  letter-spacing: -0.44px;
+  display: block;
+  width: 92%;
+  margin-left: 15px;
+  text-align: left;
+
+  @media (max-width: 639px) {
     display: none;
-    color: #6a7887;
-    font-size: 1.3em;
-    margin-top: 10px;
-    margin-left: 1em;
-    margin-right: 1em;
-    align-items: center;
-  
-    .menu-button {
-      flex-grow: 1;
-      i {
-        margin-right: 3px;
-      }
-    }
-  
-    .bookmark-button {
-      display: flex;
-      padding: 10px;
-      margin-right: 10px;
-      font-size: 1.1em;
-    }
-  
-    .search-button {
-      display: flex;
-      padding: 10px;
-      font-size: 1.1em;
-    }
-  
-    @media (max-width: 639px) {
-      display: flex;
-    }
-  }
-  
-  .menu-title {
-    color: #556271;
-    font-size: 22px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 46.08px;
-    letter-spacing: -0.44px;
-    display: block;
-    width: 92%;
-    margin-left: 15px;
-  
-    @media (max-width: 639px) {
-      display: none;
-    }
   }
-  .processes-info {
-    width: 100%;
-    margin-right: 0px;
-    overflow-x: hidden;
-    @media (max-width: 639px) {
-      padding-left: 0;
-    }
+}
+.home-screen-inbox {
+  width: 100%;
+  margin-right: 0px;
+  overflow-x: hidden;
+  @media (max-width: 639px) {
+    padding-left: 0;
   }
-  </style>
+}
+
+.button-class {
+  background-color: #e6f3ff;
+  padding: 5px 15px;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+}
+</style>
   
\ No newline at end of file
diff --git a/resources/js/tasks/components/ProcessBrowser.vue b/resources/js/tasks/components/ProcessBrowser.vue
new file mode 100644
index 0000000000..b6ac621cd1
--- /dev/null
+++ b/resources/js/tasks/components/ProcessBrowser.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>Process Container</h2>
+        <p v-if="processId">Process ID: {{ processId }}</p>
+        <p v-else>No selected Process</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ProcessBrowser',
+    props: {
+        processId: {
+            type: [String, Number],
+            default: null
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/tasks/components/ProcessesDashboardsMenu.vue b/resources/js/tasks/components/ProcessesDashboardsMenu.vue
new file mode 100644
index 0000000000..ebab15efa2
--- /dev/null
+++ b/resources/js/tasks/components/ProcessesDashboardsMenu.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="inbox-process-menu">
+    <div class="menu-sections">
+      <div class="process-section">
+        <h4>Processes</h4>
+        <div class="buttons-list">
+          <button
+            v-for="process in processes"
+            :key="process.id"
+            class="menu-btn"
+            @click="openProcessDashboard(process.id, 'process')"
+          >
+            <i class="fas fa-check"></i> {{ process.name }}
+          </button>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="dashboard-section">
+        <h4>Dashboards</h4>
+        <div class="buttons-list">
+          <button
+            v-for="dashboard in dashboards"
+            :key="dashboard.id"
+            class="menu-btn"
+            @click="openProcessDashboard(dashboard.id, 'dashboard')"
+          >
+            <i class="fas fa-check"></i> {{ dashboard.name }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProcessesDashboardsMenu",
+  data() {
+    return {
+      selectedProcess: null,
+      // This section will be modified with dynamic data in future tickets
+      processes: [
+        { id: 1, name: "Process 1" },
+        { id: 2, name: "Process 2" },
+        { id: 3, name: "Process 3" },
+        { id: 4, name: "Process 4" },
+        { id: 5, name: "Process 5" },
+        { id: 6, name: "Process 6" },
+        { id: 7, name: "Process 7" },
+        { id: 8, name: "Process 8" },
+        { id: 9, name: "Process 9" },
+      ],
+      dashboards: [
+        { id: 1, name: "Dashboard 1" },
+        { id: 2, name: "Dashboard 2" },
+        { id: 3, name: "Dashboard 3" },
+      ],
+    };
+  },
+  methods: {
+    openProcessDashboard(id, type) {
+      const router = this.$router || this.$root.$router;
+      
+      if (type === 'process') {
+        router
+          .push({
+            name: "process-browser",
+            params: { processId: id.toString() }
+          })
+          .catch((err) => {
+            if (err.name !== "NavigationDuplicated") {
+              throw err;
+            }
+          });
+      } else {
+        router
+          .push({
+            name: "dashboard",
+            params: { dashboardId: id.toString() }
+          })
+          .catch((err) => {
+            if (err.name !== "NavigationDuplicated") {
+              throw err;
+            }
+          });
+      }
+
+      this.$emit("processDashboardSelected", { id, type });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.inbox-process-menu {
+  padding: 1rem;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.menu-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.buttons-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 250px;
+  overflow-y: auto;
+}
+
+.menu-btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+
+.divider {
+  border-top: 1px solid #eee;
+  margin: 1rem 0;
+}
+
+h4 {
+  margin-bottom: 0.5rem;
+}
+
+.menu-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.menu-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.selected-task {
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background-color: #f8f8f8;
+  border-radius: 4px;
+}
+</style>
diff --git a/resources/js/tasks/router.js b/resources/js/tasks/router.js
new file mode 100644
index 0000000000..c60625daed
--- /dev/null
+++ b/resources/js/tasks/router.js
@@ -0,0 +1,32 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import ProcessBrowser from "./components/ProcessBrowser.vue";
+import DashboardViewer from "./components/DashboardViewer.vue";
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  mode: "history",
+  base: "/tasks",
+  routes: [
+    {
+      path: "/process/:processId",
+      name: "process-browser",
+      component: ProcessBrowser,
+      props: route => ({
+        processId: parseInt(route.params.processId) || null,
+        process: null
+      })
+    },
+    {
+      path: "/dashboard/:dashboardId",
+      name: "dashboard",
+      component: DashboardViewer,
+      props: route => ({
+        dashboardId: route.params.dashboardId || null
+      })
+    }
+  ]
+});
+
+export default router; 
\ No newline at end of file
diff --git a/webpack.mix.js b/webpack.mix.js
index ef6c05502a..96d065d9c7 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -131,6 +131,7 @@ mix
   .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")
+  .js("resources/js/tasks/router.js", "public/js/tasks/router.js")
 
   .js("resources/js/notifications/index.js", "public/js/notifications/index.js")
   .js('resources/js/inbox-rules/index.js', 'public/js/inbox-rules')