diff --git a/src/assets/haydn-piano-sonata-6-slice00.musicxml b/public/scores/haydn-piano-sonata-6-slice00.musicxml
similarity index 100%
rename from src/assets/haydn-piano-sonata-6-slice00.musicxml
rename to public/scores/haydn-piano-sonata-6-slice00.musicxml
diff --git a/src/assets/haydn-piano-sonata-6-slice01.musicxml b/public/scores/haydn-piano-sonata-6-slice01.musicxml
similarity index 100%
rename from src/assets/haydn-piano-sonata-6-slice01.musicxml
rename to public/scores/haydn-piano-sonata-6-slice01.musicxml
diff --git a/src/components/Score/index.tsx b/src/components/Score/index.tsx
new file mode 100644
index 0000000..e06c922
--- /dev/null
+++ b/src/components/Score/index.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface ScoreProps {
+	id: string;
+	alt: string;
+}
+
+export const Score: React.FC<ScoreProps> = ({
+	id,
+	alt,
+}) => {
+	return (
+		<a href={`scores/${id}.musicxml`}>
+			<img src={`scores/${id}.svg`} alt={alt} />
+		</a>
+	)
+};
diff --git a/src/pages/ch20-trills.mdx b/src/pages/ch20-trills.mdx
index 4a3b65b..96a4adf 100644
--- a/src/pages/ch20-trills.mdx
+++ b/src/pages/ch20-trills.mdx
@@ -3,10 +3,15 @@ title: Trills
 layout: ../layouts/Layout.astro
 ---
 
+import {Score} from '../components/Score';
+
 I have attended the session where I was supposed to demonstrate the trills I had been working for the past few days. I
 started with the third movement of Haydn Piano Sonata No. 6:
 
-<img src="/api/assets/haydn-piano-sonata-6-slice01.svg" alt="" />
+<Score
+	id="haydn-piano-sonata-6-slice01"
+	alt="Haydn Piano Sonata No. 6, measures 1-3"
+/>
 
 Sir demonstrated to me where the "Adagio" is meant for, as the pulse is made out of quarter notes. He gestured to me
 the 4/4 time signature and said the grouping is made out of 6 notes--"imagine the pulse is made out of sextuplets".
diff --git a/src/pages/api/assets/[asset].svg.ts b/src/pages/scores/[asset].svg.ts
similarity index 93%
rename from src/pages/api/assets/[asset].svg.ts
rename to src/pages/scores/[asset].svg.ts
index a51565a..bb7e071 100644
--- a/src/pages/api/assets/[asset].svg.ts
+++ b/src/pages/scores/[asset].svg.ts
@@ -69,9 +69,9 @@ const processOutput = (xmlData: string) => {
 };
 
 export const GET: APIRoute = async ({ params }) => {
+	console.log('asdfasdf');
 	const verovioModule = await createVerovioModule();
-	verovioModule.FS_createDataFile('', 'bravura', 'asdfasdf', true, false, true);
-	const score = await readFile(`src/assets/${params.asset}.musicxml`, 'utf-8');
+	const score = await readFile(`public/scores/${params.asset}.musicxml`, 'utf-8');
 	const verovioToolkit = new VerovioToolkit(verovioModule);
 	const filteredScore = filter(score);
 	const isSuccessful = verovioToolkit.loadData(filteredScore);
@@ -107,7 +107,7 @@ export const GET: APIRoute = async ({ params }) => {
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-	const files = await readdir('src/assets');
+	const files = await readdir('public/scores');
 	return files
 		.filter((f) => f.endsWith('.musicxml'))
 		.map((f) => ({
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 6e16888..26198f8 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -3,7 +3,7 @@ export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		fontFamily: {
-			body: ['Century', 'serif'],
+			body: ['Times New Roman', 'Times', 'serif'],
 		},
 		extend: {
 		},