diff --git a/src/js/components.js b/src/js/components.js
index b871cd3..8cc74d5 100644
--- a/src/js/components.js
+++ b/src/js/components.js
@@ -1,52 +1,36 @@
-function createH2(headerName) {
-  return `<h2>${headerName}</h2><section>`;
-}
-
-function createFigure(imageURL, heading, subheading) {
-  return `<figure> 
-    <img src="${imageURL}"> 
-    <figcaption> 
-    <b>${heading}</b><br>
-    <em>${subheading}</em>
-    </figcaption>
-    </figure>`;
-}
-
-function createSection(headerName, figureArray) {
-  let figuresHTML = "";
-  for (let i = 0; i < figureArray.length; i++) {
-    let figure = figureArray[i];
-    figuresHTML = figuresHTML.concat(
-      createFigure(figure.url, figure.main, figure.sub)
-    );
+async function figureGrid(jsonURL) {
+  const response = await fetch(jsonURL);
+  const json = await response.json();
+  let html = "";
+  for (const headerName in json) {
+    html = html.concat("<section>")
+    let entries = json[headerName];
+    for (let i = 0; i < entries.length; i++) {
+      let entry = entries[i];
+      html = html.concat(
+      `<figure> 
+        <img src="${entry.url}"> 
+        <figcaption> 
+          <b>${entry.main}</b><br>
+          <em>${entry.sub}</em>
+        </figcaption>
+      </figure>`
+      );
+    }
+    html = html.concat("</section>")
   }
-  return `<section>${figuresHTML}</section>`
-}
-
-function figureGrid(jsonURL, targetID) {
-  fetch(source)
-    .then((response) => response.json())
-    .then((json) => {
-      let html = "";
-      for (const headerName in json) {
-        let figureArray = json[category];
-        html = html.concat(createSection(headerName, figureArray));
-      }
-      const thisScript = document.getElementById("albums");
-      return html;
-    });
+  return html;
 }
 
 class FigureGrid extends HTMLElement {
   static observedAttributes = ["src"];
   constructor() {
     super();
-    this._internals = this.attachInternals();
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  async attributeChangedCallback(name, oldValue, newValue) {
     if (name == "src") {
-      this.innerHTML =  
+      this.innerHTML = await figureGrid(newValue);
     }
   }
 }
diff --git a/src/music/albums.json b/src/music/albums.json
index ee120ac..008a51c 100644
--- a/src/music/albums.json
+++ b/src/music/albums.json
@@ -1,207 +1,207 @@
 {
   "chill": [
     {
-      "name": "Cosmos",
-      "artist": "Yuji Ohno",
-      "link": "cosmos"
+      "main": "Cosmos",
+      "sub": "Yuji Ohno",
+      "url": "/res/albums/cosmos.webp"
     },
     {
-      "name": "Deep Breakfast",
-      "artist": "Ray Lynch",
-      "link": "deep_breakfast"
+      "main": "Deep Breakfast",
+      "sub": "Ray Lynch",
+      "url": "/res/albums/deep_breakfast.webp"
     },
     {
-      "name": "Dune",
-      "artist": "David Matthews",
-      "link": "dune"
+      "main": "Dune",
+      "sub": "David Matthews",
+      "url": "/res/albums/dune.webp"
     },
     {
-      "name": "God's Trashmen Sent to Right the Mess",
-      "artist": "Fievel is Glauque",
-      "link": "gods_trashmen"
+      "main": "God's Trashmen Sent to Right the Mess",
+      "sub": "Fievel is Glauque",
+      "url": "/res/albums/gods_trashmen.webp"
     },
     {
-      "name": "MACROCOSM",
-      "artist": "BALTHVS",
-      "link": "macrocosm"
+      "main": "MACROCOSM",
+      "sub": "BALTHVS",
+      "url": "/res/albums/macrocosm.webp"
     },
     {
-      "name": "Ciao! Baby",
-      "artist": "The Marshmallow Kisses",
-      "link": "ciao_baby"
+      "main": "Ciao! Baby",
+      "sub": "The Marshmallow Kisses",
+      "url": "/res/albums/ciao_baby.webp"
     },
     {
-      "name": "an anxious object",
-      "artist": "mouse on the keys",
-      "link": "mouse_on_the_keys"
+      "main": "an anxious object",
+      "sub": "mouse on the keys",
+      "url": "/res/albums/mouse_on_the_keys.webp"
     },
     {
-      "name": "Funky Stuff",
-      "artist": " Jiro Inagaki",
-      "link": "funky_stuff"
+      "main": "Funky Stuff",
+      "sub": " Jiro Inagaki",
+      "url": "/res/albums/funky_stuff.webp"
     },
     {
-      "name": "Make Up City",
-      "artist": "CASIOPEA",
-      "link": "make_up_city"
+      "main": "Make Up City",
+      "sub": "CASIOPEA",
+      "url": "/res/albums/make_up_city.webp"
     },
     {
-      "name": "Mint Jams",
-      "artist": "CASIOPEA",
-      "link": "mint_jams"
+      "main": "Mint Jams",
+      "sub": "CASIOPEA",
+      "url": "/res/albums/mint_jams.webp"
     }
   ],
   "experimental": [
     {
-      "name": "Departing",
-      "artist": "Jesus Molina",
-      "link": "departing"
+      "main": "Departing",
+      "sub": "Jesus Molina",
+      "url": "/res/albums/departing.webp"
     },
     {
-      "name": "Choose your Weapon",
-      "artist": "Hiatus Kaiyote",
-      "link": "choose_your_weapon"
+      "main": "Choose your Weapon",
+      "sub": "Hiatus Kaiyote",
+      "url": "/res/albums/choose_your_weapon.webp"
     },
     {
-      "name": "Hold Your Horse Is",
-      "artist": "Hella",
-      "link": "hold_your_horse_is"
+      "main": "Hold Your Horse Is",
+      "sub": "Hella",
+      "url": "/res/albums/hold_your_horse_is.webp"
     },
     {
-      "name": "Mother Earth's Plantasia",
-      "artist": "Mort Garson",
-      "link": "plantasia"
+      "main": "Mother Earth's Plantasia",
+      "sub": "Mort Garson",
+      "url": "/res/albums/plantasia.webp"
     },
     {
-      "name": "The Wozard of Iz - An Electronic Odyssey",
-      "artist": "Mort Garson",
-      "link": "wozard_of_iz"
+      "main": "The Wozard of Iz - An Electronic Odyssey",
+      "sub": "Mort Garson",
+      "url": "/res/albums/wozard_of_iz.webp"
     },
     {
-      "name": "Los Desamores de Dewey Martino",
-      "artist": "Dewey Martino",
-      "link": "los_desamores_de_dewey_martino"
+      "main": "Los Desamores de Dewey Martino",
+      "sub": "Dewey Martino",
+      "url": "/res/albums/los_desamores_de_dewey_martino.webp"
     },
     {
-      "name": "New History Warfare Vol. 3: To See More Light",
-      "artist": "Colin Stetson",
-      "link": "new_history_warfare_3"
+      "main": "New History Warfare Vol. 3: To See More Light",
+      "sub": "Colin Stetson",
+      "url": "/res/albums/new_history_warfare_3.webp"
     },
     {
-      "name": "Hylics 2 Original Soundtrack",
-      "artist": "Chuck Salamone",
-      "link": "hylics2"
+      "main": "Hylics 2 Original Soundtrack",
+      "sub": "Chuck Salamone",
+      "url": "/res/albums/hylics2.webp"
     }
   ],
   "electronic": [
     {
-      "name": "H.A.Q.Q.",
-      "artist": "Liturgy",
-      "link": "haqq"
+      "main": "H.A.Q.Q.",
+      "sub": "Liturgy",
+      "url": "/res/albums/haqq.webp"
     },
     {
-      "name": "One Year Madness",
-      "artist": "Golemm",
-      "link": "one_year_madness"
+      "main": "One Year Madness",
+      "sub": "Golemm",
+      "url": "/res/albums/one_year_madness.webp"
     },
     {
-      "name": "Cyberspace",
-      "artist": "Yameii Online",
-      "link": "cyberspace"
+      "main": "Cyberspace",
+      "sub": "Yameii Online",
+      "url": "/res/albums/cyberspace.webp"
     },
     {
-      "name": "Wlfgrl",
-      "artist": "Machine Girl",
-      "link": "wlfgrl"
+      "main": "Wlfgrl",
+      "sub": "Machine Girl",
+      "url": "/res/albums/wlfgrl.webp"
     },
     {
-      "name": "...Because I'm Young Arrogant and Hate Everything You Stand For",
-      "artist": "Machine Girl",
-      "link": "young_arrogant"
+      "main": "...Because I'm Young Arrogant and Hate Everything You Stand For",
+      "sub": "Machine Girl",
+      "url": "/res/albums/young_arrogant.webp"
     },
     {
-      "name": "Parousia",
-      "artist": "XI",
-      "link": "parousia"
+      "main": "Parousia",
+      "sub": "XI",
+      "url": "/res/albums/parousia.webp"
     },
     {
-      "name": "www.",
-      "artist": "cosmic collective",
-      "link": "www"
+      "main": "www.",
+      "sub": "cosmic collective",
+      "url": "/res/albums/www.webp"
     },
     {
-      "name": "TMP2",
-      "artist": "Graham Kartna",
-      "link": "tmp2"
+      "main": "TMP2",
+      "sub": "Graham Kartna",
+      "url": "/res/albums/tmp2.webp"
     }
   ],
   "high energy": [
     {
-      "name": "Each and Every Word Leaves Me Here Alone",
-      "artist": "Foreground Eclipse",
-      "link": "fge_1"
+      "main": "Each and Every Word Leaves Me Here Alone",
+      "sub": "Foreground Eclipse",
+      "url": "/res/albums/fge_1.webp"
     },
     {
-      "name": "Missing, Loving, Suffering",
-      "artist": "Foreground Eclipse",
-      "link": "fge_2"
+      "main": "Missing, Loving, Suffering",
+      "sub": "Foreground Eclipse",
+      "url": "/res/albums/fge_2.webp"
     },
     {
-      "name": "ITEKOMA HITS",
-      "artist": "Otoboke Beaver",
-      "link": "itekoma_hits"
+      "main": "ITEKOMA HITS",
+      "sub": "Otoboke Beaver",
+      "url": "/res/albums/itekoma_hits.webp"
     },
     {
-      "name": "World is Yours",
-      "artist": "MASS OF THE FERMENTING DREGS",
-      "link": "world_is_yours"
+      "main": "World is Yours",
+      "sub": "MASS OF THE FERMENTING DREGS",
+      "url": "/res/albums/world_is_yours.webp"
     },
     {
-      "name": "New Levels New Devils",
-      "artist": "Polyphia",
-      "link": "new_levels_new_devils"
+      "main": "New Levels New Devils",
+      "sub": "Polyphia",
+      "url": "/res/albums/new_levels_new_devils.webp"
     }
   ],
   "misc": [
     {
-      "name": "27 Demos",
-      "artist": "Margo Guryan ",
-      "link": "27_demos"
+      "main": "27 Demos",
+      "sub": "Margo Guryan ",
+      "url": "/res/albums/27_demos.webp"
     },
     {
-      "name": "the first glass beach album",
-      "artist": "Glass Beach",
-      "link": "glass_beach"
+      "main": "the first glass beach album",
+      "sub": "Glass Beach",
+      "url": "/res/albums/glass_beach.webp"
     },
     {
-      "name": "Her Abiding Memory",
-      "artist": "Pitcher56",
-      "link": "her_abiding_memory"
+      "main": "Her Abiding Memory",
+      "sub": "Pitcher56",
+      "url": "/res/albums/her_abiding_memory.webp"
     },
     {
-      "name": "High Society",
-      "artist": "Enon",
-      "link": "high_society"
+      "main": "High Society",
+      "sub": "Enon",
+      "url": "/res/albums/high_society.webp"
     },
     {
-      "name": "Live at Bush Hall",
-      "artist": "Black Country, New Road",
-      "link": "live_at_bush_hall"
+      "main": "Live at Bush Hall",
+      "sub": "Black Country, New Road",
+      "url": "/res/albums/live_at_bush_hall.webp"
     },
     {
-      "name": "Mass Teen Fainting",
-      "artist": "Plumtree",
-      "link": "mass_teen_fainting"
+      "main": "Mass Teen Fainting",
+      "sub": "Plumtree",
+      "url": "/res/albums/mass_teen_fainting.webp"
     },
     {
-      "name": "My Caution Line",
-      "artist": "Citrobal",
-      "link": "my_caution_line"
+      "main": "My Caution Line",
+      "sub": "Citrobal",
+      "url": "/res/albums/my_caution_line.webp"
     },
     {
-      "name": "Oncle Jazz",
-      "artist": "Men I Trust",
-      "link": "oncle_jazz"
+      "main": "Oncle Jazz",
+      "sub": "Men I Trust",
+      "url": "/res/albums/oncle_jazz.webp"
     }
   ]
 }
diff --git a/src/music/index.md b/src/music/index.md
index 9c1f57a..7cc161b 100644
--- a/src/music/index.md
+++ b/src/music/index.md
@@ -2,33 +2,5 @@
 Music is a huge passion of mine. I prefer listening to albums in full from
 start to finish in order. My favorite albums are usually experimental, unique,
 or have a particular theme they explore
-<script id="albums">
-const thisScript = document.getElementById("albums");
-fetch("/music/albums.json")
-    .then((response) => response.json())
-    .then((json) => {
-            let html = "";
-            for (const category in json) {
-                let albums = json[category];
-                html = html.concat(`<h2>${category}</h2><section>`);
-                for (let i = 0; i < albums.length; i++) {
-                    let album = albums[i];
-                    let link = "/res/albums/" + album.link + ".webp";
-                    let name = album.name;
-                    let artist = album.artist;
-                    let template = `<figure>
-                    <img src="${link}">
-                    <figcaption>
-                    <b>${name}</b><br/><em>${artist}</em>
-                    </figcaption>
-                    </figure>`;
-                    html = html.concat(template);
-                }
-                html = html.concat("</section>")
-            }
-            let section = document.createElement("div");
-            section.innerHTML = html;
-            thisScript.replaceWith(section); // lol
-        });
-</script>
+
 <figure-grid src="/music/albums.json"></figure-grid>