diff --git a/package.json b/package.json
index 75d2abe..41625ad 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "argv": "0.0.2",
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.5",
-    "bootstrap": "4.6.0",
+    "bootstrap": "5.3.3",
     "copy-webpack-plugin": "5.0.1",
     "css-loader": "2.1.1",
     "file-loader": "3.0.1",
@@ -28,8 +28,8 @@
     "gulp-gzip": "1.4.2",
     "gulp-s3-upload": "1.7.3",
     "mini-css-extract-plugin": "0.5.0",
+    "@popperjs/core": "2.11.8",
     "open": "6.0.0",
-    "popper.js": "1.16.1",
     "require-dir": "1.2.0",
     "gulp4-run-sequence": "1.0.1",
     "shelljs": "^0.8.4",
diff --git a/src/common/header/header.html b/src/common/header/header.html
index 1760cb6..8884caa 100644
--- a/src/common/header/header.html
+++ b/src/common/header/header.html
@@ -4,7 +4,7 @@
         <div class="ej-sb-platform-name">Bold Reports for JavaScript</div>
         <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
-                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             </button>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
         </div>
diff --git a/src/common/main-content/main-content.css b/src/common/main-content/main-content.css
index 24dcc75..de5519a 100644
--- a/src/common/main-content/main-content.css
+++ b/src/common/main-content/main-content.css
@@ -44,6 +44,7 @@
   align-items: center;
   color:#2b3a5c;
   border-bottom: 2px solid transparent;
+  text-decoration: none;
 }
 
 .ej-main-body-content .ej-nav-header .ej-nav-item a:hover {
diff --git a/src/common/main-content/main-content.html b/src/common/main-content/main-content.html
index 36a7647..2de51ff 100644
--- a/src/common/main-content/main-content.html
+++ b/src/common/main-content/main-content.html
@@ -5,17 +5,17 @@ <h1 class="ej-title"></h1>
     <div id="parentTabContainer">
       <ul class="nav ej-nav-header" id="parentTab" role="tablist">
         <li class="ej-nav-item">
-          <a href="#demo" data-toggle="tab" role="tab" aria-selected="true">
+          <a href="#demo" data-ds-toggle="tab" role="tab" aria-selected="true">
             <Span class="ej-sb-icons ej-demo-icon"></Span><Span>DEMO</Span>
           </a>
         </li>
         <li class="ej-nav-item source-tab">
-          <a href="#source" data-toggle="tab" role="tab" aria-selected="false">
+          <a href="#source" data-ds-toggle="tab" role="tab" aria-selected="false">
             <Span class="ej-sb-icons ej-source-icon"></Span><Span>SOURCE</Span>
           </a>
         </li>
         <!-- <li class="ej-nav-item desc-tab">
-          <a href="#ej-description" data-toggle="tab" role="tab" aria-selected="false">
+          <a href="#ej-description" data-ds-toggle="tab" role="tab" aria-selected="false">
             <Span class="ej-sb-icons ej-description-icon"></Span><Span>Description</Span>
           </a>
         </li> -->
@@ -39,10 +39,10 @@ <h1 class="ej-title"></h1>
             </div>
             <ul class="nav ej-nav-header" id="childtTab" role="tablist">
               <li class="ej-nav-item">
-                <a href="#js" class="active js-header" data-toggle="tab" role="tab" aria-selected="true"></a>
+                <a href="#js" class="active js-header" data-ds-toggle="tab" role="tab" aria-selected="true"></a>
               </li>
               <li class="ej-nav-item">
-                <a class="html-header" href="#html" data-toggle="tab" role="tab" aria-selected="false"></a>
+                <a class="html-header" href="#html" data-ds-toggle="tab" role="tab" aria-selected="false"></a>
               </li>
             </ul>
           </div>
@@ -99,4 +99,4 @@ <h1 class="ej-title"></h1>
     </div>
     <div class="ej-lp-footer-copyright">Copyright © 2001-2024 Syncfusion Inc.</div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js
index 2ddef9c..6bc9f8e 100644
--- a/src/common/main-content/main-content.js
+++ b/src/common/main-content/main-content.js
@@ -14,7 +14,7 @@ export class MainContent {
         this.element.getElementsByClassName('ej-nav-new')[0].addEventListener('click', this.onTabBtnClick.bind(this));
         this.element.getElementsByClassName('ej-nav-prev')[0].addEventListener('click', this.onTabPrev.bind(this));
         this.element.getElementsByClassName('ej-nav-next')[0].addEventListener('click', this.onTabNext.bind(this));
-        $('a[data-toggle="tab"][href="#demo"]').on('shown.bs.tab', this.resizeReportViewer);
+        $('a[data-bs-toggle="tab"][href="#demo"]').on('shown.bs.tab', this.resizeReportViewer);
     }
 
     async fetchFile(path) {