diff --git a/lyrics/static/lyrics/style.css b/lyrics/static/lyrics/style.css
index 718267f..724bb12 100644
--- a/lyrics/static/lyrics/style.css
+++ b/lyrics/static/lyrics/style.css
@@ -7,6 +7,10 @@ video {
 	width: 100%;
 } */
 
+table {
+	border-spacing: 0;
+}
+
 .info {
 	background-color: aqua;
 }
@@ -20,7 +24,6 @@ video {
 	min-width: 400px;
 }
 #word_overrides {
-	min-width: 400px;
 	max-width: 800px;
 }
 #lyrics_output_outer, #arrangement_output_outer {
@@ -52,6 +55,25 @@ video {
 	max-width: 48px;
 }
 
+.grid-container {
+	display: grid;
+	gap: 5px;
+	padding: 0px;
+}
+#div_lyrics_input_jp {
+	grid-column: 1;
+}
+#div_lyrics_input_tl {
+	grid-column: 2;
+}
+#lyrics_input h3 {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+#lyrics_input textarea {
+	line-height: 1.2;
+}
+
 .flex-container {
 	display: flex;
 	flex-flow: wrap;
@@ -60,10 +82,10 @@ video {
 
 .flex-container > div {
 	background-color: aqua;
-	margin: 10px;
-	border-radius: 10px;
-	padding: 20px;
-	padding-top: 10px;
+	margin: 4px;
+	border-radius: 8px;
+	padding: 12px;
+	padding-top: 8px;
 }
 
 .flex-container > div > h2 {
diff --git a/lyrics/templates/lyrics/index.html b/lyrics/templates/lyrics/index.html
index 5621c0a..47c57a7 100644
--- a/lyrics/templates/lyrics/index.html
+++ b/lyrics/templates/lyrics/index.html
@@ -58,8 +58,8 @@
 						<td><label for="word_replacements_post"><details><summary>Word Overrides</summary>With <i><b>Word Overrides</b></i> you can specify a list of word tokens to replace the readings of <i>after</i> the tokenizer has decided that exact sequence is a word. The format is <code>word[|old_reading]|my_reading</code>, e.g. <code>私|わたし</code> to replace any instance of 私, or <code>主|ぬし|しゅ</code> to only replace instances of 主 that have been parsed as ぬし (e.g. it would leave <ruby>主<rt>あるじ</rt></ruby> alone.)</details></label></td>
 					</tr>
 					<tr>
-						<td><textarea id="word_replacements_pre" name="word_replacements_pre" rows="4" cols="30" placeholder="hello|おはよう"></textarea></td>
-						<td><textarea id="word_replacements_post" name="word_replacements_post" rows="4" cols="30" placeholder="私|わたくし|わたし&#10;主|しゅ"></textarea></td>
+						<td><textarea id="word_replacements_pre" name="word_replacements_pre" rows="4" cols="20" placeholder="hello|おはよう"></textarea></td>
+						<td><textarea id="word_replacements_post" name="word_replacements_post" rows="4" cols="20" placeholder="私|わたくし|わたし&#10;主|しゅ"></textarea></td>
 					</tr>
 				</table>
 			</div>
@@ -72,10 +72,16 @@
 			<!-- Lyrics input -->
 			<div id="lyrics_input">
 				<h2>Lyrics Input</h2>
-				<h3>Japanese</h3>
-				<textarea id="lyrics_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;おはよう世界"></textarea>
-				<h3>Translation</h3>
-				<textarea id="lyrics_tl_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;Hello world"></textarea>
+				<div class="grid-container">
+					<div id="div_lyrics_input_jp">
+						<h3>Japanese</h3>
+						<textarea id="lyrics_input_textarea" rows="20" cols="40" placeholder="[v1]&#10;おはよう世界"></textarea>
+					</div>
+					<div id="div_lyrics_input_tl">
+						<h3>Translation</h3>
+						<textarea id="lyrics_tl_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;Hello world"></textarea>
+					</div>
+				</div>
 			</div>
 			<!-- Lyrics output -->
 			<div id="lyrics_output_outer">
@@ -101,10 +107,14 @@
 			<div id="syllable_timer">
 				<h2>Syllable Timer</h2>
 				This will have a metronome and a button for tapping out the rhythm of a given line.<br>
-				<span>
-					<input type="number" id="metronome_bpm" min="10" max="500" value="120" maxlength="4">
+				<div>
+					<input type="number" id="metronome_bpm" min="10" max="500" value="120">
 					<label for="metronome_bpm">BPM</label>
-				</span>
+				</div>
+				<div>
+					<input type="number" id="beats_per_bar" min="1" max="32" value="4">
+					<label for="beats_per_bar">Beats per bar</label>
+				</div>
 				<button id="btn_metronome">Metronome</button>
 				<button id="btn_syllable">Syllable</button>
 			</div>