diff --git a/src/components/MusicPlayer.astro b/src/components/MusicPlayer.astro
deleted file mode 100644
index f6d6fd2..0000000
--- a/src/components/MusicPlayer.astro
+++ /dev/null
@@ -1,125 +0,0 @@
----
-import { type CollectionEntry } from "astro:content";
-import { Icon } from "astro-icon/components";
-import { Image } from "astro:assets";
-import Song from "@components/Song.astro";
-import me from "@assets/me.webp";
-
-interface Props {
-  isPlaying?: boolean;
-  posts?: CollectionEntry<"blog">[];
-  nowPlaying: string;
-  playPercent: number;
-  playPositon: string;
-  playLength: string;
-  sectionClass?: string;
-}
-
-const {
-  isPlaying = false,
-  posts,
-  nowPlaying,
-  playPercent,
-  playPositon,
-  playLength,
-  sectionClass,
-} = Astro.props as Props;
----
-
-<section class={sectionClass}>
-  <div class="mb-4 items-center justify-center flex">
-    <Image
-      id="player-image"
-      src={me}
-      alt="isabel roses"
-      class="rounded-sm transition duration-500 ease-in-out"
-      width={416}
-      height={416}
-      loading="eager"
-    />
-
-    {
-      posts && (
-        <div
-          id="queue-view"
-          class="w-[416px] h-[416px] inset-0 hidden overflow-y-auto"
-        >
-          <ul class="flex flex-col p-2">
-            {posts.entries().map(([i, post]) => (
-              <Song
-                index={i + 1}
-                title={post.data.title}
-                time={`${post.data.readTime} mins`}
-                slug={`/blog/${post.id}`}
-              />
-            ))}
-          </ul>
-        </div>
-      )
-    }
-  </div>
-
-  <div class="flex flex-col gap-4">
-    <div>
-      <h1 id="now-playing-title" class="text-2xl font-bold mb-1">
-        {nowPlaying}
-      </h1>
-      <p class="mb-2">isabel roses</p>
-    </div>
-
-    <div class="w-full">
-      <div class="bg-card h-2 rounded-2xl">
-        <div
-          id="scrobbler"
-          class=`relative bottom-1 left-[${playPercent}%] h-4 w-4 bg-fg-lighter rounded-2xl`
-        >
-        </div>
-      </div>
-      <div class="flex justify-between text-sm mt-1">
-        <span id="playPositon" class="text-fg-lighter">{playPositon}</span>
-        <span id="listenTime" class="text-fg-lighter">{playLength}</span>
-      </div>
-    </div>
-
-    <div class="flex gap-4 mt-4 mx-8 items-center place-content-between">
-      <a href="/" aria-label="home"
-        ><Icon name="fa7-solid:house" class="h-6 w-6 mb-1 cursor-pointer" /></a
-      >
-
-      <div class="flex gap-4 items-center justify-center">
-        <Icon
-          id="back"
-          name="fa7-solid:backward-step"
-          class="h-8 w-8 cursor-pointer"
-        />
-        {
-          isPlaying ? (
-            <Icon
-              id="play"
-              name="fa7-solid:circle-pause"
-              class="h-12 w-12 cursor-pointer"
-            />
-          ) : (
-            <Icon
-              id="play"
-              name="fa7-solid:circle-play"
-              class="h-12 w-12 cursor-pointer"
-            />
-          )
-        }
-
-        <Icon
-          id="skip"
-          name="fa7-solid:forward-step"
-          class="h-8 w-8 cursor-pointer"
-        />
-      </div>
-
-      <Icon
-        id="queue"
-        name="fa7-solid:bars-staggered"
-        class="h-6 w-6 mb-1 cursor-pointer"
-      />
-    </div>
-  </div>
-</section>
diff --git a/src/components/Song.astro b/src/components/Song.astro
deleted file mode 100644
index 234b680..0000000
--- a/src/components/Song.astro
+++ /dev/null
@@ -1,41 +0,0 @@
----
-interface Props {
-  title: string;
-  slug?: string;
-  index: number;
-  time?: string;
-  id?: string;
-}
-
-const { title, slug, index, time, id } = Astro.props as Props;
----
-
-<li class="p-2 border-card border-b-2 last:border-0" id={id}>
-  {
-    slug ? (
-      <a href={slug} class="flex flex-row items-center justify-between group">
-        <span class="w-8 font-mono text-fg-lighter mr-4">{index}</span>
-
-        <span class="grow underline underline-offset-4 decoration-dashed hover:decoration-solid hover:text-special transition-all ease-in-out duration-200">
-          {title}
-        </span>
-
-        {time && (
-          <span class="text-fg-lighter text-sm ml-4 shrink-0">{time}</span>
-        )}
-      </a>
-    ) : (
-      <div class="flex flex-row items-center justify-between group cursor-pointer">
-        <span class="w-8 font-mono text-fg-lighter mr-4">{index}</span>
-
-        <span class="grow underline underline-offset-4 decoration-dashed hover:decoration-solid hover:text-special transition-all ease-in-out duration-200">
-          {title}
-        </span>
-
-        {time && (
-          <span class="text-fg-lighter text-sm ml-4 shrink-0">{time}</span>
-        )}
-      </div>
-    )
-  }
-</li>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 89d076d..85134b3 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -16,9 +16,7 @@ const props = Astro.props;
     <BaseHead {...props} />
   </head>
 
-  <body
-    class="bg-bg text-fg min-h-screen flex flex-col items-center justify-center"
-  >
+  <body class="bg-bg text-fg flex flex-col items-center w-6xl mx-auto">
     <slot />
   </body>
 </html>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index bc170d4..b8ecbc1 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -92,7 +92,7 @@ const nextSlug = posts[posts.indexOf(post) + 1]?.id || null;
       document.documentElement.scrollHeight - window.innerHeight;
     const scrollPercent = (scrollTop / scrollHeight) * 100;
 
-    const totalSeconds = ((scrollPercent / 100) * readTime) * 60;
+    const totalSeconds = (scrollPercent / 100) * readTime * 60;
 
     const currentMin = Math.floor(totalSeconds / 60);
     const currentSec = Math.floor(totalSeconds % 60);
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6d54e30..a0121ac 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,10 @@
 ---
 import { getCollection } from "astro:content";
 import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
+import me from "@assets/me.webp";
 
 import Base from "@layouts/Base.astro";
-import MusicPlayer from "@components/MusicPlayer.astro";
-import Song from "@components/Song.astro";
 
 const posts = await getCollection("blog", ({ data }) => {
   return !data.draft && !data.archived;
@@ -18,153 +18,62 @@ import { SITE_TITLES, SITE_DESCRIPTIONS } from "@lib/consts";
   description={SITE_DESCRIPTIONS.index}
   image="/index.png"
 >
-  <div
-    class="flex md:flex-row flex-col items-start px-6 gap-24 mt-18 mb-18 md:my-0"
-  >
-    <MusicPlayer
-      nowPlaying="nix"
-      playPercent={21}
-      playPositon="0:21"
-      playLength="1:00"
-    />
-
-    <section class="flex flex-col gap-8 w-full md:w-md">
-      <div>
-        <h2 class="text-xl">Up next</h2>
-        <ul class="flex flex-col mt-4">
-          {
-            posts
-              .slice(0, 3)
-              .entries()
-              .map(([i, post]) => (
-                <Song
-                  index={i + 1}
-                  title={post.data.title}
-                  slug={`/blog/${post.id}`}
-                  time={`${post.data.readTime} mins`}
-                />
-              ))
-          }
-        </ul>
-      </div>
-
-      <div>
-        <h2 class="text-xl">Playlists</h2>
-        <ul class="flex flex-col mt-4">
-          <li class="p-2 border-card border-b-2 last:border-0">
-            <a
-              class="hover:decoration-solid underline underline-offset-4 decoration-dashed hover:text-special transition-all ease-in-out duration-200"
-              href="/blog">Blog</a
-            >
-          </li>
-          <li class="p-2 border-card border-b-2 last:border-0">
-            <a
-              class="hover:decoration-solid underline underline-offset-4 decoration-dashed hover:text-special transition-all ease-in-out duration-200"
-              href="/projects">Projects</a
-            >
-          </li>
-          <li class="p-2 border-card border-b-2 last:border-0">
-            <a
-              class="hover:decoration-solid underline underline-offset-4 decoration-dashed hover:text-special transition-all ease-in-out duration-200"
-              href="/friends">Friends</a
-            >
-          </li>
-        </ul>
+  <div class="flex flex-col items-start gap-6 w-full">
+    <div class="flex flex-row pt-20 w-full">
+      <Image
+        id="player-image"
+        src={me}
+        alt="isabel roses"
+        width={250}
+        height={250}
+        loading="eager"
+      />
+      <div class="bg-card flex-2 p-4">
+        I am currently studying computer science, as a third year student at
+        Aberystwyth University. A significant amount of my time goes into being
+        a <a
+          href="https://github.com/NixOS/org/blob/main/doc/nixpkgs-committers.md#nixpkgs-committers">Nixpkgs
+          committer</a>,
+        where I help maintain the Nixpkgs repository.
       </div>
+      <div id="listening" class="flex items-center justify-center bg-card flex-1 p-4 text-shadow-sm">listening to nwo</div>
+    </div>
 
-      <div>
-        <h2 class="text-xl">Share</h2>
-        <ul class="flex flex-row mt-4 gap-4">
-          <li>
-            <a rel="me noreferrer" href="/feed.xml" aria-label="rss feed">
-              <Icon name="fa7-solid:rss" class="share-icon" />
-            </a>
-          </li>
-          <li>
-            <a
-              rel="me noreferrer"
-              target="_blank"
-              href="https://github.com/isabelroses"
-              aria-label="GitHub"
-            >
-              <Icon name="fa7-brands:github" class="share-icon" />
-            </a>
-          </li>
-          <li>
-            <a
-              rel="me noreferrer"
-              target="_blank"
-              href="https://akko.isabelroses.com/@isabel"
-              aria-label="mastodon"
-            >
-              <Icon name="fa7-brands:mastodon" class="share-icon" />
-            </a>
-          </li>
-          <li>
-            <a
-              rel="me noreferrer"
-              target="_blank"
-              href="https://bsky.app/profile/did:plc:qxichs7jsycphrsmbujwqbfb"
-              aria-label="bluesky"
-            >
-              <Icon name="fa7-brands:bluesky" class="share-icon" />
-            </a>
-          </li>
-          <li>
-            <a
-              rel="me noreferrer"
-              target="_blank"
-              href="/api/discord"
-              aria-label="Discord"
-            >
-              <Icon name="fa7-brands:discord" class="share-icon" />
-            </a>
-          </li>
-          <li>
-            <a
-              rel="me noreferrer"
-              target="_blank"
-              href="mailto:isabel@isabelroses.com"
-              aria-label="email"
-            >
-              <Icon name="fa7-solid:envelope" class="share-icon" />
-            </a>
-          </li>
-          <li>
-            <a
-              rel="me noreferrer"
-              href="https://ko-fi.com/isabelroses"
-              aria-label="Ko-fi"
-            >
-              <svg
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-                class="share-icon"
-              >
-                <path
-                  d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"
-                ></path>
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div>
-        <h2 class="text-xl">Settings</h2>
-        <form name="themes" id="form-themes" class="mt-4">
-          <select name="themes" id="themes" aria-label="Change theme">
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-            <option value="catppuccin_mocha">Catppuccin Mocha</option>
-            <option value="catppuccin_macchiato">Catppuccin Macchiato</option>
-            <option value="catppuccin_frappe">Catppuccin Frappé</option>
-            <option value="catppuccin_latte">Catppuccin Latte</option>
-            <option value="evergarden">Evergarden</option>
-            <option value="cuddlefish">Cuddlefish</option>
-          </select>
-        </form>
-      </div>
-    </section>
+    <div class="flex flex-row pt-20 w-full">
+      <div class="bg-card flex-1">description type shit</div>
+      <div class="bg-card flex-1">description type shit</div>
+    </div>
   </div>
 </Base>
+
+<script>
+  async function getCoverArtUrl(recordingMbId) {
+    const base = 'https://musicbrainz.org/ws/2';
+    const headers = {
+      'Accept': 'application/json',
+      'User-Agent': 'isabelroses.com'
+    };
+
+    const recUrl = `${base}/recording/${recordingMbId}?fmt=json&inc=releases`;
+    const recResp = await fetch(recUrl, { headers });
+    if (!recResp.ok) {
+      throw new Error(`Failed to fetch recording: ${recResp.status}`);
+    }
+    const recData = await recResp.json();
+
+    if (!Array.isArray(recData.releases) || recData.releases.length === 0) {
+      throw new Error('No releases found for this recording');
+    }
+
+    const releaseMbId = recData.releases[0].id;
+    const coverArtUrl = `https://coverartarchive.org/release/${releaseMbId}/front`;
+    return coverArtUrl;
+  }
+
+
+  const nowPlaying = (await fetch("https://pds.tgirl.cloud/xrpc/com.atproto.repo.getRecord?repo=did:plc:qxichs7jsycphrsmbujwqbfb&collection=fm.teal.alpha.actor.status&rkey=self").then(data => data.json())).value.item;
+  const listeningNow = document.getElementById("listening");
+  listeningNow.textContent = `Now listening to ${nowPlaying.trackName}`;
+  const songImg = nowPlaying.releaseMbId ? `https://coverartarchive.org/release/${nowPlaying.releaseMbId}/front` : await getCoverArtUrl(nowPlaying.recordingMbId);
+  listeningNow.style.backgroundImage = `url("${songImg}")`;
+</script>