diff --git a/scss/lexa.scss b/scss/lexa.scss
index b3c6ee3..b15a494 100644
--- a/scss/lexa.scss
+++ b/scss/lexa.scss
@@ -2582,7 +2582,7 @@ text-align: start;
     text-decoration: none !important;
 }
 
-@include media-breakpoint-down(sm) { 
+@include media-breakpoint-down(sm) {
     .wbfaqinput {
         width: 100%;
     }
@@ -2613,9 +2613,24 @@ box-shadow: 0px 12px 30px 0px #0000000D;
 
 .wbfaqaccordion
 .accordion-item {
-    border-bottom: 1px solid     #D9DBE9
+    border-bottom: 1px solid#D9DBE9
 }
-
 .wbfaqaccordion .accordion-item:last-child {
     border-bottom: none;
+}
+.current-faq.wb-breadcrumb .d-flex{
+    border: 1px solid #D9E1E7;
+    border-radius: 10px;
+}
+.wbfaqbreadcrumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #809FB8;
+}
+.btn.wbfaqbreadcrumb {
+    padding: 10px 20px;
+}
+.wbfaqbreadcrumb.wb_faq-active {
+    color:#0063A6;
 }
\ No newline at end of file
diff --git a/templates/local_wb_faq/faq.mustache b/templates/local_wb_faq/faq.mustache
index 606ab79..906c012 100644
--- a/templates/local_wb_faq/faq.mustache
+++ b/templates/local_wb_faq/faq.mustache
@@ -34,21 +34,32 @@
   }
 }}
 
-<div class="current-faq wb-breadcrumb">
   {{#canedit}}
+  <div class="mb-2">
   <span>
     <a class="local_wb_faq_edit_button local_wb_faq_edit_category btn btn-secondary" data-faqroot="{{root}}" data-uid="{{uid}}">{{#str}} addcategory, local_wb_faq {{/str}} <i class="fa fa-plus"></i></a>
     <a class="local_wb_faq_edit_button local_wb_faq_edit_question btn btn-secondary" data-faqroot="{{root}}" data-uid="{{uid}}">{{#str}} addquestion, local_wb_faq {{/str}} <i class="fa fa-plus"></i></a>
   </span>
+  </div>
   {{/canedit}}
-
+{{#breadcrumbs.1}}
+<div class="current-faq wb-breadcrumb">
   <!-- Existing code for displaying breadcrumbs -->
-  <div class="d-flex mt-2">
+  <div class="d-flex">
     {{#breadcrumbs}}
-      <div class="btn btn-primary mb-2 px-4 mr-2 wbfaqbreadcrumb" data-catvalue="{{datacat}}" data-action="goto" data-targetid='{{id}}'>{{name}}</div>
+      <div class="btn wbfaqbreadcrumb{{#active}} wb_faq-active{{/active}}" data-catvalue="{{datacat}}" data-action="goto" data-targetid='{{id}}'>{{name}}</div>
+       {{^active}}
+       <div class="wbfaqbreadcrumb" data-catvalue="{{datacat}}"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="icon_stroke">
+        <path id="Vector" d="M5 1L17 11L5 21" stroke="#809FB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+      </svg>
+    {{/active}}
+    </div>
     {{/breadcrumbs}}
   </div>
 </div>
+{{/breadcrumbs.1}}
 
 <ul class="draggable-cat list-unstyled">
   {{#categories}}
@@ -62,8 +73,6 @@
 {{/headertitle}}
   {{/entries.0}}
 
-
-
 <ul class="accordion draggable list-unstyled wbfaqaccordion" id="wb-faq-accordion">
   {{#entries}}
     {{>local_wb_faq/entry}}