diff --git a/server/Components/App.razor b/server/Components/App.razor
index bea3787..2df120c 100644
--- a/server/Components/App.razor
+++ b/server/Components/App.razor
@@ -1,8 +1,10 @@
-﻿<!DOCTYPE html>
+﻿@inject NavigationManager Urihelper
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <!-- Google Tag Manager -->
+    <!-- Load GTM-P3WXFWCW immediately on page load  -->
     <script>
         (function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -11,13 +13,32 @@
             }); var f = d.getElementsByTagName(s)[0],
                 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                     'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-        })(window, document, 'script', 'dataLayer', 'GTM-WLQL39J');</script>
-    <!-- End Google Tag Manager -->
+        })(window, document, 'script', 'dataLayer', 'GTM-P3WXFWCW');
+    </script>
+    <!-- Load GTM-W8WD8WN on user interaction -->
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const events = ["mousemove", "scroll", "keydown", "touchstart"];
+            function loadGTM() {
+                events.forEach(event => document.removeEventListener(event, loadGTM));
+                (function (w, d, s, l, i) {
+                    w[l] = w[l] || []; w[l].push({
+                        'gtm.start':
+                            new Date().getTime(), event: 'gtm.js'
+                    }); var f = d.getElementsByTagName(s)[0],
+                        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+                })(window, document, 'script', 'dataLayer', 'GTM-W8WD8WN');
+            }
+            events.forEach(event => document.addEventListener(event, loadGTM, { once: true }));
+        });
+    </script>
     <title>Expense Tracker - Syncfusion Blazor Components Showcase Application</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="Expense Tracker is a single page application to showcase dashboard like layout with rich interactions using Syncfusion Blazor Components." />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <link href=@Urihelper.Uri rel="canonical" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Raleway:500,600" rel="stylesheet">
@@ -42,7 +63,14 @@
 <body>
     <Routes @rendermode="@InteractiveServer" />
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!--Page Load-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P3WXFWCW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!--Interaction-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div hidden id="sync-analytics" data-queue="Syncfusion - Showcase - Blazor - ExpenseTracker"></div>
     <script src="_framework/blazor.web.js"></script>
diff --git a/server/ExpenseTracker.csproj b/server/ExpenseTracker.csproj
index 94327db..f670498 100644
--- a/server/ExpenseTracker.csproj
+++ b/server/ExpenseTracker.csproj
@@ -11,16 +11,16 @@
   </ItemGroup>
 
   <ItemGroup>
-	<PackageReference Include="Syncfusion.Blazor.Buttons" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Calendars" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Charts" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.DropDowns" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Grid" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Inputs" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Navigations" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Notifications" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Popups" Version="31.1.17" />
-	<PackageReference Include="Syncfusion.Blazor.Themes" Version="31.1.17" />
+	<PackageReference Include="Syncfusion.Blazor.Buttons" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Calendars" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Charts" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.DropDowns" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Grid" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Inputs" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Navigations" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Notifications" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Popups" Version="32.1.19" />
+	<PackageReference Include="Syncfusion.Blazor.Themes" Version="32.1.19" />
   </ItemGroup>
 	
 </Project>
diff --git a/wasm/ExpenseTracker.Client/ExpenseTracker.Client.csproj b/wasm/ExpenseTracker.Client/ExpenseTracker.Client.csproj
index 8e49229..891d6c0 100644
--- a/wasm/ExpenseTracker.Client/ExpenseTracker.Client.csproj
+++ b/wasm/ExpenseTracker.Client/ExpenseTracker.Client.csproj
@@ -10,16 +10,16 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
-	  <PackageReference Include="Syncfusion.Blazor.Buttons" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Calendars" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Charts" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Grid" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Inputs" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Navigations" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Notifications" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Popups" Version="31.1.17" />
-	  <PackageReference Include="Syncfusion.Blazor.Themes" Version="31.1.17" />
+	  <PackageReference Include="Syncfusion.Blazor.Buttons" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Calendars" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Charts" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Grid" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Inputs" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Navigations" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Notifications" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Popups" Version="32.1.19" />
+	  <PackageReference Include="Syncfusion.Blazor.Themes" Version="32.1.19" />
 	  <PackageReference Include="System.Net.Http.Json" Version="8.0.0" />
   </ItemGroup>
 	
diff --git a/wasm/ExpenseTracker/Components/App.razor b/wasm/ExpenseTracker/Components/App.razor
index 8224edc..f5af22b 100644
--- a/wasm/ExpenseTracker/Components/App.razor
+++ b/wasm/ExpenseTracker/Components/App.razor
@@ -1,8 +1,10 @@
-﻿<!DOCTYPE html>
+﻿@inject NavigationManager Urihelper
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <!-- Google Tag Manager -->
+    <!-- Load GTM-P3WXFWCW immediately on page load  -->
     <script>
         (function (w, d, s, l, i) {
             w[l] = w[l] || []; w[l].push({
@@ -11,13 +13,32 @@
             }); var f = d.getElementsByTagName(s)[0],
                 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                     'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-        })(window, document, 'script', 'dataLayer', 'GTM-WLQL39J');</script>
-    <!-- End Google Tag Manager -->
+        })(window, document, 'script', 'dataLayer', 'GTM-P3WXFWCW');
+    </script>
+    <!-- Load GTM-W8WD8WN on user interaction -->
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const events = ["mousemove", "scroll", "keydown", "touchstart"];
+            function loadGTM() {
+                events.forEach(event => document.removeEventListener(event, loadGTM));
+                (function (w, d, s, l, i) {
+                    w[l] = w[l] || []; w[l].push({
+                        'gtm.start':
+                            new Date().getTime(), event: 'gtm.js'
+                    }); var f = d.getElementsByTagName(s)[0],
+                        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+                })(window, document, 'script', 'dataLayer', 'GTM-W8WD8WN');
+            }
+            events.forEach(event => document.addEventListener(event, loadGTM, { once: true }));
+        });
+    </script>
     <title>Expense Tracker | Blazor WebAssembly showcase app | Syncfusion</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="Expense Tracker is a single page WebAssembly application to showcase dashboard like layout with rich interactions using Syncfusion Blazor Components." />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <link href=@Urihelper.Uri rel="canonical" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Raleway:500,600" rel="stylesheet">
@@ -37,8 +58,15 @@
 
 <body id="body">
     <Routes @rendermode="@InteractiveWebAssembly" />
-     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- Google Tag Manager (noscript) -->
+    <!--Page Load-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P3WXFWCW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!--Interaction-->
+    <noscript>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div hidden id="sync-analytics" data-queue="Syncfusion - Showcase - Blazor - ExpenseTracker"></div>
     <div id="app">
