diff --git a/public_html/index.html b/public_html/index.html
index b3c06d6..c4a4c55 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -48,10 +48,10 @@
 		-->
 		<aside>
 			<section class="findme">
-			<span class="line1">find me</span>
+			<span class="line1">please also see</span>
 				<ul>
-					<li class="line2"><a href="">on <em>bandcamp</em></a></li>
-					<li class="line3"><a href="">on <em>lorem ipsum</em></a></li>
+					<li class="line2"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
+					<li class="line3"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
 				</ul>
 			<span class="line4"><a href="">more places »</a></span>
 			</section>
@@ -63,22 +63,38 @@
 		<div class="column">
 	
 			<section class="box" id="music">
-				<header class="blurgreen headlineshadow"><h1>electronic <em>music</em><img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
-				<div class="opaque whitebg">
-					<h2><span class="halfbubble blurgreen"></span>albums</h2>
-					<!--<article>
-						<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - dreamshifter" /></a>
-						lastfuture –
-						<h1>dreamshifter</h1>
-					</article>
-					<article>
-						<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - reverse kill" /></a>
-						lastfuture –
-						<h1>reverse kill</h1>
-					</article>
-					-->
-					<div style="height: 200px;"></div>
-				</div>
+				<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
+				<article class="opaque whitebg album">
+					<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
+						<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
+						<h2>lastfuture <em>misinterpreter</em></h2>
+						<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
+					</a>
+				</article>
+				<div class="clearfix"></div>
+				<article class="opaque whitebg album">
+					<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
+						<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.jpg" />
+						<h2>lastfuture <em>signal to noise</em></h2>
+						<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
+					</a>
+				</article>
+				<div class="clearfix"></div>
+				<article class="opaque whitebg album">
+					<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
+						<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.jpg" />
+						<h2>lastfuture <em>dreamshifter</em></h2>
+						<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
+					</a>
+				</article>
+				<div class="clearfix"></div>
+				<article class="opaque whitebg album">
+					<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
+						<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.jpg" />
+						<h2>lastfuture <em>reverse kill</em></h2>
+						<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
+					</a>
+				</article>
 			</section>
 			
 			<section class="box" id="experiment">
@@ -94,7 +110,7 @@
 		<div class="column">
 		
 			<section class="box invertedbox" id="recent">
-				<header class="headlineshadow whitebg"><h1>most recent <em>albums</em></h1></header>
+				<header class="headlineshadow whitebg"><h1><em>highlighted</em> tracks</h1></header>
 				<div class="opaque blurgreen">
 					<h2 class="headlineshadow"><em>track</em></h2>
 					
diff --git a/public_html/style.css b/public_html/style.css
index 9d9fde4..7dabbca 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -150,6 +150,8 @@ p {text-wrap: pretty;}
 	--text-color: #333;
 	--link-color: #03f;
 	--link-color-hover: #69f;
+	--button-color: #fcd700;
+	--button-color-hover: #000000;
 	--highlight-color: #fcd700;
 	--placeholder-color: #a9a9a9;
 }
@@ -185,7 +187,6 @@ body {
 	background-repeat: no-repeat;
 	background-position: top left;
 	background-attachment: fixed;
-	color: black;
 }
 
 a {
@@ -269,6 +270,57 @@ section.box#experiment header .icon {
 	margin-top: -2.5rem;
 }
 
+/* music */
+
+article.album {
+	height: auto;
+	margin-top: 0.75rem;
+}
+article.album a {
+	display: block;
+	width: 100%;
+	height: 120px;
+	color: var(--text-color);
+}
+article.album h2 {
+	display: inline-block;
+	margin-top: 1rem;
+	font-size: 1.1rem;
+}
+article.album h2 em {
+	display: block;
+	font-style: normal;
+	font-weight: 600;
+	font-size: 1.2em;
+}
+article.album .listenbuy {
+	color: white;
+	font-size: 1.1em;
+	display: inline-block;
+	margin-top: 0.75em;
+	margin-left: -0.25em;
+	padding: 0.25em 1em;
+	background-color: transparent;
+	border-radius: 2em;
+	transition: background-color 0.25s, margin 0.25s;
+}
+article.album a:hover .listenbuy {
+	margin-top: 1em;
+	background-color: var(--button-color);
+}
+article.album a .listenbuy:hover {
+	background-color: var(--button-color-hover);
+}
+img.albumcover {
+	width: auto;
+	height: 100%;
+	float: left;
+	margin-right: 1.5rem;
+}
+article.album a:hover {
+	height: 160px;
+}
+
 /* icosahedron */
 
 #icosahedron-container {