diff --git a/pages/index.vue b/pages/index.vue
index edc42a8..5e28ac8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -57,16 +57,24 @@
       <!-- Previous Sermons Dropdown -->
       <div v-if="previousSermons.length > 0" class="mt-12 max-w-2xl mx-auto">
         <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
-        <select
-          v-model="selectedSermonSlug"
-          @change="navigateToSermon"
-          class="block w-full 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"
-        >
-          <option value="">-- Select a previous sermon --</option>
-          <option v-for="sermon in previousSermons" :key="sermon.id" :value="sermon.slug">
-            {{ sermon.title }} ({{ formatDate(sermon.date) }})
-          </option>
-        </select>
+        <div class="flex 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"
+          >
+            <option value="">-- Select a previous sermon --</option>
+            <option v-for="sermon in previousSermons" :key="sermon.id" :value="sermon.slug">
+              {{ sermon.title }} ({{ formatDate(sermon.date) }})
+            </option>
+          </select>
+          <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"
+          >
+            View
+          </button>
+        </div>
       </div>
 
       <!-- Empty State -->
@@ -82,34 +90,36 @@
 const { data: authData } = await useFetch('/api/auth/verify')
 const isAuthenticated = computed(() => authData.value?.authenticated || false)
 
-// Fetch non-archived sermons only
-const { data: allSermons } = await useFetch('/api/sermons?includeArchived=false')
+// Fetch non-archived sermons for the most recent sermon
+const { data: activeSermons } = await useFetch('/api/sermons?includeArchived=false')
+
+// Fetch archived sermons for the previous sermons dropdown
+const { data: archivedSermons } = await useFetch('/api/sermons?includeArchived=true')
 
 const selectedSermonSlug = ref('')
 
-// Get most recent sermon
+// Get most recent non-archived sermon
 const mostRecentSermon = computed(() => {
-  if (!allSermons.value || allSermons.value.length === 0) return null
-  return allSermons.value[0]
+  if (!activeSermons.value || activeSermons.value.length === 0) return null
+  return activeSermons.value[0]
 })
 
-// Get all previous sermons (excluding the most recent)
+// Get archived sermons only for the previous sermons dropdown
 const previousSermons = computed(() => {
-  if (!allSermons.value || allSermons.value.length <= 1) return []
-  return allSermons.value.slice(1)
+  if (!archivedSermons.value) return []
+  return archivedSermons.value.filter((s: any) => s.archived === 1)
 })
 
 // Check if most recent sermon is today
 const sermonHeading = computed(() => {
   if (!mostRecentSermon.value) return 'Recent Sermon'
   
-  const sermonDate = new Date(mostRecentSermon.value.date)
+  const sermonDate = new Date(mostRecentSermon.value.date + 'T00:00:00')
   const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  sermonDate.setHours(0, 0, 0, 0)
   
-  // Compare dates (ignoring time)
-  const isToday = sermonDate.getFullYear() === today.getFullYear() &&
-                  sermonDate.getMonth() === today.getMonth() &&
-                  sermonDate.getDate() === today.getDate()
+  const isToday = sermonDate.getTime() === today.getTime()
   
   return isToday ? "Today's Sermon" : 'Most Recent Sermon'
 })