diff --git a/public/css/custom.css b/public/css/custom.css
index d3860658c..59da1def7 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -1369,6 +1369,7 @@ table .align-items-center td span.badge {
     width: 135px;
     text-align: right;
 }
+
 .item-select-info-description, .item-select-info-name {
     width: 710px;
     display: block;
@@ -1408,6 +1409,7 @@ table .align-items-center td span.badge {
     margin-left: 45%;
 }
 /* Document Loading Finish */
+
 /* Custom File stype Start */
 .form-file {
     width: 100%;
diff --git a/resources/views/components/documents/show/recurring-message.blade.php b/resources/views/components/documents/show/recurring-message.blade.php
index d756debc8..04e36c01d 100644
--- a/resources/views/components/documents/show/recurring-message.blade.php
+++ b/resources/views/components/documents/show/recurring-message.blade.php
@@ -1,25 +1,21 @@
 @stack('recurring_message_start')
 @if (($recurring = $document->recurring) && ($next = $recurring->getNextRecurring()))
-    <div class="row mb-3">
+    <div class="row">
         <div class="col-sm-12">
-            <div class="media">
-                <div class="media-body">
-                    <div class="media-comment-text">
-                        <div class="d-flex">
-                            @stack('recurring_message_head_start')
-                                <h5 class="mt-0">{{ trans('recurring.recurring') }}</h5>
-                            @stack('recurring_message_head_end')
-                        </div>
-
-                        @stack('recurring_message_body_start')
-                            <p class="text-sm lh-160 mb-0">{{ trans('recurring.message', [
-                                'type' => mb_strtolower(trans_choice($textRecurringType, 1)),
-                                'date' => $next->format($date_format)
-                            ]) }}
-                            </p>
-                        @stack('recurring_message_body_end')
-                    </div>
+            <div class="alert alert-info fade show" role="alert">
+                <div class="d-flex">
+                    @stack('recurring_message_head_start')
+                        <h5 class="mt-0 text-white"><strong>{{ trans('recurring.recurring') }}</strong></h5>
+                    @stack('recurring_message_head_end')
                 </div>
+
+                @stack('recurring_message_body_start')
+                    <p class="text-sm lh-160 mb-0">{{ trans('recurring.message', [
+                        'type' => mb_strtolower(trans_choice($textRecurringType, 1)),
+                        'date' => $next->format($date_format)
+                    ]) }}
+                    </p>
+                @stack('recurring_message_body_end')
             </div>
         </div>
     </div>