diff --git a/assets/css/app.css b/assets/css/app.css
index 7cd1747..f1c93d3 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1009,34 +1009,27 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.16);
 }
 
-.sleep-phase-bar__progress {
+.sleep-phase-bar__svg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    border: 0;
-    border-radius: inherit;
-    appearance: none;
-    -webkit-appearance: none;
-    background: transparent;
 }
 
-.sleep-phase-bar__progress::-webkit-progress-bar {
-    border-radius: inherit;
-    background: transparent;
+.sleep-phase-bar__track {
+    fill: rgba(255, 255, 255, 0.16);
 }
 
-.sleep-phase-bar__progress::-webkit-progress-value {
-    border-radius: inherit;
-    background: linear-gradient(90deg, #64d2ff, #0a84ff);
-    box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
+.sleep-phase-bar__fill {
+    fill: #64d2ff;
+    filter: drop-shadow(0 0 5px rgba(10, 132, 255, 0.48));
 }
 
-.sleep-phase-bar__progress::-moz-progress-bar {
-    border-radius: inherit;
-    background: linear-gradient(90deg, #64d2ff, #0a84ff);
-    box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
+.sleep-phase-bar__target-line {
+    stroke: rgba(255, 255, 255, 0.95);
+    stroke-width: 1.25;
+    vector-effect: non-scaling-stroke;
 }
 
 .sleep-phase-bar__target {
@@ -4973,38 +4966,10 @@ input[type="range"] {
         box-shadow: 0 10px 26px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
     }
 
-    .timeline-card__delete .trash-button span {
-        position: relative;
-        display: block;
-        width: 0.98rem;
-        height: 1.08rem;
-        margin-top: 0.1rem;
-        border: 2px solid currentColor;
-        border-top: 0;
-        border-radius: 0 0 0.18rem 0.18rem;
-    }
-
-    .timeline-card__delete .trash-button span::before {
-        content: "";
-        position: absolute;
-        left: -0.18rem;
-        right: -0.18rem;
-        top: -0.34rem;
-        height: 0.16rem;
-        border-radius: 999px;
-        background: currentColor;
-    }
-
-    .timeline-card__delete .trash-button span::after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: -0.55rem;
-        width: 0.46rem;
-        height: 0.16rem;
-        border-radius: 999px;
-        background: currentColor;
-        transform: translateX(-50%);
+    .timeline-card__delete .trash-button img {
+        width: 1.2rem;
+        height: 1.2rem;
+        filter: brightness(0) invert(1);
     }
 
     .timeline-card--with-image .timeline-card__time-chip {
diff --git a/assets/icons/trash.svg b/assets/icons/trash.svg
new file mode 100644
index 0000000..808b966
--- /dev/null
+++ b/assets/icons/trash.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 7h16"/>
+  <path d="M9 7V5.8A1.8 1.8 0 0 1 10.8 4h2.4A1.8 1.8 0 0 1 15 5.8V7"/>
+  <path d="M7 7l.8 12.2A2 2 0 0 0 9.8 21h4.4a2 2 0 0 0 2-1.8L17 7"/>
+  <path d="M10 11v6"/>
+  <path d="M14 11v6"/>
+</svg>
diff --git a/templates/pages/dashboard.php b/templates/pages/dashboard.php
index 7aabebe..dbbc79c 100644
--- a/templates/pages/dashboard.php
+++ b/templates/pages/dashboard.php
@@ -222,7 +222,11 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
 
                                 <?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
                                     <div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%">
-                                        <progress class="sleep-phase-bar__progress" value="<?= e((string) $sleepActualTotal) ?>" max="<?= e((string) $sleepBarTotal) ?>"><?= e(format_duration_hours($sleepActualTotal)) ?></progress>
+                                        <svg class="sleep-phase-bar__svg" viewBox="0 0 100 10" preserveAspectRatio="none" aria-hidden="true" focusable="false">
+                                            <rect class="sleep-phase-bar__track" x="0" y="2" width="100" height="6" rx="3"></rect>
+                                            <rect class="sleep-phase-bar__fill" x="0" y="2" width="<?= e((string) $sleepActualPercent) ?>" height="6" rx="3"></rect>
+                                            <line class="sleep-phase-bar__target-line" x1="<?= e((string) $sleepOptimalPercent) ?>" y1="0" x2="<?= e((string) $sleepOptimalPercent) ?>" y2="10"></line>
+                                        </svg>
                                         <span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
                                     </div>
                                     <div class="sleep-phase-summary"><span><?= e(format_duration_hours($sleepActualTotal)) ?></span><span>Ziel <?= e(format_duration_hours($optimalSleepHours)) ?></span></div>
@@ -276,7 +280,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                                 <input type="hidden" name="form_name" value="delete_event">
                                 <input type="hidden" name="date" value="<?= e((string) $dayEntry['date']) ?>">
                                 <input type="hidden" name="event_id" value="<?= e((string) $item['id']) ?>">
-                                <button class="ghost-button ghost-button--small trash-button" type="submit" data-confirm-delete aria-label="Moment löschen"><span aria-hidden="true"></span></button>
+                                <button class="ghost-button ghost-button--small trash-button" type="submit" data-confirm-delete aria-label="Moment löschen"><img src="<?= e(icon_path('trash')) ?>" alt="" aria-hidden="true"></button>
                             </form>
                         </article>
                     <?php endforeach; ?>