diff --git a/src/components/footer.astro b/src/components/footer.astro
index 686d72f..c45f6e6 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -4,4 +4,5 @@ import "../styles/footer.scss";
 
 <footer>
 	Angel Wang &copy 2025 (<a href="/CREDITS.txt">Credits</a>)
+	<p><small id="carbon">loading carbon usage...</small></p>
 </footer>
\ No newline at end of file
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 8387d29..904b487 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -29,7 +29,9 @@ import Footer from "../components/footer.astro";
 		<!-- Favicon -->
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 
-		
+		<!-- JavaScript -->
+		<script src="../scripts/index.ts" />
+
 		<!-- Schema, remind me to add more to this later -->
 		<script type="application/ld+json">
 			{
diff --git a/src/scripts/index.ts b/src/scripts/index.ts
new file mode 100644
index 0000000..b8fad26
--- /dev/null
+++ b/src/scripts/index.ts
@@ -0,0 +1,18 @@
+
+
+async function fetchCarbon() : Promise<number> {
+    const url : string = "https://api.websitecarbon.com/site?url=" + window.location.hostname;
+    const response : Response = await fetch(url, {
+        method: "GET"
+    });
+    return await response.json().then(data => data.statistics.co2.grid.litres);
+}
+
+window.onload = async function() {
+    try {
+        document.getElementById('carbon').innerHTML = "your visit to this website produced " + Math.round(await fetchCarbon() * 1000)  + " mL of carbon dioxide!";
+    } catch {
+        document.getElementById('carbon').innerHTML = "unable to load carbon usage!";
+    }
+
+};
\ No newline at end of file