diff --git a/_dev/src/scss/_variables.scss b/_dev/src/scss/_variables.scss
index f71678775..96216552b 100644
--- a/_dev/src/scss/_variables.scss
+++ b/_dev/src/scss/_variables.scss
@@ -16,6 +16,7 @@ $cdk-prefix: "cdk-";
   --#{$ua-prefix}primary-600: var(--#{$cdk-prefix}primary-600, #5e5e5e);
   --#{$ua-prefix}primary-500: var(--#{$cdk-prefix}primary-500, #bbbbbb);
   --#{$ua-prefix}primary-400: var(--#{$cdk-prefix}primary-400, #dddddd);
+  --#{$ua-prefix}primary-300: var(--#{$cdk-prefix}primary-300, #eeeeee);
   --#{$ua-prefix}primary-200: var(--#{$cdk-prefix}primary-200, #f7f7f7);
   --#{$ua-prefix}purple-500: var(--#{$cdk-prefix}purple-500, #decde7);
   --#{$ua-prefix}purple-50: var(--#{$cdk-prefix}purple-50, #f8f0f7);
@@ -57,6 +58,9 @@ $cdk-prefix: "cdk-";
   --#{$ua-prefix}header-offset: 10rem;
   --#{$ua-prefix}bo-background-color: var(--#{$ua-prefix}primary-200);
   --#{$ua-prefix}error-img-filter: none;
+  --#{$ua-prefix}scrollbar-thumb: var(--#{$ua-prefix}primary-500);
+  --#{$ua-prefix}scrollbar-thumb-hover: var(--#{$ua-prefix}primary-600);
+  --#{$ua-prefix}scrollbar-track: var(--#{$ua-prefix}primary-400);
 }
 
 // Update variable at body level
diff --git a/_dev/src/scss/components/_check-requirements.scss b/_dev/src/scss/components/_check-requirements.scss
index 82218fa4b..9128bf7ad 100644
--- a/_dev/src/scss/components/_check-requirements.scss
+++ b/_dev/src/scss/components/_check-requirements.scss
@@ -27,23 +27,44 @@ $e: ".check-requirements";
     }
 
     &__requirement {
-      padding-inline-start: 2rem;
-      background-repeat: no-repeat;
-      background-position: left center;
-      background-size: 1.5rem 1.5rem;
+      position: relative;
+      padding-inline-start: 1.75rem;
       font-size: 0.875rem;
       line-height: 1.4;
 
-      &--error {
-        background-image: url("../../img/close.svg");
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        display: block;
+        width: 1.375rem;
+        height: 1.25rem;
+        font-family: var(--#{$ua-prefix}font-family-material-icons);
+        font-size: 1.25rem;
+        line-height: 1;
+        transform: translateY(-50%);
+      }
+
+      &--success {
+        &::before {
+          content: "check";
+          color: var(--#{$ua-prefix}green-500);
+        }
       }
 
       &--warning {
-        background-image: url("../../img/warning.svg");
+        &::before {
+          content: "warning";
+          color: var(--#{$ua-prefix}yellow-500);
+        }
       }
 
-      &--success {
-        background-image: url("../../img/check.svg");
+      &--error {
+        &::before {
+          content: "close";
+          color: var(--#{$ua-prefix}red-500);
+        }
       }
     }
 
diff --git a/_dev/src/scss/components/_index.scss b/_dev/src/scss/components/_index.scss
index 30abd82a8..59b8b1280 100644
--- a/_dev/src/scss/components/_index.scss
+++ b/_dev/src/scss/components/_index.scss
@@ -14,4 +14,5 @@
 @use "privacy";
 @use "progress";
 @use "radio-card";
+@use "scrollbar";
 @use "stepper";
diff --git a/_dev/src/scss/components/_logs.scss b/_dev/src/scss/components/_logs.scss
index 585bbd620..133f09d82 100644
--- a/_dev/src/scss/components/_logs.scss
+++ b/_dev/src/scss/components/_logs.scss
@@ -11,17 +11,6 @@ $e-logs: ".logs";
   }
 
   #{$e-logs} {
-    --#{$ua-prefix}logs-height: 14rem;
-    --#{$ua-prefix}logs-background-color: var(--#{$ua-prefix}muted-background-color);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    min-height: var(--#{$ua-prefix}logs-height);
-    max-height: 100%;
-    padding: 1rem;
-    background-color: var(--#{$ua-prefix}logs-background-color);
-    border-radius: var(--#{$ua-prefix}border-radius);
-
     &__inner {
       display: flex;
       flex-direction: column;
@@ -36,78 +25,93 @@ $e-logs: ".logs";
     }
 
     &__scroll {
+      --#{$ua-prefix}logs-height: calc(10lh + (10 * 0.5rem));
+      --#{$ua-prefix}logs-background-color: var(--#{$ua-prefix}muted-background-color);
       position: relative;
       display: flex;
       flex-direction: column;
       flex-grow: 1;
       min-height: var(--#{$ua-prefix}logs-height);
+      overflow: hidden;
+      background-color: var(--#{$ua-prefix}logs-background-color);
+      border-radius: var(--#{$ua-prefix}border-radius);
 
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        display: block;
-        width: 100%;
-        height: 1rem;
-        background-image: linear-gradient(
-          to top,
-          transparent,
-          var(--#{$ua-prefix}muted-background-color)
-        );
+      #{$e-logs}__line {
+        padding-inline-start: 2.75rem;
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+
+        &::before {
+          font-size: 1.2rem;
+        }
       }
     }
 
     &__scroll-inner {
       height: 100%;
-      padding-block-start: 1rem;
       overflow-y: auto;
     }
 
     &__list {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
       max-height: 100%;
     }
 
     &__line {
-      padding-inline-start: 2rem;
-      background-color: rgb(255 255 255 / 0);
+      position: relative;
+      padding-block: 0.125rem;
+      padding-inline: 2.75rem 1rem;
       background-repeat: no-repeat;
       background-position: left center;
       background-size: 1.5rem 1.5rem;
       font-size: 0.875rem;
-      line-height: 1.4;
+      line-height: 1.4rem;
       word-break: break-word;
       transition: background-color 0.3s ease-in-out;
 
-      &--success {
-        background-image: url("../../img/check.svg");
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 1rem;
+        display: block;
+        width: 1.375rem;
+        height: 1.25rem;
+        font-family: var(--#{$ua-prefix}font-family-material-icons);
+        font-size: 1.25rem;
+        line-height: 1;
+        transform: translateY(-50%);
+      }
 
-        &#{$e-logs}__line--pointed {
+      &--success {
+        &::before {
+          content: "check";
           color: var(--#{$ua-prefix}green-500);
         }
       }
 
       &--warning {
-        background-image: url("../../img/warning.svg");
-
-        &#{$e-logs}__line--pointed {
+        &::before {
+          content: "warning";
           color: var(--#{$ua-prefix}yellow-500);
         }
       }
 
       &--error {
-        background-image: url("../../img/close.svg");
-
-        &#{$e-logs}__line--pointed {
+        &::before {
+          content: "close";
           color: var(--#{$ua-prefix}red-500);
         }
       }
+
+      &--pointed {
+        --#{$ua-prefix}log-active-background-color: var(--#{$ua-prefix}primary-300);
+        background-color: var(--#{$ua-prefix}log-active-background-color);
+      }
     }
 
     &__summary-anchor {
-      margin-inline-start: 0.25rem;
       font-weight: 700;
     }
 
@@ -124,7 +128,53 @@ $e-logs: ".logs";
     &__summary {
       display: flex;
       flex-direction: column;
+      gap: 1rem;
+      padding: 1.5rem;
+      border: 1px solid var(--#{$ua-prefix}border-color);
+      border-radius: var(--#{$ua-prefix}border-radius);
+
+      #{$e-logs}__line {
+        display: grid;
+        grid-template-columns: minmax(auto, min-content) auto;
+        gap: 0.25rem;
+        justify-content: start;
+        padding-block: 0;
+        padding-inline-start: 1.75rem;
+        line-height: 1.25rem;
+
+        &::before {
+          left: 0;
+        }
+      }
+
+      #{$e-logs}__line-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &__summary-scroll {
+      --#{$ua-prefix}logs-height: calc(5lh + (6 * 0.5rem));
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
       gap: 0.5rem;
+      max-height: var(--#{$ua-prefix}logs-height);
+      overflow-y: auto;
+      border-radius: var(--#{$ua-prefix}border-radius);
+    }
+
+    &__summary-top {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    &__summary-total {
+      flex-shrink: 0;
+      min-width: 1.25rem;
     }
   }
 }
diff --git a/_dev/src/scss/components/_progress.scss b/_dev/src/scss/components/_progress.scss
index 5006a15ca..dbc3b96ef 100644
--- a/_dev/src/scss/components/_progress.scss
+++ b/_dev/src/scss/components/_progress.scss
@@ -13,6 +13,7 @@ $e: ".log-progress";
       display: flex;
       gap: 0.5rem;
       align-items: center;
+      font-size: 0.875rem;
       color: var(--#{$ua-prefix}primary-600);
     }
 
diff --git a/_dev/src/scss/components/_scrollbar.scss b/_dev/src/scss/components/_scrollbar.scss
new file mode 100644
index 000000000..7bc2f728c
--- /dev/null
+++ b/_dev/src/scss/components/_scrollbar.scss
@@ -0,0 +1,30 @@
+@use "../variables" as *;
+
+.sb-thin {
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+    height: 0.375rem;
+  }
+}
+
+:not(.sb-thin) {
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--#{$ua-prefix}scrollbar-thumb);
+  border-radius: 99px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--#{$ua-prefix}scrollbar-thumb-hover);
+  border-radius: 99px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--#{$ua-prefix}scrollbar-track);
+  border-radius: 99px;
+}
diff --git a/_dev/src/scss/layouts/_layout.scss b/_dev/src/scss/layouts/_layout.scss
index d58f1729a..cef19f387 100644
--- a/_dev/src/scss/layouts/_layout.scss
+++ b/_dev/src/scss/layouts/_layout.scss
@@ -27,6 +27,10 @@ $e: "#ua";
     text-align: center;
   }
 
+  &_modal {
+    height: 0;
+  }
+
   @container ua-main (max-width: 700px) {
     &_container {
       padding: 2rem;
diff --git a/_dev/src/scss/layouts/_logs-pages.scss b/_dev/src/scss/layouts/_logs-pages.scss
index 9f64befe8..008eead01 100644
--- a/_dev/src/scss/layouts/_logs-pages.scss
+++ b/_dev/src/scss/layouts/_logs-pages.scss
@@ -38,6 +38,7 @@ html {
       @container html-height (min-width: 0) {
         #{$ua-id} {
           display: grid;
+          grid-template-rows: 1fr;
           grid-template-columns: minmax(0, 1fr);
           min-height: calc(100cqh - var(--#{$ua-prefix}header-offset));
 
diff --git a/_dev/src/ts/components/LogsViewer.ts b/_dev/src/ts/components/LogsViewer.ts
index b00a214ab..29671d1d7 100644
--- a/_dev/src/ts/components/LogsViewer.ts
+++ b/_dev/src/ts/components/LogsViewer.ts
@@ -146,10 +146,11 @@ export default class LogsViewer extends ComponentAbstract implements Destroyable
   #createLogLine = (logEntry: LogEntry): HTMLDivElement => {
     const logLineFragment = this.#templateLogLine.content.cloneNode(true) as DocumentFragment;
     const logLine = logLineFragment.querySelector('.logs__line') as HTMLDivElement;
+    const logLineContent = logLineFragment.querySelector('.logs__line-content') as HTMLDivElement;
 
     logLine.classList.add(`logs__line--${logEntry.className}`);
     logLine.setAttribute('data-status', logEntry.className);
-    logLine.textContent = logEntry.message;
+    logLineContent.textContent = logEntry.message;
 
     return logLine;
   };
@@ -183,6 +184,7 @@ export default class LogsViewer extends ComponentAbstract implements Destroyable
   #createSummary(severity: SeverityClasses, logs: string[]): HTMLDivElement {
     const summaryFragment = this.#templateSummary.content.cloneNode(true) as DocumentFragment;
     const summary = summaryFragment.querySelector('.logs__summary') as HTMLDivElement;
+    const summaryScroll = summaryFragment.querySelector('.logs__summary-scroll') as HTMLDivElement;
 
     const title = this.#getSummaryTitle(severity);
     const titleContainer = summary.querySelector('[data-slot-template="title"]') as HTMLDivElement;
@@ -200,7 +202,7 @@ export default class LogsViewer extends ComponentAbstract implements Destroyable
 
       cloneLogElement.appendChild(linkClone);
 
-      summary.appendChild(cloneLogElement);
+      summaryScroll.appendChild(cloneLogElement);
     });
 
     return summary;
diff --git a/_dev/tests/components/LogsViewer.test.ts b/_dev/tests/components/LogsViewer.test.ts
index 3cdfe1b5c..c18fe716f 100644
--- a/_dev/tests/components/LogsViewer.test.ts
+++ b/_dev/tests/components/LogsViewer.test.ts
@@ -14,12 +14,18 @@ describe('LogsViewer', () => {
         <div data-slot-component="summary" class="logs__summaries"></div>
       </div>
       <template id="log-line">
-        <div class="logs__line"></div>
+        <div class="logs__line">
+          <div class="logs__line-content"></div>
+        </div>
       </template>
       
       <template id="log-summary">
         <div class="logs__summary">
-          <p data-slot-template="title" class="logs__summary-title h3"></p>
+          <div class="logs__summary-top">
+            <p data-slot-template="title" class="logs__summary-title h3"></p>
+            <span class="logs__summary-total badge badge-danger"></span>
+          </div>
+          <div class="logs__summary-scroll"></div>
         </div>
       </template>
       
@@ -36,7 +42,7 @@ describe('LogsViewer', () => {
       <template id="summary-buttons">
         <div data-slot-template="summary-buttons" class="logs__buttons">
           <a data-slot-template="download-button" class="btn btn-primary" href="#" download="#">
-            <i class="material-icons">upload</i>
+            <i class="material-icons">file_upload</i>
             Download update logs
           </a>
         </div>
@@ -60,15 +66,16 @@ describe('LogsViewer', () => {
 
       const logsList = container.querySelector('[data-slot-component="list"]');
       const logLines = logsList!.querySelectorAll('.logs__line');
+      const logLineContents = logsList!.querySelectorAll('.logs__line-content');
 
       expect(logLines.length).toBe(3);
-      expect(logLines[0].textContent).toBe('Info message');
+      expect(logLineContents[0].textContent).toBe('Info message');
       expect(logLines[0].classList.contains('logs__line--success')).toBe(true);
 
-      expect(logLines[1].textContent).toBe('Warning message');
+      expect(logLineContents[1].textContent).toBe('Warning message');
       expect(logLines[1].classList.contains('logs__line--warning')).toBe(true);
 
-      expect(logLines[2].textContent).toBe('Error message');
+      expect(logLineContents[2].textContent).toBe('Error message');
       expect(logLines[2].classList.contains('logs__line--error')).toBe(true);
     });
 
diff --git a/views/templates/components/logs-templates.html.twig b/views/templates/components/logs-templates.html.twig
index e09096583..8f26a8a5b 100644
--- a/views/templates/components/logs-templates.html.twig
+++ b/views/templates/components/logs-templates.html.twig
@@ -1,28 +1,34 @@
 <template id="log-line">
-    <div class="logs__line"></div>
+  <div class="logs__line">
+    <div class="logs__line-content"></div>
+  </div>
 </template>
 
 <template id="log-summary">
-    <div class="logs__summary">
-        <p data-slot-template="title" class="logs__summary-title h3"></p>
+  <div class="logs__summary">
+    <div class="logs__summary-top">
+      <p data-slot-template="title" class="logs__summary-title h3"></p>
+      <span class="logs__summary-total badge badge-danger">{{ random(1, 100) }}</span>
     </div>
+    <div class="logs__summary-scroll"></div>
+  </div>
 </template>
 
 <template id="summary-warning-title">{{ "Warning summary"|trans({}) }}</template>
 <template id="summary-error-title">{{ "Error summary"|trans({}) }}</template>
 
 <template id="summary-warning-link">
-    <a class="logs__summary-anchor link">{{ "See warning"|trans({}) }}</a>
+  <a class="logs__summary-anchor link">{{ "See warning"|trans({}) }}</a>
 </template>
 <template id="summary-error-link">
-    <a class="logs__summary-anchor link">{{ "See error"|trans({}) }}</a>
+  <a class="logs__summary-anchor link">{{ "See error"|trans({}) }}</a>
 </template>
 
 <template id="summary-buttons">
-    <div data-slot-template="summary-buttons" class="logs__buttons">
-        <a data-slot-template="download-button" class="btn btn-primary" href="#" download="#">
-            <i class="material-icons">upload</i>
-            {{ 'Download update logs'|trans({}) }}
-        </a>
-    </div>
+  <div data-slot-template="summary-buttons" class="logs__buttons">
+    <a data-slot-template="download-button" class="btn btn-primary" href="#" download="#">
+      <i class="material-icons">file_upload</i>
+      {{ 'Download update logs'|trans({}) }}
+    </a>
+  </div>
 </template>
diff --git a/views/templates/components/stepper.html.twig b/views/templates/components/stepper.html.twig
index 369ac9438..191d242d1 100644
--- a/views/templates/components/stepper.html.twig
+++ b/views/templates/components/stepper.html.twig
@@ -1,4 +1,4 @@
-<div class="stepper" id="{{ stepper_parent_id }}">
+<div class="stepper sb-thin" id="{{ stepper_parent_id }}">
   {% if steps %}
     {% for step in steps %}
       <div class="stepper__step stepper__step--{{ step.state }} {% if loop.first %} stepper__step--first {% elseif loop.last %} stepper__step--last {% endif %}" data-step-code="{{ step.code }}">