diff --git a/resources/js/Pages/Dashboard/HR/JobOpenings/Candidates/Show.vue b/resources/js/Pages/Dashboard/HR/JobOpenings/Candidates/Show.vue
index e7a21dcf7..79f8b69d5 100644
--- a/resources/js/Pages/Dashboard/HR/JobOpenings/Candidates/Show.vue
+++ b/resources/js/Pages/Dashboard/HR/JobOpenings/Candidates/Show.vue
@@ -81,8 +81,10 @@
   <layout :notifications="notifications">
     <div class="ph2 ph5-ns">
       <breadcrumb
-        :root-url="'/' + $page.props.auth.company.id + '/dashboard/hr/job-openings/' + jobOpening.id"
-        :root="$t('app.breadcrumb_dashboard_job_opening_detail')"
+        :root-url="'/' + $page.props.auth.company.id + '/dashboard'"
+        :root="$t('app.breadcrumb_dashboard')"
+        :previous-url="'/' + $page.props.auth.company.id + '/dashboard/hr/job-openings/' + jobOpening.id"
+        :previous="$t('app.breadcrumb_dashboard_job_opening_detail')"
       >
         {{ $t('app.breadcrumb_dashboard_job_opening_candidate') }}
       </breadcrumb>
diff --git a/resources/js/Pages/Dashboard/HR/JobOpenings/Index.vue b/resources/js/Pages/Dashboard/HR/JobOpenings/Index.vue
index caa56ea45..03d14281e 100644
--- a/resources/js/Pages/Dashboard/HR/JobOpenings/Index.vue
+++ b/resources/js/Pages/Dashboard/HR/JobOpenings/Index.vue
@@ -68,9 +68,12 @@
   <layout :notifications="notifications">
     <div class="ph2 ph5-ns">
       <breadcrumb
-        :root-url="'/' + $page.props.auth.company.id + '/dashboard/hr'"
-        :root="$t('app.breadcrumb_hr')"
+        :root-url="'/' + $page.props.auth.company.id + '/dashboard'"
+        :root="$t('app.breadcrumb_dashboard')"
+        :previous-url="'/' + $page.props.auth.company.id + '/dashboard/hr'"
+        :previous="$t('app.breadcrumb_hr')"
         :has-more="false"
+        :custom-class="'mb4'"
       >
         {{ $t('app.breadcrumb_hr_job_openings_active') }}
       </breadcrumb>
diff --git a/resources/js/Pages/Dashboard/HR/JobOpenings/Show.vue b/resources/js/Pages/Dashboard/HR/JobOpenings/Show.vue
index afa3bc02f..835aebf78 100644
--- a/resources/js/Pages/Dashboard/HR/JobOpenings/Show.vue
+++ b/resources/js/Pages/Dashboard/HR/JobOpenings/Show.vue
@@ -56,8 +56,10 @@
   <layout :notifications="notifications">
     <div class="ph2 ph5-ns">
       <breadcrumb
-        :root-url="'/' + $page.props.auth.company.id + '/dashboard/hr/job-openings'"
-        :root="$t('app.breadcrumb_hr_job_openings_active')"
+        :root-url="'/' + $page.props.auth.company.id + '/dashboard'"
+        :root="$t('app.breadcrumb_dashboard')"
+        :previous-url="'/' + $page.props.auth.company.id + '/dashboard/hr/job-openings'"
+        :previous="$t('app.breadcrumb_hr_job_openings_active')"
       >
         {{ $t('app.breadcrumb_job_opening_detail') }}
       </breadcrumb>
diff --git a/resources/js/Shared/Layout/Breadcrumb.vue b/resources/js/Shared/Layout/Breadcrumb.vue
index 31106c6f4..3a9a411f4 100644
--- a/resources/js/Shared/Layout/Breadcrumb.vue
+++ b/resources/js/Shared/Layout/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['mt4-l mt1 mw6 br3 center breadcrumb relative z-0 f6 pb2', {'bg-white box': withBox}]">
+  <div :class="localClasses">
     <ul class="list ph0 tc-l tl">
       <li class="di">
         <inertia-link :href="cRootUrl">{{ cRoot }}</inertia-link>
@@ -44,6 +44,16 @@ export default {
       type: String,
       default: null,
     },
+    customClass: {
+      type: String,
+      default: null,
+    }
+  },
+
+  data() {
+    return {
+      localClasses: '',
+    };
   },
 
   computed: {
@@ -54,6 +64,18 @@ export default {
     cRoot: function () {
       return this.root ?? this.$t('app.breadcrumb_company');
     }
+  },
+
+  mounted() {
+    this.localClasses = 'mt4-l mt1 mw6 br3 center breadcrumb relative z-0 f6 pb2';
+
+    if (this.withBox) {
+      this.localClasses = this.localClasses + ' bg-white box';
+    }
+
+    if (this.customClass) {
+      this.localClasses = this.localClasses + ' ' + this.customClass;
+    }
   }
 };
 </script>