diff --git a/lyrics/static/lyrics/input.js b/lyrics/static/lyrics/input.js
index ea1dc8a..399e593 100644
--- a/lyrics/static/lyrics/input.js
+++ b/lyrics/static/lyrics/input.js
@@ -170,3 +170,51 @@ update_output_styles();
 
 document.getElementById('btn_syllable').addEventListener('click', () => {console.log(`Syllable button clicked! ${performance.now()}ms`)});
 document.getElementById('btn_metronome').addEventListener('click', () => {console.log(`Metronome button clicked! ${performance.now()}ms`)});
+
+function save_song() {
+	const data = {
+		song_title: document.getElementById('song_title').value,
+		song_title_en: document.getElementById('song_title_en').value,
+		song_lyricist: document.getElementById('song_lyricist').value,
+		song_lyricist_en: document.getElementById('song_lyricist_en').value,
+		song_composer: document.getElementById('song_composer').value,
+		song_composer_en: document.getElementById('song_composer_en').value,
+		string_replacements: string_replacements_element.value,
+		word_overrides: word_overrides_element.value,
+		lyrics: lyrics_input_element.value,
+		lyrics_translation: lyrics_tl_input_element.value,
+		arrangement: arrangement_input_element.value,
+	};
+
+	const a = document.createElement("a");
+	a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], {
+		type: "application/json", //"text/plain"
+	}));
+	a.setAttribute("download", `${data.song_title_en}.json`);
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+}
+document.getElementById('btn_save_song').addEventListener('click', save_song);
+
+function load_song(data) {
+	document.getElementById('song_title').value = data.song_title ?? '';
+	document.getElementById('song_title_en').value = data.song_title_en ?? '';
+	document.getElementById('song_lyricist').value = data.song_lyricist ?? '';
+	document.getElementById('song_lyricist_en').value = data.song_lyricist_en ?? '';
+	document.getElementById('song_composer').value = data.song_composer ?? '';
+	document.getElementById('song_composer_en').value = data.song_composer_en ?? '';
+	string_replacements_element.value = data.string_replacements ?? '';
+	word_overrides_element.value = data.word_overrides ?? '';
+	lyrics_input_element.value = data.lyrics ?? '';
+	lyrics_tl_input_element.value = data.lyrics_translation ?? '';
+	arrangement_input_element.value = data.arrangement ?? '';
+	lyrics_input_updated()
+}
+document.getElementById('load_song').addEventListener('change', event => {
+	console.log('Attempting to load json file');
+	const file = event.target.files[0];
+	const reader = new FileReader();
+	reader.onload = () => {load_song(JSON.parse(reader.result))};
+	reader.readAsText(file);
+}, false)
diff --git a/lyrics/templates/lyrics/index.html b/lyrics/templates/lyrics/index.html
index 6ea3f2d..f43e502 100644
--- a/lyrics/templates/lyrics/index.html
+++ b/lyrics/templates/lyrics/index.html
@@ -17,23 +17,31 @@
 				<!-- TODO: split these into japanese and english fields -->
 				<table>
 					<tr>
-						<td><label for="song_title">曲名／Song title:</label></td>
-						<td><input type="text" id="song_title" placeholder="曲名／Song title"></td>
+						<td><label for="song_title">曲名</label></td>
+						<td><input type="text" id="song_title" placeholder="曲名"></td>
+						<td><label for="song_title_en">Song title:</label></td>
+						<td><input type="text" id="song_title_en" placeholder="Song title"></td>
 					</tr>
 					<tr>
-						<td><label for="song_lyricist">作詞／Song lyricist:</label></td>
-						<td><input type="text" id="song_lyricist" placeholder="作詞／Song lyricist"></td>
+						<td><label for="song_lyricist">作詞</label></td>
+						<td><input type="text" id="song_lyricist" placeholder="作詞"></td>
+						<td><label for="song_lyricist_en">Song lyricist:</label></td>
+						<td><input type="text" id="song_lyricist_en" placeholder="Song lyricist"></td>
 					</tr>
 					<tr>
-						<td><label for="song_composer">作曲／Song composer:</label></td>
-						<td><input type="text" id="song_composer" placeholder="作曲／Song composer"></td>
+						<td><label for="song_composer">作曲</label></td>
+						<td><input type="text" id="song_composer" placeholder="作曲"></td>
+						<td><label for="song_composer_en">Song composer:</label></td>
+						<td><input type="text" id="song_composer_en" placeholder="Song composer"></td>
 					</tr>
 				</table>
 
 				<!-- TODO: decide if this gets its own div -->
 				<br><h2>Save/Load</h2>
-				<button>Save Song</button>
-				<button>Load Song</button>
+				<button id="btn_save_song">Save Song (download)</button>
+				<!-- <button id="btn_load_song">Load Song</button> -->
+				<label for="load_song">Load Song (upload)</label>
+				<input id="load_song" type="file" accept="application/json"/>
 			</div>
 			<!-- Word Overrides -->
 			<div id="word_overrides">