diff --git a/resources/js/Pages/Services/Edit.vue b/resources/js/Pages/Services/Edit.vue
index 8a61352..3e3b510 100644
--- a/resources/js/Pages/Services/Edit.vue
+++ b/resources/js/Pages/Services/Edit.vue
@@ -5,6 +5,7 @@ import { ref, computed } from 'vue'
 import InformationBlock from '@/Components/Blocks/InformationBlock.vue'
 import ModerationBlock from '@/Components/Blocks/ModerationBlock.vue'
 import SongsBlock from '@/Components/Blocks/SongsBlock.vue'
+import SermonBlock from '@/Components/Blocks/SermonBlock.vue'
 
 const props = defineProps({
     service: {
@@ -59,6 +60,10 @@ function goBack() {
     router.get(route('services.index'))
 }
 
+function refreshPage() {
+    router.reload({ preserveScroll: true })
+}
+
 /* ── Block definitions ───────────────────────────────────── */
 const blocks = [
     {
@@ -261,6 +266,13 @@ function blockBadgeLabel(key) {
                                         @slides-updated="refreshPage"
                                     />
 
+                                    <SermonBlock
+                                        v-else-if="block.key === 'sermon'"
+                                        :service-id="service.id"
+                                        :slides="sermonSlides"
+                                        @slides-updated="refreshPage"
+                                    />
+
                                     <SongsBlock
                                         v-else-if="block.key === 'songs'"
                                         :service-songs="serviceSongs"