diff --git a/pages/index.vue b/pages/index.vue
index 22e9243..e7245a9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -79,7 +79,7 @@
       <div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">
         <h2 class="text-2xl font-semibold text-gray-900 mb-4 text-center">Previous Sermons</h2>
         <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
-        <div class="flex gap-3">
+        <div class="flex flex-col sm:flex-row gap-3">
           <select
             v-model="selectedSermonSlug"
             class="flex-1 px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base"
@@ -92,7 +92,7 @@
           <button
             @click="navigateToSermon"
             :disabled="!selectedSermonSlug"
-            class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium whitespace-nowrap"
+            class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium sm:whitespace-nowrap"
           >
             View
           </button>