diff --git a/assets/sidebar/portrait.png b/assets/sidebar/portrait.png
index beadbc7..7976bd4 100644
Binary files a/assets/sidebar/portrait.png and b/assets/sidebar/portrait.png differ
diff --git a/build/build.js b/build/build.js
index ae8a126..aae0d6d 100644
--- a/build/build.js
+++ b/build/build.js
@@ -3,7 +3,7 @@ var shelljs = require('shelljs');
 const runSequence = require('gulp4-run-sequence');
 
 gulp.task('build',(done)=>{
-    runSequence('update-barcode' ,'clean', 'new-tab', done);
+    runSequence('update-extensions-export', 'clean', 'new-tab', done);
 });
 
 gulp.task('clean', (done)=>{
diff --git a/build/copy.js b/build/copy.js
index 99efb49..aacf017 100644
--- a/build/copy.js
+++ b/build/copy.js
@@ -5,22 +5,26 @@ 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']
+    barcode: ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'],
+    signature: ['signature.reportitem.css', 'signature.dialog.css', 'signature.reportitem.js', 'signature.dialog.js']
 };
 
 const srcDir = 'node_modules/@boldreports/javascript-reporting-controls/Scripts/';
 const destDir = 'scripts/';
-const barCodeSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
-const barcodeDir = './build/templates/extensions/report-item-extensions/';
-const barcodeTeml = {
+const extensionsItemSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
+const extensionsItemDir = './build/templates/extensions/report-item-extensions/';
+const extensionsExportTemp = {
     '1D': 'export { EJBarcode };',
-    '2D': 'export { EJQRBarcode };'
+    '2D': 'export { EJQRBarcode };',
+    'signature': 'export { EJSignature }',
+    'signatureDialog': 'export { SignatureDialog }'
 }
 
 gulp.task('copy', (done) => {
     copyFiles(scripts.common, srcDir, destDir + 'common');
     copyFiles(scripts.control, srcDir, destDir + 'data-visualization');
-    copyFiles(scripts.barcode, barCodeSrcDir, barcodeDir);
+    copyFiles(scripts.barcode, extensionsItemSrcDir, extensionsItemDir);
+    copyFiles(scripts.signature, extensionsItemSrcDir, extensionsItemDir);
     done();
 });
 
@@ -31,18 +35,25 @@ function copyFiles(fileArray, src, dest) {
     });
 };
 
-gulp.task('update-barcode', (done) => {
-    if (fs.existsSync(`${barcodeDir}barcode.reportitem.js`) && fs.existsSync(`${barcodeDir}qrbarcode.reportitem.js`)) {
-        var barcode = fs.readFileSync(`${barcodeDir}barcode.reportitem.js`);
-        var qrbarcode = fs.readFileSync(`${barcodeDir}qrbarcode.reportitem.js`);
-        if (!barcode.includes(barcodeTeml['1D']))
-            fs.writeFileSync(`${barcodeDir}barcode.reportitem.js`, `${barcode} \n ${barcodeTeml['1D']}`);
-        if (!qrbarcode.includes(barcodeTeml['2D']))
-            fs.writeFileSync(`${barcodeDir}qrbarcode.reportitem.js`, `${qrbarcode} \n ${barcodeTeml['2D']}`);
-        done();
-    }
-    else {
-        console.log(`!!!... The Barcode files not found in ${barcodeDir} ...!!!`);
-        process.exit(1);
-    }
+gulp.task('update-extensions-export', (done) => {
+    const files = {
+        'barcode': ['barcode.reportitem.js', '1D'],
+        'qrbarcode': ['qrbarcode.reportitem.js', '2D'],
+        'signature': ['signature.reportitem.js', 'signature'],
+        'signatureDialog': ['signature.dialog.js', 'signatureDialog']
+    };
+    const updateFile = (key, [filename, exportKey]) => {
+        const filePath = `${extensionsItemDir}${filename}`;
+        if (fs.existsSync(filePath)) {
+            const content = fs.readFileSync(filePath, 'utf8');
+            if (!content.includes(extensionsExportTemp[exportKey])) {
+                fs.writeFileSync(filePath, `${content}\n${extensionsExportTemp[exportKey]}`);
+            }
+        } else {
+            console.log(`!!!... The ${key} file not found in ${extensionsItemDir} ...!!!`);
+            process.exit(1);
+        }
+    };
+    Object.entries(files).forEach(([key, value]) => updateFile(key, value));
+    done();
 });
\ No newline at end of file
diff --git a/build/new-tab.js b/build/new-tab.js
index 4579a27..4434b0d 100644
--- a/build/new-tab.js
+++ b/build/new-tab.js
@@ -36,7 +36,7 @@ gulp.task('new-tab-generation', (done)=>{
     let bodyContent = fs.readFileSync(`${reportBaseDir + reportRouterPath}/${fileName}.html`, 'utf8');
     let content = htmlTemplate
       .replace('{{body}}', bodyContent)
-      .replace('{{title}}', title)
+      .replace(/{{title}}/g, title)
       .replace('{{sampleName}}', sampleName);
     shelljs.mkdir('-p', `${reportBaseDir + reportRouterPath}/preview`);
     fs.writeFileSync(`${reportBaseDir + reportRouterPath}/preview/index.html`, content, {
diff --git a/build/serve.js b/build/serve.js
index a1e1c1d..3b6e56d 100644
--- a/build/serve.js
+++ b/build/serve.js
@@ -2,21 +2,27 @@ const gulp = require("gulp");
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const config = require('./../webpack.config.js');
-const open = require('open');
 var argv = require('yargs').argv;
 const port = argv.port || 9000;
 
 
 gulp.task('serve-run',(done)=>{
-  const server = new WebpackDevServer(webpack(config));
-  server.listen(port, 'localhost', function (err) {
-    if (err) {
-      console.log(err);
-    }
+  const serverOptions = {
+    port: port,
+    static: {
+      directory: './',
+    },
+    hot: true,
+    open: true,
+    historyApiFallback: true
+  };
+
+  const compiler = webpack(config);
+  const server = new WebpackDevServer(serverOptions, compiler);
+  server.startCallback(() => {
     console.log('Reports JS sample browser is listening on localhost:', port);
-    open('http://localhost:' + port + '/');
+    done();
   });
-  done();
 });
 
 gulp.task('serve', gulp.series('build','serve-run'));
\ No newline at end of file
diff --git a/build/templates/common/webpack.config.js b/build/templates/common/webpack.config.js
index 5aeecba..d5e1381 100644
--- a/build/templates/common/webpack.config.js
+++ b/build/templates/common/webpack.config.js
@@ -29,9 +29,7 @@ module.exports = {
             },
             {
                 test: /\.(png|svg|jpg|gif|cur|ttf|eot|woff)$/,
-                use: [{
-                    loader: 'file-loader'
-                }]
+                type: 'asset/resource'
             }
         ]
     },
diff --git a/package.json b/package.json
index a7f07e1..357c448 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "javascript-samples",
-  "version": "6.3.16",
+  "version": "7.1.9",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -10,43 +10,41 @@
     "postinstall": "gulp copy"
   },
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.3.4",
-    "@babel/node": "7.2.2",
-    "@babel/preset-env": "7.3.4",
-    "@babel/register": "7.0.0",
+    "@babel/cli": "7.26.4",
+    "@babel/core": "7.26.0",
+    "@babel/node": "7.26.0",
+    "@babel/preset-env": "7.26.0",
+    "@babel/register": "7.25.9",
     "argv": "0.0.2",
     "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.5",
+    "babel-loader": "9.2.1",
     "bootstrap": "5.3.3",
-    "copy-webpack-plugin": "5.0.1",
-    "css-loader": "2.1.1",
-    "file-loader": "3.0.1",
+    "copy-webpack-plugin": "12.0.2",
+    "css-loader": "7.1.2",
     "glob": "7.1.3",
     "gulp": "^4.0.2",
     "gulp-eslint": "5.0.0",
     "gulp-gzip": "1.4.2",
     "gulp-s3-upload": "1.7.3",
-    "mini-css-extract-plugin": "0.5.0",
+    "mini-css-extract-plugin": "2.9.2",
     "@popperjs/core": "2.11.8",
-    "open": "6.0.0",
     "require-dir": "1.2.0",
     "gulp4-run-sequence": "1.0.1",
     "shelljs": "^0.8.4",
     "typo-js": "1.0.3",
-    "webpack": "4.29.6",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.2.1",
-    "webpack-stream": "5.2.1"
+    "webpack": "5.97.1",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.0",
+    "webpack-stream": "7.0.0"
   },
   "dependencies": {
     "@babel/polyfill": "7.2.5",
-    "@boldreports/javascript-reporting-controls": "6.3.16",
-    "@boldreports/javascript-reporting-extensions": "6.3.16",
+    "@boldreports/javascript-reporting-controls": "7.1.9",
+    "@boldreports/javascript-reporting-extensions": "7.1.9",
     "codemirror": "5.58.2",
     "hasher": "1.2.0",
     "jquery": "3.6.0",
-    "jquery-validation": "1.19.5",  
+    "jquery-validation": "1.19.5",
     "jsrender": "1.0.2",
     "prismjs": "1.27.0",
     "whatwg-fetch": "3.0.0",
diff --git a/src/common/header/header.html b/src/common/header/header.html
index 8884caa..66af639 100644
--- a/src/common/header/header.html
+++ b/src/common/header/header.html
@@ -13,6 +13,6 @@
         <!-- We hided this element as per management instruction -->
         <!-- <a class="ej-sb-button nav-link bold-schedule-demo" href="https://www.boldreports.com/schedule-free-demo" target="_blank" rel="noreferrer">Schedule Free Demo</a> -->
         <a class="ej-sb-button nav-link product-detail" href="https://www.boldreports.com/embedded-reporting/javascript-report-viewer" target="_blank" rel="noreferrer">Product Detail</a>   
-        <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
+        <a class="ej-sb-button nav-link try-it-free" href="https://app.boldid.net/reporting/embedded/register?plan=194&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1" target="_blank" rel="noreferrer">Try it Free</a>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/common/header/header.js b/src/common/header/header.js
index c29aeda..bc1acc3 100644
--- a/src/common/header/header.js
+++ b/src/common/header/header.js
@@ -1,7 +1,7 @@
 import {
     getRouterData
 } from './../router';
-import * as data from '../../controls/samples.json';
+import samplesData from '../../controls/samples.json';
 import * as hasher from 'hasher';
 
 export class Header {
@@ -11,10 +11,10 @@ export class Header {
 
     async init() {
         this.element.innerHTML = await this.fetchFile('src/common/header/header.html');
-        let otherPlatforms = Object.keys(data.default.otherPlatforms);
+        let otherPlatforms = Object.keys(samplesData.otherPlatforms);
         let dropDownItems = this.element.querySelector('.dropdown-menu');
         dropDownItems.addEventListener('click', this.platformSwitcher.bind(this));
-        this.createdropdownItem(data.default.platform, dropDownItems, true);
+        this.createdropdownItem(samplesData.platform, dropDownItems, true);
         for (let i = 0; i < otherPlatforms.length; i++) {
             this.createdropdownItem(otherPlatforms[i].trim(), dropDownItems);
         }
@@ -62,11 +62,11 @@ export class Header {
             let platformSamplePath;
             const sampleName = routerData.reportRouterPath ? routerData.reportRouterPath : routerData.reportBasePath;
             if (routerData.reportRouterPath) {
-                platformBasePath = this.getRouterPath(data.default.platform, targetPlatform, routerData.reportBasePath);
+                platformBasePath = this.getRouterPath(samplesData.platform, targetPlatform, routerData.reportBasePath);
             }
-            platformSamplePath = this.getRouterPath(data.default.platform, targetPlatform, sampleName);
+            platformSamplePath = this.getRouterPath(samplesData.platform, targetPlatform, sampleName);
             const reportPath = routerData.reportRouterPath ? (platformBasePath + '/' + platformSamplePath) : platformSamplePath;
-            window.open(location.origin + "/" + data.default.otherPlatforms[targetPlatform] + reportPath, '_self');
+            window.open(location.origin + "/" + samplesData.otherPlatforms[targetPlatform] + reportPath, '_self');
         }
     }
 
diff --git a/src/common/index.css b/src/common/index.css
index 0b63036..215ddb4 100644
--- a/src/common/index.css
+++ b/src/common/index.css
@@ -95,7 +95,7 @@ body {
 
 @font-face {
   font-family: 'ejicons';
-  src: url('./../../assets/sb-icons/fonts/icons.ttf?gcjn6a') format('truetype'), url('./../../assets/sb-icons/fonts/icons.woff?gcjn6a') format('woff'), url('./../../assets/sb-icons/fonts/icons.svg?gcjn6a#sbicons') format('svg');
+  src: url('./../../assets/sb-icons/fonts/icons.ttf') format('truetype'), url('./../../assets/sb-icons/fonts/icons.woff') format('woff'), url('./../../assets/sb-icons/fonts/icons.svg#sbicons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/src/common/index.js b/src/common/index.js
index 78a9922..ad74045 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -25,7 +25,7 @@ import {
     MainContent
 } from './main-content/main-content';
 import Prism from 'prismjs';
-import * as data from '../controls/samples.json';
+import samplesData from '../controls/samples.json';
 import {
     routerInit
 } from './router';
@@ -69,7 +69,8 @@ function onResize() {
 }
 
 function tocSelection(sampleData) {
-    let ele = document.querySelectorAll('.ej-sb-toc-card')[data.default.samples.indexOf(sampleData)];
+    let samples = samplesData.samples;
+    let ele = document.querySelectorAll('.ej-sb-toc-card')[samples.indexOf(sampleData)];
     let previousSelected = document.querySelector('.toc-selected');
     if (previousSelected) {
         previousSelected.classList.remove('toc-selected')
@@ -111,15 +112,16 @@ function setInnerText(selector, text) {
     document.querySelector(selector).innerText = text;
 }
 function updateSampleDetails(sampleData) {
+    let banner = samplesData.banner;
     setInnerText('.ej-main-body-content .ej-title', sampleData.sampleName);
     setInnerText('.ej-main-body-content .ej-meta-description', sampleData.metaData.description);
 
     //Banner
-    setInnerText('.ej-main-body-content .header', data.default.banner.text);
-    setInnerText('.ej-main-body-content .cnt-text-1', data.default.banner.features[0]);
-    setInnerText('.ej-main-body-content .cnt-text-2', data.default.banner.features[1]);
-    setInnerText('.ej-main-body-content .cnt-text-3', data.default.banner.features[2]);
-    document.querySelector('.free-trial-url').setAttribute('href', data.default.banner.freeTrialUrl);
+    setInnerText('.ej-main-body-content .header', banner.text);
+    setInnerText('.ej-main-body-content .cnt-text-1', banner.features[0]);
+    setInnerText('.ej-main-body-content .cnt-text-2', banner.features[1]);
+    setInnerText('.ej-main-body-content .cnt-text-3', banner.features[2]);
+    document.querySelector('.free-trial-url').setAttribute('href', banner.freeTrialUrl);
 
 }
 
diff --git a/src/common/main-content/main-content.css b/src/common/main-content/main-content.css
index de5519a..b1a9c69 100644
--- a/src/common/main-content/main-content.css
+++ b/src/common/main-content/main-content.css
@@ -72,6 +72,14 @@
   margin: 25px 3px 20px 20px;
 }
 
+.tab-pane#ej-description #description a {
+  text-decoration: none;
+}
+
+.tab-pane#ej-description #description a:hover {
+  text-decoration: underline;
+}
+
 .tab-pane form{
   margin-bottom: -7px;
 }
@@ -377,11 +385,22 @@
 }
 
 @media only screen and (min-width: 300px) and (max-width: 872px) {
-  .ej-main-body-content .ej-lp-footer, .ej-main-body-content .ej-lp-footer > div {
-    display: block;
+  .ej-main-body-content .ej-lp-footer {
+      display: block;
+  }
+
+  .ej-main-body-content .ej-lp-footer .ej-lp-footer-copyright {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 1095px) {
+  .ej-lp-footer .ej-lp-footer-links {
+    display: none;
   }
+  
   .ej-main-body-content .ej-lp-footer .ej-lp-footer-copyright {
     float: left;
-    line-height: 30px;
+    line-height: 21px;
   }
 }
\ No newline at end of file
diff --git a/src/common/main-content/main-content.html b/src/common/main-content/main-content.html
index 2de51ff..eba866e 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-ds-toggle="tab" role="tab" aria-selected="true">
+          <a href="#demo" data-bs-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-ds-toggle="tab" role="tab" aria-selected="false">
+          <a href="#source" data-bs-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-ds-toggle="tab" role="tab" aria-selected="false">
+          <a href="#ej-description" data-bs-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-ds-toggle="tab" role="tab" aria-selected="true"></a>
+                <a href="#js" class="active js-header" data-bs-toggle="tab" role="tab" aria-selected="true"></a>
               </li>
               <li class="ej-nav-item">
-                <a class="html-header" href="#html" data-ds-toggle="tab" role="tab" aria-selected="false"></a>
+                <a class="html-header" href="#html" data-bs-toggle="tab" role="tab" aria-selected="false"></a>
               </li>
             </ul>
           </div>
@@ -90,13 +90,19 @@ <h1 class="ej-title"></h1>
       <a href="https://www.boldreports.com/blog" target="_blank" rel="noreferrer">
           Blog
       </a>
-      <a href="https://support.boldreports.com/" target="_blank" rel="noreferrer">
+      <a href="https://support.boldreports.com/support/tickets/create" target="_blank" rel="noreferrer">
           Support
       </a>
       <a href="https://www.boldreports.com/feedback" target="_blank" rel="noreferrer">
           Feedback
       </a>
+      <a href="https://support.boldreports.com/" target="_blank" rel="noreferrer">
+        Knowledge Base
+    </a>
+    <a href="https://www.boldreports.com/learn" target="_blank" rel="noreferrer">
+        Learning Center
+    </a>
     </div>
-    <div class="ej-lp-footer-copyright">Copyright © 2001-2024 Syncfusion Inc.</div>
+    <div class="ej-lp-footer-copyright"></div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/common/main-content/main-content.js b/src/common/main-content/main-content.js
index 6bc9f8e..c842c19 100644
--- a/src/common/main-content/main-content.js
+++ b/src/common/main-content/main-content.js
@@ -1,7 +1,7 @@
 import {
     getRouterData
 } from './../router';
-import * as data from '../../controls/samples.json';
+import samplesData from './../../controls/samples.json';
 import * as hasher from 'hasher';
 
 export class MainContent {
@@ -15,6 +15,7 @@ export class MainContent {
         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-bs-toggle="tab"][href="#demo"]').on('shown.bs.tab', this.resizeReportViewer);
+        this.element.getElementsByClassName('ej-lp-footer-copyright')[0].textContent = `Copyright © 2001 - ${samplesData.copyrightYear} Syncfusion Inc.`;
     }
 
     async fetchFile(path) {
@@ -37,15 +38,16 @@ export class MainContent {
     }
 
     onTabBtnClick() {
+        let samples = samplesData.samples
         let routerData = getRouterData(hasher.getHash());
-        const sampleData = data.default.samples.filter((sample) => sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath)[0];
+        const sampleData = samples.filter((sample) => sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath)[0];
         const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
         window.open(`${location.href.split('#')[0]}${reportPath}/preview/`, '_blank', 'noreferrer');
     }
 
     onTabPrev() {
         this.togglePopup();
-        let samples = data.default.samples;
+        let samples = samplesData.samples;
         const curRouterData = this.getCurRouterData();
         const curRouterIndex = curRouterData.curIndex;
         const sampleData = curRouterData.isFirst ? samples[data.samples.length - 1] : samples[curRouterIndex - 1];
@@ -55,7 +57,7 @@ export class MainContent {
 
     onTabNext() {
         this.togglePopup();
-        let samples = data.default.samples;
+        let samples = samplesData.samples;
         const curRouterData = this.getCurRouterData();
         const curRouterIndex = curRouterData.curIndex;
         const sampleData = curRouterData.isLast ? samples[0] : samples[curRouterIndex + 1];
@@ -69,7 +71,7 @@ export class MainContent {
             isFirst: undefined,
             isLast: undefined
         };
-        let samples = data.default.samples;
+        let samples = samplesData.samples;
         let routerData = getRouterData(hasher.getHash());
         samples.some((sample, index) => {
             if (sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath) {
diff --git a/src/common/router.js b/src/common/router.js
index 72c6d08..8061214 100644
--- a/src/common/router.js
+++ b/src/common/router.js
@@ -1,4 +1,4 @@
-import * as data from '../controls/samples.json';
+import samplesData from '../controls/samples.json';
 import * as hasher from 'hasher';
 import {
     onInit,
@@ -14,7 +14,7 @@ export function routerInit() {
 
 function hashHandler(newHash, oldHash) {
     let sampleData;
-    let defaultSampleData = data.default.samples[0];
+    let defaultSampleData = samplesData.samples[0];
     let defaultReportPath = defaultSampleData.routerPath ? (defaultSampleData.basePath + '/' + defaultSampleData.routerPath) : defaultSampleData.basePath;
     if (oldHash === undefined) { //initial loading
         if (newHash === '') {
@@ -22,7 +22,7 @@ function hashHandler(newHash, oldHash) {
             sampleData = defaultSampleData;
         } else {
             let routerData = getRouterData(newHash);
-            sampleData = data.default.samples.filter((sample) => sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath)[0];
+            sampleData = samplesData.samples.filter((sample) => sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath)[0];
         }
     } else {
         if (newHash && oldHash) { //sample switching
@@ -32,7 +32,7 @@ function hashHandler(newHash, oldHash) {
                 reportInstance.destroy();
             }
             let routerData = getRouterData(newHash);
-            sampleData = data.default.samples.filter((sample) => sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath)[0];
+            sampleData = samplesData.samples.filter((sample) => sample.routerPath === routerData.reportRouterPath && sample.basePath === routerData.reportBasePath)[0];
         }
     }
     if (!sampleData) {
diff --git a/src/common/sidebar/sidebar.css b/src/common/sidebar/sidebar.css
index f64004f..903dca9 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% 1800%;
+  background-size: 100% 2000%;
 }
 
 .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 bd8b692..455c13d 100644
--- a/src/common/sidebar/sidebar.js
+++ b/src/common/sidebar/sidebar.js
@@ -1,4 +1,4 @@
-import * as data from '../../controls/samples.json';
+import samplesData from '../../controls/samples.json';
 import * as hasher from 'hasher';
 
 export class Sidebar {
@@ -7,7 +7,7 @@ export class Sidebar {
     }
 
     async init() {
-        let samples = data.default.samples;
+        let samples = samplesData.samples;
         this.element.innerHTML = await this.fetchFile('src/common/sidebar/sidebar.html');
         let toc = this.element.getElementsByClassName('ej-sb-toc')[0];
         toc.addEventListener('mousedown', this.onTocClick.bind(this));
@@ -52,7 +52,7 @@ export class Sidebar {
         let ele = this.closest(e.target, '.ej-sb-toc-card');
         if (ele) {
             let index = ele.getAttribute('data-uid');
-            let sampleData = data.default.samples[index];
+            let sampleData = samplesData.samples[index];
             const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
             hasher.setHash(reportPath);
         }
diff --git a/src/controls/cmr-report/cmr-report.html b/src/controls/cmr-report/cmr-report.html
new file mode 100644
index 0000000..831c42a
--- /dev/null
+++ b/src/controls/cmr-report/cmr-report.html
@@ -0,0 +1,15 @@
+<div id="container"></div>
+
+<div id="description">
+    <p>
+        The CMR International Consignment Note outlines the terms, responsibilities, and legal framework for international road freight transport under the CMR Convention, presented in a comprehensive RDL format.
+    </p>
+    <ul>
+        <li>The CMR International Consignment Note is effectively represented through a variety of table report items, each providing a detailed and informative view of the consignment details.</li>
+    </ul>
+    <p>
+        More information about the image report item can be found in this <a
+            href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/report-items/tablix/"
+            target="_blank" rel="noreferrer">documentation</a> section.
+    </p>
+</div>
diff --git a/src/controls/cmr-report/cmr-report.js b/src/controls/cmr-report/cmr-report.js
new file mode 100644
index 0000000..2cb385a
--- /dev/null
+++ b/src/controls/cmr-report/cmr-report.js
@@ -0,0 +1,14 @@
+/**
+    * CMR report sample - This sample analyzes the legal document standardizing international road freight transport with random data.
+ */
+$(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: 'cmr-report.rdl',
+        toolbarSettings: window.Globals.TOOLBAR_OPTIONS,
+        toolBarItemClick: window.Globals.EDIT_REPORT,
+        exportItemClick: window.Globals.EXPORT_ITEM_CLICK
+    });
+});
diff --git a/src/controls/infographics-report/infographics-report.html b/src/controls/infographics-report/infographics-report.html
new file mode 100644
index 0000000..000f53a
--- /dev/null
+++ b/src/controls/infographics-report/infographics-report.html
@@ -0,0 +1,15 @@
+<div id="container"></div>
+<div id="description">
+    <p>
+        The Infographics Report showcases the overall academic performance of a college through graphical representations, utilizing the Bold Reports <code>image</code> report item for visually engaging insights.
+    </p>
+    <ul>
+        <li>The report  presents  student demographics, academic achievements, and study preferences through visually engaging infographics, seamlessly incorporating the concept.</li>
+        <li>It provides visual insights into key metrics such as graduation rates, course interests, and study habits.</li>
+    </ul>
+    <p>
+        More information about the image report item can be found in 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/infographics-report/infographics-report.js b/src/controls/infographics-report/infographics-report.js
new file mode 100644
index 0000000..b60fb71
--- /dev/null
+++ b/src/controls/infographics-report/infographics-report.js
@@ -0,0 +1,14 @@
+/**
+ * Infographics Report - Visualize student demographics, course interests, achievements, and study preferences.
+ */
+$(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: 'infographics-report.rdl',
+        toolbarSettings: window.Globals.TOOLBAR_OPTIONS,
+        toolBarItemClick: window.Globals.EDIT_REPORT,
+        exportItemClick: window.Globals.EXPORT_ITEM_CLICK
+    });
+});
diff --git a/src/controls/samples.json b/src/controls/samples.json
index 272b814..4f9f15a 100644
--- a/src/controls/samples.json
+++ b/src/controls/samples.json
@@ -5,7 +5,9 @@
     "northwind",
     "rdlcData",
     "paystub",
-    "powerpoint"
+    "powerpoint",
+    "cmr",
+    "infographics"
   ],
   "otherPlatforms": {
     "Angular": "angular/#/",
@@ -21,9 +23,9 @@
       "Intuitive drag-and-drop widgets",
       "Hassle-free licensing"
     ],
-    "freeTrialUrl": "https://app.boldid.net/reporting/embedded/register?plan=174&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1"
+    "freeTrialUrl": "https://app.boldid.net/reporting/embedded/register?plan=194&evaluation=v2&leadsource=demos.boldreports.com&gclid=&referrerroriginurl=https://demos.boldreports.com/pricing&secondaryreferraloriginurl=https://demos.boldreports.com/&host=server&quantity=1"
   },
-  "copyrightPath" : "./src/common/main-content/main-content.html",
+  "copyrightYear": "2025",
   "samples": [
     {
       "routerPath": "product-line-sales",
@@ -430,6 +432,34 @@
       "metaData": {
         "description": "This demo showcases a Transcript Report that effectively presents school student details, including their grades and performance, in the JavaScript Bold Report Viewer."
       }
-    }  
+    },
+    {
+      "routerPath": "cmr-report",
+      "sampleName": "CMR Report",
+      "status": "New",
+      "basePath": "report-viewer",
+      "directoryName": "cmr-report",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 18
+      },
+      "metaData": {
+        "description": "This demo shows CMR International Consignment Note usage, standardizing international road freight under the CMR Convention, in JavaScript Bold Report Viewer."
+      }
+    },
+    {
+      "routerPath": "infographics-report",
+      "sampleName": "Infographics Report",
+      "basePath": "report-viewer",
+      "directoryName": "infographics-report",
+      "status": "New",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 17
+      },
+      "metaData": {
+        "description": "This demo visualizes an Infographics Report that effectively presents student demographics, course interests, achievements, and study preferences in the JavaScript Bold Report Viewer."
+      }
+    }
   ]
 }
diff --git a/webpack.config.js b/webpack.config.js
index 4fc91c1..0aa24ed 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -31,9 +31,7 @@ module.exports = {
         },
         {
             test: /\.(png|svg|jpg|gif|cur|ttf|eot|woff)$/,
-            use: [{
-                loader: 'file-loader'
-            }]
+            type: 'asset/resource'
         }
         ]
     },
@@ -46,9 +44,11 @@ module.exports = {
         new MiniCssExtractPlugin({
             filename: `[name].css`
         }),
-        new CopyWebpackPlugin([{
-            from: 'demos'
-        }])
+        new CopyWebpackPlugin({
+            patterns: [
+                { from: 'demos'},
+            ]
+        })
     ],
     resolve: {
         alias: {