diff --git a/app/Domain/Dashboard/Templates/show.blade.php b/app/Domain/Dashboard/Templates/show.blade.php
index 79145c26c..ea42350ba 100644
--- a/app/Domain/Dashboard/Templates/show.blade.php
+++ b/app/Domain/Dashboard/Templates/show.blade.php
@@ -424,18 +424,9 @@ class="fa fa-reply"></span> {{ __('links.reply') }}
                                 @if ($row->percentDone >= 100 && new \DateTime($row->editTo) < new \DateTime())
                                     @break
                                 @endif
-
-                                <x-global::content.card>
-
-                                    <div hx-trigger="load"
-                                         hx-indicator=".htmx-indicator"
-                                         hx-get="{{ BASE_URL }}/hx/tickets/milestones/showCard?milestoneId=<?=$row->id ?>">
-                                        <div class="htmx-indicator">
-                                                <?=$tpl->__("label.loading_milestone") ?>
-                                        </div>
-                                    </div>
-
-                                    </x-global::content.card>
+                                <x-tickets::milestone-card 
+                                    :milestone="$row"
+                                />
                             @endforeach
 
                         </div>
diff --git a/app/Domain/Reports/Templates/show.blade.php b/app/Domain/Reports/Templates/show.blade.php
index 19d44f8ef..375e712f9 100644
--- a/app/Domain/Reports/Templates/show.blade.php
+++ b/app/Domain/Reports/Templates/show.blade.php
@@ -164,49 +164,26 @@ class="mainSprintSelector"
                 <div class="row" id="milestoneProgressContainer">
                     <div class="col-md-12">
                         <h5 class="subtitle"><?=$tpl->__("headline.milestones") ?></h5>
-                        <ul class="sortableTicketList" >
-                            <?php
-                            if (count($tpl->get('milestones')) == 0) {
-                                echo"<div class='center'><br /><h4>" . $tpl->__("headlines.no_milestones") . "</h4>
-                                " . $tpl->__("text.milestones_help_organize_projects") . "<br /><br /><a href='" . BASE_URL . "/tickets/roadmap'>" . $tpl->__("links.goto_milestones") . "</a>";
-                            }
-                            ?>
-                            <?php foreach ($tpl->get('milestones') as $row) {
-
-                                ?>
-                                    <li class="ui-state-default" id="milestone_<?php echo $row->id; ?>" >
-                                        <div class="ticketBox fixed">
-
-                                            <div class="row">
-                                                <div class="col-md-12">
-                                                    <strong><a href="{{ BASE_URL }}/tickets/editMilestone/<?php echo $row->id;?>" class="milestoneModal"><?php $tpl->e($row->headline); ?></a></strong>
-                                                </div>
-                                            </div>
-                                            <div class="row">
-
-                                                <div class="col-md-7">
-                                                    <?=$tpl->__("label.due") ?>
-                                                    <?php echo format($row->editTo)->date( $tpl->__("text.no_date_defined")); ?>
-                                                </div>
-                                                <div class="col-md-5" style="text-align:right">
-                                                    <?=sprintf($tpl->__("text.percent_complete"), $row->percentDone)?>
-                                                </div>
-                                            </div>
-                                            <div class="row">
-                                                <div class="col-md-12">
-                                                    <div class="progress">
-                                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="<?php echo $row->percentDone; ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $row->percentDone; ?>%">
-                                                            <span class="sr-only"><?=sprintf($tpl->__("text.percent_complete"), $row->percentDone)?></span>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </li>
-                                <?php
-                            } ?>
-
-                        </ul>
+                        
+                        @if (count($milestones) == 0)
+                            <div class="center">
+                                <br />
+                                <h4>{{ __('headlines.no_milestones') }}</h4>
+                                {{ __('text.milestones_help_organize_projects') }}
+                                <br /><br />
+                                <a href="{{ BASE_URL }}/tickets/roadmap">{!! __('links.goto_milestones') !!}</a>
+                            </div>
+                        @endif
+
+                        @foreach ($milestones as $row)
+                            @if ($row->percentDone >= 100 && new \DateTime($row->editTo) < new \DateTime())
+                                @break
+                            @endif
+                            <x-tickets::milestone-card 
+                                :milestone="$row"
+                            />
+                        @endforeach
+
                     </div>
                 </div>
             </div>
diff --git a/app/Domain/Tickets/Templates/components/milestone-card.blade.php b/app/Domain/Tickets/Templates/components/milestone-card.blade.php
new file mode 100644
index 000000000..43e55336e
--- /dev/null
+++ b/app/Domain/Tickets/Templates/components/milestone-card.blade.php
@@ -0,0 +1,11 @@
+@props([
+    'milestone' => ''
+])
+
+<div hx-trigger="load"
+     hx-get="{{ BASE_URL }}/hx/tickets/milestones/showCard?milestoneId=<?=$milestone->id ?>">
+    
+    <x-global::content.card>
+        <x-global::elements.loadingText type="card" />
+    </x-global::content.card>
+</div>
\ No newline at end of file
diff --git a/app/Domain/Tickets/Templates/partials/milestoneCard.blade.php b/app/Domain/Tickets/Templates/partials/milestoneCard.blade.php
index 9e15df587..91240aff6 100644
--- a/app/Domain/Tickets/Templates/partials/milestoneCard.blade.php
+++ b/app/Domain/Tickets/Templates/partials/milestoneCard.blade.php
@@ -1,4 +1,4 @@
-<div class="ticketBox fixed">
+<div class="ticketBox">
     <div class="row">
         <div class="col-md-8" style="margin-bottom:5px;">
             <strong><a href="{{ BASE_URL }}/tickets/showKanban?milestone={{ $milestone->id }}" >{{ $milestone->headline  }}</a></strong>