diff --git a/calendarium/templates/calendar.html b/calendarium/templates/calendar.html
index e9e8060..e49304c 100644
--- a/calendarium/templates/calendar.html
+++ b/calendarium/templates/calendar.html
@@ -22,15 +22,16 @@
 	<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=previous_month.year month=previous_month.month %}" {% if previous_nofollow %}rel="nofollow"{% endif %}>&larr; {{ previous_month|date:"F" }}</a>
 	<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=next_month.year month=next_month.month %}" {% if next_nofollow %}rel="nofollow"{% endif %}>{{ next_month|date:"F" }} &rarr;</a>
 
-	<br>
-
-	<label class="tradition-label-with-badge" title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
-	<label class="tradition-label-with-badge" title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek <span class="status-badge">New</span></label>
-
-	<br>
-
-	<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
-	<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
+	<div class="toggle-row">
+		<div class="segmented-control">
+			<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
+			<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek<span class="status-badge">New</span></label>
+		</div>
+		<div class="segmented-control">
+			<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
+			<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
+		</div>
+	</div>
 {% endblock extra_nav %}
 
 {% block main %}
diff --git a/calendarium/templates/readings.html b/calendarium/templates/readings.html
index 7e10056..2cf35f1 100644
--- a/calendarium/templates/readings.html
+++ b/calendarium/templates/readings.html
@@ -23,15 +23,16 @@
 	<a class="cal-nav" href="{% url "index" %}">Today</a>
 	<a class="cal-nav" href="{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day %}" {% if next_nofollow %}rel="nofollow"{% endif %}>Next Day &rarr;</a>
 
-	<br>
-
-	<label class="tradition-label-with-badge" title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
-	<label class="tradition-label-with-badge" title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek <span class="status-badge">New</span></label>
-
-	<br>
-
-	<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
-	<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
+	<div class="toggle-row">
+		<div class="segmented-control">
+			<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %}>Slavic</label>
+			<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %}>Greek<span class="status-badge">New</span></label>
+		</div>
+		<div class="segmented-control">
+			<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %}>Gregorian</label>
+			<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %}>Julian</label>
+		</div>
+	</div>
 {% endblock %}
 
 {% block main %}
@@ -59,6 +60,24 @@ <h2>Service Notes</h2>
 		</section>
 		{% endif %}
 
+		{% if day.readings %}
+		<section class="scripture-list">
+			<h2>Scripture Readings</h2>
+			<ul>
+				{% for reading in day.readings %}
+				<li>
+					<a href="#reading-{{ reading.id }}">
+						{% filter widont %}
+						{{ reading.pericope.display }}
+						({{ reading.source }}{% if reading.desc %}, {{ reading.desc }}{% endif %})
+						{% endfilter %}
+					</a>
+				</li>
+				{% endfor %}
+			</ul>
+		</section>
+		{% endif %}
+
 		{% if day.saints %}
 		<section class="commemorations">
 			<h2>Commemorations</h2>
@@ -71,6 +90,7 @@ <h2>Commemorations</h2>
 		{% endif %}
 	</header>
 
+	<div class="readings-columns">
 	<section class="readings">
 		{% if day.language == "en" %}
 		<h1>Scripture Readings</h1>
@@ -92,7 +112,7 @@ <h1>Scripture Readings&nbsp;({{ translation_label }})</h1>
 		{% endif %}
 
 		{% for reading in day.readings %}
-		<article class="passage">
+		<article class="passage" id="reading-{{ reading.id }}">
 			<h2>
 				{% filter widont %}
 				{{ reading.pericope.display }}
@@ -123,6 +143,7 @@ <h2>{{ reading.title|widont }}</h2>
 			{% endfor %}
 		{% endif %}
 	</section>
+	</div>
 {% endblock %}
 
 {% block scripts %}
diff --git a/orthocal/static/main.css b/orthocal/static/main.css
index 0e35027..0bf86fe 100644
--- a/orthocal/static/main.css
+++ b/orthocal/static/main.css
@@ -124,7 +124,11 @@ main#orthocal > header h1 span {
     text-decoration: underline;
 }
 
-section.readings {
+.readings-columns {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 3em;
+	align-items: start;
 	border-top: 3px solid #ddd;
 	padding-top: 1.5em;
 	margin-top: 1.5em;
@@ -132,6 +136,12 @@ section.readings {
 section.readings h2 {
     color: #a00;
 }
+@media (max-width: 800px) {
+	.readings-columns {
+		grid-template-columns: 1fr;
+		gap: 0;
+	}
+}
 
 .fasting {
 	font-size: 1.4em;
@@ -170,13 +180,10 @@ section.readings h2 {
     padding-top: 1.5em;
     border-top: 5px solid #eee;
 }
-.commemorations li, .feasts li, .day > p {
+.commemorations li, .scripture-list li, .feasts li, .day > p {
     color: #555;
 }
 .passage {
-    columns: 3 20em;
-    column-gap: 2em;
-    column-rule: 1px solid #ddd;
     padding-top: 2em;
     widows: 3;
     orphans: 3;
@@ -207,13 +214,49 @@ section.readings h2 {
 label {
     font-size: 0.75em;
 }
-.tradition-label-with-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3em;
+.toggle-row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 1em;
+	flex-wrap: wrap;
+	margin: 0.5em 0;
+}
+.segmented-control {
+	display: inline-flex;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	overflow: hidden;
 }
-label input[type="radio"] {
-    accent-color: #888;
+.segmented-control label {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35em;
+	margin: 0;
+	padding: 3px 14px;
+	color: #666;
+	cursor: pointer;
+	transition-property: background-color, color;
+	transition-duration: 0.2s;
+}
+.segmented-control label:not(:last-child) {
+	border-right: 1px solid #ccc;
+}
+.segmented-control label:hover {
+	background-color: #eee;
+}
+.segmented-control input[type="radio"] {
+	position: absolute;
+	opacity: 0;
+	pointer-events: none;
+}
+.segmented-control label:has(input:checked) {
+	background-color: #a00;
+	color: #fff;
+}
+.segmented-control label:has(input:checked):hover {
+	background-color: #a00;
 }
 .status-badge {
 	display: inline-block;
@@ -228,14 +271,14 @@ label input[type="radio"] {
 	margin-left: 2px;
 	vertical-align: middle;
 }
-.service-notes ul, .commemorations ul, .feasts ul {
+.service-notes ul, .commemorations ul, .scripture-list ul, .feasts ul {
     text-align: center;
     margin: 0;
     padding: 0;
 	list-style-type: none;
 	text-wrap: balance;
 }
-.service-notes h2, .feasts h2, .commemorations h2 {
+.service-notes h2, .feasts h2, .commemorations h2, .scripture-list h2 {
     margin-bottom: 0em;
 	font-size: 1.2em;
 }
@@ -282,20 +325,20 @@ table.month tr:first-child th {
 	padding-bottom: 1em;
 }
 
-.commemorations li, .feasts li, .service-notes li {
+.commemorations li, .scripture-list li, .feasts li, .service-notes li {
 	display: inline;
     color: #a00;
 }
-.commemorations li + li:before, .feasts li + li:before {
+.commemorations li + li:before, .scripture-list li + li:before, .feasts li + li:before {
 	content: "●";
     color: black;
 	padding: 0.5em;
 }
-.commemorations li a {
+.commemorations li a, .scripture-list li a {
 	color: inherit;
 	text-decoration: none;
 }
-.commemorations li a:hover {
+.commemorations li a:hover, .scripture-list li a:hover {
 	text-decoration: underline;
 }
 
diff --git a/orthocal/static/print.css b/orthocal/static/print.css
index 0c71654..78b3fdf 100644
--- a/orthocal/static/print.css
+++ b/orthocal/static/print.css
@@ -36,8 +36,8 @@ table.month tr:first-child th {
     orphans: 2;
     column-rule: 0;
 }
-section.readings {
-    border: 0;
+.readings-columns {
+    border-top: 0;
 }
 main#orthocal > header h1 {
 	font-size: 200%;