diff --git a/assets/sidebar/portrait.png b/assets/sidebar/portrait.png
index cb3ae12..ac5b9e9 100644
Binary files a/assets/sidebar/portrait.png and b/assets/sidebar/portrait.png differ
diff --git a/build/copy.js b/build/copy.js
index 1a172c1..11c6fda 100644
--- a/build/copy.js
+++ b/build/copy.js
@@ -3,13 +3,12 @@ const { cp, mkdir } = require('shelljs');
 const fs = require('fs');
 
 const scripts = {
-    common: ['common/ej2-base.min.js', 'common/ej2-data.min.js', 'common/ej2-pdf-export.min.js', 'common/ej2-svg-base.min.js'],
-    control: ['data-visualization/ej2-circulargauge.min.js', 'data-visualization/ej2-lineargauge.min.js', 'data-visualization/ej2-maps.min.js'],
     barcode: ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'],
     signature: ['signature.reportitem.css', 'signature.dialog.css', 'signature.reportitem.js', 'signature.dialog.js'],
     shape: ['shape.reportitem.css', 'shape.reportitem.js'],
     pdf: ['document.reportitem.css', 'pdfdocument.reportitem.js'],
-    html: ['htmldocument.reportitem.js']
+    html: ['htmldocument.reportitem.js'],
+    pdfSignature: ['pdf.signature.reportitem.css', 'pdf.signature.reportitem.js']
 };
 
 const srcDir = 'node_modules/@boldreports/javascript-reporting-controls/Scripts/';
@@ -23,17 +22,17 @@ const extensionsExportTemp = {
     'signatureDialog': 'export { SignatureDialog }',
     'shape': 'export { EJShape }',
     'pdfDocument': 'export { EJPdfDocument }',
-    'htmlDocument': 'export { EJHtmlDocument }'
+    'htmlDocument': 'export { EJHtmlDocument }',
+    'pdfSignature': 'export { EJPDFSignature  }'
 }
 
 gulp.task('copy', (done) => {
-    copyFiles(scripts.common, srcDir, destDir + 'common');
-    copyFiles(scripts.control, srcDir, destDir + 'data-visualization');
     copyFiles(scripts.barcode, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.signature, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.shape, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.html, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.pdf, extensionsItemSrcDir, extensionsItemDir);
+    copyFiles(scripts.pdfSignature, extensionsItemSrcDir, extensionsItemDir);
     done();
 });
 
@@ -52,7 +51,8 @@ gulp.task('update-extensions-export', (done) => {
         'signatureDialog': ['signature.dialog.js', 'signatureDialog'],
         'shape': ['shape.reportitem.js', 'shape'],
         'pdfDocument': ['pdfdocument.reportitem.js', 'pdfDocument'],
-        'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument']
+        'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument'],
+        'pdfSignature': ['pdf.signature.reportitem.js', 'pdfSignature']
     };
     const updateFile = (key, [filename, exportKey]) => {
         const filePath = `${extensionsItemDir}${filename}`;
diff --git a/build/templates/common/index.html b/build/templates/common/index.html
index 451702c..3490edc 100644
--- a/build/templates/common/index.html
+++ b/build/templates/common/index.html
@@ -21,6 +21,13 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        (function addTrailingSlash() {
+            var path = window.location.pathname;
+            if (path.indexOf('/preview') !== -1 && !path.endsWith('/')) {
+                var newUrl = window.location.origin + path + '/';
+                window.location.replace(newUrl);
+            }
+        })();
     </script>
     <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.ico">
     <link href="../../../common/index.css" rel="stylesheet" />
diff --git a/build/templates/common/index.js b/build/templates/common/index.js
index 1eeccf7..04662c7 100644
--- a/build/templates/common/index.js
+++ b/build/templates/common/index.js
@@ -49,6 +49,10 @@ import { SignatureDialog } from './../extensions/report-item-extensions/signatur
 import './../extensions/report-item-extensions/shape.reportitem.css';
 import { EJShape } from './../extensions/report-item-extensions/shape.reportitem';
 
+//PDF signature
+import './../extensions/report-item-extensions/pdf.signature.reportitem.css';
+import { EJPDFSignature } from './../extensions/report-item-extensions/pdf.signature.reportitem';
+
 //globals
 import './../../../src/controls/globals';
 
@@ -70,6 +74,9 @@ let htmlDocument = 'EJHtmlDocument';
 window[pdfDocument] = EJPdfDocument;
 window[htmlDocument] = EJHtmlDocument;
 
+let pdfSignature = 'EJPDFSignature';
+window[pdfSignature] = EJPDFSignature;
+
 //code-mirror
 import 'codemirror/lib/codemirror';
 import 'codemirror/addon/hint/show-hint';
diff --git a/build/templates/report-designer/index.html b/build/templates/report-designer/index.html
index 645c012..4da39ac 100644
--- a/build/templates/report-designer/index.html
+++ b/build/templates/report-designer/index.html
@@ -21,6 +21,13 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        (function addTrailingSlash() {
+            var path = window.location.pathname;
+            if (path === '/report-designer') {
+                var newUrl = window.location.origin + path + '/' + window.location.search;
+                window.location.replace(newUrl);
+            }
+        })();
     </script>
     <link href="../favicon.ico" type="image/x-icon" rel="shortcut icon" />
     <link href="../common/index.css" rel="stylesheet" />
diff --git a/build/templates/report-designer/index.js b/build/templates/report-designer/index.js
index eb6f51b..2d32c76 100644
--- a/build/templates/report-designer/index.js
+++ b/build/templates/report-designer/index.js
@@ -45,11 +45,22 @@ $(function () {
             className: 'EJSignature',
             imageClass: 'customitem-signature',
             displayName: 'Electronic',
-            category: 'Signature',
+            category: 'Signatures',
             toolTip:{
                 requirements: 'Add a report item to the designer area.',
                 description: 'This report item is used to add a graphic signature.',
-                title: 'Signature'
+                title: 'Electronic Signature'
+            }
+        }, {
+            name: 'PDFSignature',
+            className: 'EJPDFSignature',
+            imageClass: 'customitem-pdfsignature',
+            displayName: 'PDF',
+            category: 'Signatures',
+            toolTip:{
+                requirements: 'Add a report item to the designer area.',
+                description: 'This report item is used to add a digital PDF signature.',
+                title: 'PDF Signature'
             }
         }, {
             name: 'Shape',
diff --git a/build/templates/report-designer/rdlc/index.html b/build/templates/report-designer/rdlc/index.html
index b4bddd5..b110525 100644
--- a/build/templates/report-designer/rdlc/index.html
+++ b/build/templates/report-designer/rdlc/index.html
@@ -21,6 +21,13 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        (function addTrailingSlash() {
+            var path = window.location.pathname;
+            if (path === '/report-designer/rdlc') {
+                var newUrl = window.location.origin + path + '/' + window.location.search;
+                window.location.replace(newUrl);
+            }
+        })();
     </script>
     <link href="../../favicon.ico" type="image/x-icon" rel="shortcut icon" />
     <link href="../../common/index.css" rel="stylesheet" />
diff --git a/build/templates/report-designer/rdlc/index.js b/build/templates/report-designer/rdlc/index.js
index 4131dfd..5d610fa 100644
--- a/build/templates/report-designer/rdlc/index.js
+++ b/build/templates/report-designer/rdlc/index.js
@@ -45,11 +45,22 @@ $(function () {
             className: 'EJSignature',
             imageClass: 'customitem-signature',
             displayName: 'Electronic',
-            category: 'Signature',
+            category: 'Signatures',
             toolTip:{
                 requirements: 'Add a report item to the designer area.',
                 description: 'This report item is used to add a graphic signature.',
-                title: 'Signature'
+                title: 'Electronic Signature'
+            }
+        }, {
+            name: 'PDFSignature',
+            className: 'EJPDFSignature',
+            imageClass: 'customitem-pdfsignature',
+            displayName: 'PDF',
+            category: 'Signatures',
+            toolTip:{
+                requirements: 'Add a report item to the designer area.',
+                description: 'This report item is used to add a digital PDF signature.',
+                title: 'PDF Signature'
             }
         }, {
             name: 'Shape',
diff --git a/index.html b/index.html
index f829791..8d84bdf 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,15 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        function addTrailingSlash() {
+            var path = window.location.href;
+            if (path && path !== '/' && !path.endsWith('/')) {
+                var newUrl = path + '/';
+                window.location.replace(newUrl);
+            }
+        }
+        addTrailingSlash();
+        window.addEventListener('hashchange', addTrailingSlash, false);
     </script>
     <link rel="stylesheet" href="app.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
diff --git a/package.json b/package.json
index a7b14d1..f966d78 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "javascript-samples",
-  "version": "11.1.10",
+  "version": "12.1.12",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@babel/polyfill": "7.2.5",
-    "@boldreports/javascript-reporting-controls": "11.1.10",
-    "@boldreports/javascript-reporting-extensions": "11.1.10",
+    "@boldreports/javascript-reporting-controls": "12.1.12",
+    "@boldreports/javascript-reporting-extensions": "12.1.12",
     "codemirror": "5.58.2",
     "hasher": "1.2.0",
     "jquery": "3.6.0",
diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js
index c842c19..325ac45 100644
--- a/src/common/main-content/main-content.js
+++ b/src/common/main-content/main-content.js
@@ -52,7 +52,7 @@ export class MainContent {
         const curRouterIndex = curRouterData.curIndex;
         const sampleData = curRouterData.isFirst ? samples[data.samples.length - 1] : samples[curRouterIndex - 1];
         const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
-        hasher.setHash(reportPath);
+        hasher.setHash(reportPath + "/");
     }
 
     onTabNext() {
@@ -62,7 +62,7 @@ export class MainContent {
         const curRouterIndex = curRouterData.curIndex;
         const sampleData = curRouterData.isLast ? samples[0] : samples[curRouterIndex + 1];
         const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
-        hasher.setHash(reportPath);
+        hasher.setHash(reportPath + "/");
     }
 
     getCurRouterData() {
diff --git a/src/common/sidebar/sidebar.css b/src/common/sidebar/sidebar.css
index 5d6b0a9..ea4c63b 100644
--- a/src/common/sidebar/sidebar.css
+++ b/src/common/sidebar/sidebar.css
@@ -52,7 +52,7 @@
   width: 90px;
   margin: 8px;
   background-image: url('./../../../assets/sidebar/portrait.png');
-  background-size: 100% 2100%;
+  background-size: 100% 2200%;
 }
 
 .ej-sidebar-content .ej-sb-toc .ej-sb-toc-card .ej-sb-toc-title {
diff --git a/src/common/sidebar/sidebar.js b/src/common/sidebar/sidebar.js
index 455c13d..602db1c 100644
--- a/src/common/sidebar/sidebar.js
+++ b/src/common/sidebar/sidebar.js
@@ -1,5 +1,6 @@
 import samplesData from '../../controls/samples.json';
 import * as hasher from 'hasher';
+import { normalizeHash } from '../router';
 
 export class Sidebar {
     constructor(element) {
@@ -54,7 +55,7 @@ export class Sidebar {
             let index = ele.getAttribute('data-uid');
             let sampleData = samplesData.samples[index];
             const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
-            hasher.setHash(reportPath);
+            hasher.setHash(reportPath + "/");
         }
     }
 
diff --git a/src/controls/hr-payroll/hr-payroll.html b/src/controls/hr-payroll/hr-payroll.html
new file mode 100644
index 0000000..9734340
--- /dev/null
+++ b/src/controls/hr-payroll/hr-payroll.html
@@ -0,0 +1,18 @@
+<div id="container"></div>
+<div id="description">
+    <p>
+        The HR Payroll report provides a comprehensive overview of employee compensation, departmental performance, and leave management. It helps HR teams analyze payroll trends and make informed decisions.
+    </p>
+    <ul>
+        <li>Displays <code>gross salary</code>, <code>net salary</code>, and <code>deductions</code> across departments.</li>
+        <li>Visualizes <code>Loss of Pay (LOP)</code>breakdown by leave type: sick, good, and compensation leave.</li>
+        <li>Includes <code>employee demographics</code> such as gender distribution and contract types.</li>
+        <li>Summarizes leave availability for sick and casual leave by department.</li>
+        <li>Highlights <code>average performance</code> and employee count per department.</li>
+    </ul>
+    <p>
+        For more information on how dynamic image report items enhance customization in multi-company HR reports, refer to this 
+            <a href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/image-manager/"
+            target="_blank" rel="noreferrer">documentation</a> section.
+    </p>
+</div>
\ No newline at end of file
diff --git a/src/controls/hr-payroll/hr-payroll.js b/src/controls/hr-payroll/hr-payroll.js
new file mode 100644
index 0000000..aedfa9c
--- /dev/null
+++ b/src/controls/hr-payroll/hr-payroll.js
@@ -0,0 +1,14 @@
+/**
+ * This demo showcases a comprehensive HR Payroll report, presenting key metrics such as gross and net salaries, deductions, employee demographics, departmental performance, and leave summaries. It enables HR teams to analyze payroll trends and make informed decisions using dynamic visualizations in the ASP.NET Core Bold Report Viewer.
+ */
+ $(function () {
+    $("#container").boldReportViewer({
+        // Specifies the report Web API service URL. It is used to process the reports.
+        reportServiceUrl: window.Globals.SERVICE_URL,
+        // Specifies the path of the RDL report file
+        reportPath: 'hr-payroll.rdl',
+        toolbarSettings: window.Globals.TOOLBAR_OPTIONS,
+        toolBarItemClick: window.Globals.EDIT_REPORT,
+        exportItemClick: window.Globals.EXPORT_ITEM_CLICK
+    });
+});
\ No newline at end of file
diff --git a/src/controls/multi-language-report/multi-language-report.js b/src/controls/multi-language-report/multi-language-report.js
index a377d66..f161fb9 100644
--- a/src/controls/multi-language-report/multi-language-report.js
+++ b/src/controls/multi-language-report/multi-language-report.js
@@ -30,13 +30,30 @@ $(function () {
     ejs.popups.hideSpinner(document.getElementById("spinner-container"));
     $("#r-w-property-title, .r-w-genearte").css("display", "block");
     $(".r-w-property").css("display", "inline-flex");
+    const tooltipLocales = {
+        "en-US": { header: "Edit Report", content: "Edit this report in designer" },
+        "fr-CA": { header: "Modifier le rapport", content: "Modifier ce rapport dans le concepteur" },
+        "de-DE": { header: "Bericht bearbeiten", content: "Bearbeiten Sie diesen Bericht im Designer" },
+        "hi-IN": { header: "रिपोर्ट संपादित करें", content: "इस रिपोर्ट को डिज़ाइनर में संपादित करें" },
+        "es-ES": { header: "Editar informe", content: "Editar este informe en el diseñador" },
+        "nl-NL": { header: "Rapport bewerken", content: "Bewerk dit rapport in de ontwerper" },
+        "ko-KR": { header: "보고서 편집", content: "디자이너에서 이 보고서를 편집합니다" },
+        "he-IL": { header: "ערוך דוח", content: "ערוך דוח זה במעצב" },
+        "ru-RU": { header: "Редактировать отчет", content: "Редактировать этот отчет в дизайнере" }
+    };
     $("#update").on("click", function () {
         const reportViewer = $("#container").boldReportViewer("instance");
         const selectedLanguageId = languages.value.toString();
+        const tooltipData = tooltipLocales[selectedLanguageId];
         const selectedLanguage = languagesList.find(lang => lang.languageId === selectedLanguageId);
         const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }];
         reportViewer.model.parameters = parameters;
         reportViewer.reload();
         reportViewer.setModel({'locale': selectedLanguageId});
+        const item = reportViewer.model.toolbarSettings.customGroups[0].items[0];
+        item.tooltip = {
+            header: tooltipData.header,
+            content: tooltipData.content
+        };
     });
 });
\ No newline at end of file
diff --git a/src/controls/samples.json b/src/controls/samples.json
index 15c5ae9..a579e08 100644
--- a/src/controls/samples.json
+++ b/src/controls/samples.json
@@ -71,7 +71,6 @@
       "sampleName": "Sales Report",
       "basePath": "report-viewer",
       "directoryName": "sales-report",
-      "status": "Updated",
       "imageDetails": {
         "isLandscape": false,
         "index": 9
@@ -465,7 +464,6 @@
       "sampleName": "Dynamic Logos",
       "basePath": "report-viewer",
       "directoryName": "dynamic-logos",
-      "status": "New",
       "imageDetails": {
         "isLandscape": false,
         "index": 19
@@ -479,7 +477,6 @@
       "sampleName": "Multi Language Report",
       "basePath": "report-viewer",
       "directoryName": "multi-language-report",
-      "status": "New",
       "imageDetails": {
         "isLandscape": false,
         "index": 5
@@ -487,6 +484,20 @@
       "metaData": {
         "description": "This demo showcases a Multi Language Report that allows users to view report in various languages using the JavaScript Bold Report Viewer."
       }
+    },
+    {
+      "routerPath": "hr-payroll",
+      "sampleName": "HR Payroll",
+      "basePath": "report-viewer",
+      "directoryName": "hr-payroll",
+      "status": "New",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 20
+      },
+      "metaData": {
+        "description": "This demo showcases an HR Payroll report showing salaries, deductions, demographics, and performance insights in JavaScript Bold Report Viewer."
+      }
     }
   ]
 }