diff --git a/package-lock.json b/package-lock.json
index eb2afc9..adb04b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1183,6 +1183,17 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "24.0.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.7.tgz",
+      "integrity": "sha512-YIEUUr4yf8q8oQoXPpSlnvKNVKDQlPMWrmOcgzoduo7kvA2UF0/BwJ/eMKFTiTtkNL17I0M6Xe2tvwFU7be6iw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.8.0"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -5886,6 +5897,14 @@
       "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
       "license": "MIT"
     },
+    "node_modules/undici-types": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 868c574..3684588 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,6 @@
 ---
 import Layout from "../layouts/layout.astro";
 import "../styles/main.scss";
-
-const request = await fetch("http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=angelcube__&api_key=" + import.meta.env.LASTFM_KEY + "&limit=1&format=json");
-const response = await request.json().then(data => data.recenttracks?.track[0]);
-const artist = response?.artist["#text"];
-const name = response?.name;
-const album = response?.album["#text"];
 ---
 
 <Layout>
@@ -22,9 +16,6 @@ const album = response?.album["#text"];
 	<p>
 		beyond coding, I love to sing, do a little drawing, and obsess over video games—currently, I'm plagued by my love of <a href="https://www.celestegame.com/"><b>Celeste</b></a>.
 	</p>
-	<small>
-		<i>last played song: {name} by {artist} on {album}</i>
-	</small>
 </Layout>
 
 
diff --git a/src/pages/now.astro b/src/pages/now.astro
new file mode 100644
index 0000000..665cd6b
--- /dev/null
+++ b/src/pages/now.astro
@@ -0,0 +1,15 @@
+---
+import Layout from "../layouts/layout.astro";
+import "../styles/main.scss";
+import "../styles/now.scss";
+---
+
+<Layout>
+    <h2>now playing</h2>
+    <h3>tunes</h3>
+    <ul id="tunes-list">
+
+    </ul>
+</Layout>
+
+
diff --git a/src/scripts/index.ts b/src/scripts/index.ts
index 2cd21fd..d203f80 100644
--- a/src/scripts/index.ts
+++ b/src/scripts/index.ts
@@ -1,16 +1,26 @@
-async function fetchCarbon() : Promise<number> {
-    const url : string = "https://corsproxy.io/?url=https://api.websitecarbon.com/site?url=" + window.location.hostname;
+window.onload = async function() {
+    let tunesList = document.getElementById('tunes-list');
+    let innerHTML = '';
+    let musicResponse = (await fetch("https://corsproxy.io/?url=https://backend.angelcube.dev/music"))
+        .json()
+        .then(data => data.recenttracks.track.forEach(track => {
+            innerHTML +=
+                `<li class="tunes-item">
+                    <img src="${track.image[0]["#text"]}"></img>
+                    <div class="tunes-item-meta">
+                        <h4>${track.name}</h4>
+                        <p>${track.artist["#text"]}</p>
+                    </div>
+                </li>`;
+        })).then(function () {
+            tunesList.innerHTML = innerHTML;
+        });
+    
 
-    const response : Response = await fetch(url);
-    console.log(response);
-    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 only " + Math.round(await fetchCarbon() * 100000) / 100  + " mL of carbon dioxide!";
-    } catch (error) {
-        document.getElementById('carbon').innerHTML = "unable to load carbon usage!";
-        console.log(error);
-    }
-}; */
\ No newline at end of file
+    // try {
+    //     document.getElementById('carbon').innerHTML = "your visit to this website produced only " + Math.round(await fetchCarbon() * 100000) / 100  + " mL of carbon dioxide!";
+    // } catch (error) {
+    //     document.getElementById('carbon').innerHTML = "unable to load carbon usage!";
+    //     console.log(error);
+    // }
+}; 
\ No newline at end of file
diff --git a/src/styles/now.scss b/src/styles/now.scss
new file mode 100644
index 0000000..9339cc9
--- /dev/null
+++ b/src/styles/now.scss
@@ -0,0 +1,33 @@
+@use "./_var.scss";
+
+ul#tunes-list {
+    list-style-type: none;
+    padding: 0px;
+}
+
+li.tunes-item {
+    display: flex;
+    gap: 8px;
+    padding: 8px 0px;
+}
+
+div.tunes-item-meta {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+div.tunes-item-meta h4 {
+    margin: 0;
+    text-overflow: ellipsis;
+}
+
+div.tunes-item-meta p {
+    margin: 0;
+    text-overflow: ellipsis;
+}
+
+li.tunes-item img {
+    align-self: center;
+    height: fit-content;
+}
\ No newline at end of file