diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 904b487..fec560d 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -30,7 +30,7 @@ import Footer from "../components/footer.astro";
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 
 		<!-- JavaScript -->
-		<script src="../scripts/index.ts" />
+		<script src="../scripts/index.js" />
 
 		<!-- Schema, remind me to add more to this later -->
 		<script type="application/ld+json">
diff --git a/src/pages/now.astro b/src/pages/now.astro
index 665cd6b..59d3e13 100644
--- a/src/pages/now.astro
+++ b/src/pages/now.astro
@@ -7,9 +7,13 @@ import "../styles/now.scss";
 <Layout>
     <h2>now playing</h2>
     <h3>tunes</h3>
-    <ul id="tunes-list">
+    <ul class="now-list" id="tunes-list">
+    </ul>
+    <h3>games</h3>
+    <ul class="now-list" id="games-list">
 
     </ul>
+                    
 </Layout>
 
 
diff --git a/src/scripts/index.js b/src/scripts/index.js
new file mode 100644
index 0000000..ff8cc02
--- /dev/null
+++ b/src/scripts/index.js
@@ -0,0 +1,44 @@
+window.onload = async function() {
+    let innerHTML = '';
+    let tunesList = document.getElementById('tunes-list');
+    let musicResponse = (await fetch("https://backend.angelcube.dev/music"))
+        .json()
+        .then(data => data.recenttracks.track.forEach(track => {
+            innerHTML +=
+            `<li class="now-item">
+                <img src="${track.image[1]["#text"]}"></img>
+                <div class="now-item-meta">
+                    <h4>${track.name}</h4>
+                    <p>${track.artist["#text"]}</p>
+                </div>
+            </li>`;
+        })).then(function () {
+            tunesList.innerHTML = innerHTML;
+        }).finally(function () {
+            innerHTML = "";
+        });
+
+    let gamesList = document.getElementById('games-list');
+    let gamesResponse = (await fetch("https://backend.angelcube.dev/games"))
+        .json()
+        .then(data => data.response.games.forEach(game => {
+            innerHTML +=
+            `<li class="now-item">
+                <img src="https://media.steampowered.com/steamcommunity/public/images/apps/${game.appid}/${game.img_icon_url}.jpg"></img>
+                <div class="now-item-meta">
+                    <h4>${game.name}</h4>
+                    <p>${Math.round(game.playtime_2weeks / 60)} hours in past two weeks</p>
+                </div>
+            </li>`;
+        })).then(function () {
+            gamesList.innerHTML = innerHTML;
+        });
+    
+
+    // 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/scripts/index.ts b/src/scripts/index.ts
deleted file mode 100644
index 7275ed5..0000000
--- a/src/scripts/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-window.onload = async function() {
-    let tunesList = document.getElementById('tunes-list');
-    let innerHTML = '';
-    let musicResponse = (await fetch("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;
-        });
-    
-
-    // 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/main.scss b/src/styles/main.scss
index 504ae1f..86679a6 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -25,6 +25,10 @@ h6 {
     color: var(--heading-color);
 }
 
+h4 {
+    font-size: 14px;
+}
+
 a {
     color: var(--link-color);
     cursor: pointer;
diff --git a/src/styles/now.scss b/src/styles/now.scss
index 9339cc9..d0b368a 100644
--- a/src/styles/now.scss
+++ b/src/styles/now.scss
@@ -1,33 +1,35 @@
 @use "./_var.scss";
 
-ul#tunes-list {
+ul.now-list {
     list-style-type: none;
     padding: 0px;
 }
 
-li.tunes-item {
+li.now-item {
     display: flex;
     gap: 8px;
     padding: 8px 0px;
 }
 
-div.tunes-item-meta {
+div.now-item-meta {
     display: flex;
     align-items: flex-start;
     flex-direction: column;
 }
 
-div.tunes-item-meta h4 {
+div.now-item-meta h4 {
     margin: 0;
     text-overflow: ellipsis;
 }
 
-div.tunes-item-meta p {
+div.now-item-meta p {
     margin: 0;
     text-overflow: ellipsis;
 }
 
-li.tunes-item img {
+li.now-item img {
     align-self: center;
-    height: fit-content;
-}
\ No newline at end of file
+    height: 48px;
+    image-rendering: pixelated;
+    border-radius: 10%
+}