diff --git a/package.json b/package.json
index 90b3243ab..10139c0c7 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "@fullcalendar/timegrid": "^5.4.0",
     "apexcharts": "^3.22.2",
     "autosize": "^4.0.2",
-    "bootstrap": "twbs/bootstrap#fe961c1",
+    "bootstrap": "twbs/bootstrap#f4457bc",
     "countup.js": "^2.0.7",
     "daterangepicker": "^3.1.0",
     "flatpickr": "^4.6.6",
diff --git a/src/pages/_includes/cards/development-activity.html b/src/pages/_includes/cards/development-activity.html
index 23a3c0c77..9f890d9f0 100644
--- a/src/pages/_includes/cards/development-activity.html
+++ b/src/pages/_includes/cards/development-activity.html
@@ -5,7 +5,7 @@
 	<div class="position-relative">
 		<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
 			<div class="row g-2">
-				<div class="col-auto">{% include ui/chart-sparkline.html percentage=35 type="donut" %}</div>
+				<div class="col-auto">{% include ui/chart-sparkline.html id="activity" percentage=35 type="donut" %}</div>
 				<div class="col">
 					<div>Today's Earning: $4,262.40</div>
 					<div class="text-muted">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>
diff --git a/src/pages/_includes/ui/chart-sparkline.html b/src/pages/_includes/ui/chart-sparkline.html
index efe00d826..756d882b4 100644
--- a/src/pages/_includes/ui/chart-sparkline.html
+++ b/src/pages/_includes/ui/chart-sparkline.html
@@ -1,72 +1,74 @@
 {% assign type = include.type | default: 'bar' %}
-{% assign id = 0 | random_id %}
+{% assign id = include.id %}
 {% assign color = include.color | default: 'blue' %}
 {% assign height = include.height | default: 2.5 %}
 
 {% assign data = include.data %}
 
-<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
+{% if id %}
+	<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
 
-{% capture_global scripts %}
-<script>
-	// @formatter:off
-	document.addEventListener("DOMContentLoaded", function () {
-		{% if jekyll.environment == 'development' %}
-		window.tabler_chart = window.tabler_chart || {};
-		{% endif %}
+	{% capture_global scripts %}
+	<script>
+		// @formatter:off
+		document.addEventListener("DOMContentLoaded", function () {
+			{% if jekyll.environment == 'development' %}
+			window.tabler_chart = window.tabler_chart || {};
+			{% endif %}
 
-		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
-			chart: {
-				type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
-				fontFamily: 'inherit',
-				height: {{ height | times: 16 | round }},
-				{% if type == 'pie' %}
-				width: {{ height | times: 16 | round }},
-				{% endif %}
-				animations: {
-					enabled: false
-				},
-				sparkline: {
-					enabled: true
-				},
-			},
-			tooltip: {
-				enabled: false,
-			},
-			{% if type == 'donut' %}
-			plotOptions: {
-				radialBar: {
-					hollow: {
-						margin: 0,
-						size: '75%'
+			window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
+				chart: {
+					type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
+					fontFamily: 'inherit',
+					height: {{ height | times: 16 | round }},
+					{% if type == 'pie' or type == 'donut' %}
+					width: {{ height | times: 16 | round }},
+					{% endif %}
+					animations: {
+						enabled: false
 					},
-					track: {
-						margin: 0
+					sparkline: {
+						enabled: true
 					},
-					dataLabels: {
-						show: false
+				},
+				tooltip: {
+					enabled: false,
+				},
+				{% if type == 'donut' %}
+				plotOptions: {
+					radialBar: {
+						hollow: {
+							margin: 0,
+							size: '75%'
+						},
+						track: {
+							margin: 0
+						},
+						dataLabels: {
+							show: false
+						}
 					}
-				}
-			},
-			{% endif %}
-			{% if type == 'area' or type == 'line' %}
-			stroke: {
-				width: 2,
-				lineCap: "round",
-			},
-			{% endif %}
+				},
+				{% endif %}
+				{% if type == 'area' or type == 'line' %}
+				stroke: {
+					width: 2,
+					lineCap: "round",
+				},
+				{% endif %}
 
-			{% if type == 'donut' %}
-			colors: ["{{ color | default: 'blue' | tabler_color }}"],
-			series: [{{ data }}],
-			{% else %}
-			series: [{
-				color: "{{ color | default: 'blue' | tabler_color }}",
-				data: [{{ data }}]
-			}],
-			{% endif %}
-		})).render();
-	});
-	// @formatter:on
-</script>
-{% endcapture_global %}
+				{% if type == 'donut' %}
+				colors: ["{{ color | default: 'blue' | tabler_color }}"],
+				series: [{{ data }}],
+				{% else %}
+				series: [{
+					color: "{{ color | default: 'blue' | tabler_color }}",
+					data: [{{ data }}]
+				}],
+				{% endif %}
+			})).render();
+		});
+		// @formatter:on
+	</script>
+	{% endcapture_global %}
+{% endif %}
\ No newline at end of file