diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html
index cb522c448..2420bec59 100644
--- a/modules/ui/src/app/app.component.html
+++ b/modules/ui/src/app/app.component.html
@@ -83,7 +83,6 @@ <h1 class="main-heading">Testrun</h1>
         <span class="spacer"></span>
         <div class="app-bar-buttons">
           <button
-            #toggleSettingsBtn
             class="app-toolbar-button app-toolbar-button-general-settings"
             mat-icon-button
             aria-label="System settings"
@@ -105,147 +104,23 @@ <h1 class="main-heading">Testrun</h1>
         </div>
       </mat-toolbar>
       <div class="app-content-main" role="main" id="main">
-        <div class="app-callout-container">
-          <ng-container *ngIf="vm.settingMissedError as error">
-            <app-callout
-              [type]="CalloutType.Error"
-              *ngIf="error.isSettingMissed">
-              <ng-container
-                *ngIf="
-                  error.devicePortMissed && error.internetPortMissed;
-                  else onePortMissed
-                ">
-                No ports detected. Please connect and configure network and
-                device connections in the
-              </ng-container>
-              <ng-template #onePortMissed>
-                Selected port is missing! Please define a valid one using
-              </ng-template>
-              <a
-                (click)="navigateToSettings()"
-                (keydown.enter)="navigateToSettings()"
-                (keydown.space)="navigateToSettings()"
-                aria-label="The System settings link opens the panel. No redirect to other pages."
-                tabindex="0"
-                role="link"
-                class="message-link"
-                >System settings</a
-              >
-              panel.
-            </app-callout>
-          </ng-container>
-          <app-callout
-            id="outdated_devices_callout"
-            role="alert"
-            aria-live="assertive"
-            [closable]="true"
-            [type]="CalloutType.Error"
-            (calloutClosed)="calloutClosed($event)"
-            *ngIf="
-              vm.hasExpiredDevices &&
-              !vm.calloutState.get('outdated_devices_callout')
-            ">
-            Further information is required in your device configurations.
-            <ng-container *ngIf="!isDevicesRoute"
-              >Please update your
-              <a
-                (click)="navigateToDeviceRepository()"
-                (keydown.enter)="navigateToDeviceRepository()"
-                (keydown.space)="navigateToDeviceRepository()"
-                aria-label="The Devices link redirects to the device repository page."
-                tabindex="0"
-                role="link"
-                class="message-link"
-                >Devices</a
-              >
-              to continue testing.
-            </ng-container>
-          </app-callout>
-          <app-callout
-            [type]="CalloutType.Info"
-            *ngIf="vm.hasConnectionSettings === false">
-            Step 1: To perform a device test, please, select ports in
-            <a
-              (click)="navigateToSettings()"
-              (keydown.enter)="navigateToSettings()"
-              (keydown.space)="navigateToSettings()"
-              aria-label="The System settings link opens the panel. No redirect to other pages."
-              tabindex="0"
-              role="link"
-              class="message-link"
-              >System settings</a
-            >
-            panel.
-          </app-callout>
-          <app-callout
-            [type]="CalloutType.Info"
-            *ngIf="
-              vm.hasConnectionSettings === true &&
-              (vm.hasDevices === false ||
-                (!!vm.calloutState.get('outdated_devices_callout') &&
-                  vm.isAllDevicesOutdated))
-            ">
-            Step 2: To perform a device test please
-            <a
-              (click)="navigateToAddDevice()"
-              (keydown.enter)="navigateToAddDevice()"
-              (keydown.space)="navigateToAddDevice()"
-              aria-label="The Create a Device link redirects to the Devices page and opens the dialogue there."
-              tabindex="0"
-              role="link"
-              class="message-link"
-              >Create a Device</a
-            >
-            first.
-          </app-callout>
-          <app-callout
-            [type]="CalloutType.Info"
-            *ngIf="
-              vm.hasConnectionSettings === true &&
-              vm.hasDevices &&
-              (!vm.systemStatus || vm.systemStatus === StatusOfTestrun.Idle) &&
-              vm.isStatusLoaded === true &&
-              !vm.reports.length &&
-              !vm.isAllDevicesOutdated
-            ">
-            Step 3: Once device is created, you are able to
-            <a
-              (click)="navigateToRuntime()"
-              (keydown.enter)="navigateToRuntime()"
-              (keydown.space)="navigateToRuntime()"
-              aria-label="The start testing link redirects to the Testing page and opens the dialogue there."
-              tabindex="0"
-              role="link"
-              class="message-link"
-              >start testing</a
-            >.
-          </app-callout>
-          <app-callout
-            role="alert"
-            aria-live="assertive"
-            [type]="CalloutType.Check"
-            *ngIf="
-              vm.hasConnectionSettings === true &&
-              vm.hasDevices === true &&
-              vm.hasRiskProfiles === false &&
-              vm.systemStatus === StatusOfTestrun.InProgress &&
-              isRiskAssessmentRoute === false
-            ">
-            The device is now being tested. Why not take the time to complete
-            the device
-            <a
-              #riskAssessmentLink
-              (click)="navigateToRiskAssessment()"
-              (keydown.enter)="navigateToRiskAssessment()"
-              (keydown.space)="navigateToRiskAssessment()"
-              aria-label="The Risk Assessment questionnaire link redirects to the Risk Assessment page."
-              tabindex="0"
-              role="link"
-              class="message-link"
-              >Risk Assessment questionnaire</a
-            >?
-          </app-callout>
-        </div>
+        <ng-container
+          *ngTemplateOutlet="
+            callouts;
+            context: {
+              systemStatus: vm.systemStatus,
+              error: vm.settingMissedError,
+              hasExpiredDevices: vm.hasExpiredDevices,
+              calloutState: vm.calloutState,
+              hasConnectionSettings: vm.hasConnectionSettings,
+              hasRiskProfiles: vm.hasRiskProfiles,
+              isAllDevicesOutdated: vm.isAllDevicesOutdated,
+              isStatusLoaded: vm.isStatusLoaded,
+              reports: vm.reports,
+              hasDevices: vm.hasDevices,
+            }
+          ">
+        </ng-container>
         <router-outlet></router-outlet>
       </div>
     </mat-drawer-content>
@@ -279,3 +154,102 @@ <h1 class="main-heading">Testrun</h1>
 </ng-template>
 
 <app-spinner class="global-spinner"></app-spinner>
+
+<ng-template
+  #callouts
+  let-systemStatus="systemStatus"
+  let-error="error"
+  let-hasExpiredDevices="hasExpiredDevices"
+  let-calloutState="calloutState"
+  let-hasConnectionSettings="hasConnectionSettings"
+  let-isAllDevicesOutdated="isAllDevicesOutdated"
+  let-isStatusLoaded="isStatusLoaded"
+  let-reports="reports"
+  let-hasRiskProfiles="hasRiskProfiles"
+  let-hasDevices="hasDevices">
+  <div class="app-callout-container">
+    <app-callout
+      [type]="CalloutType.Error"
+      *ngIf="error && error.isSettingMissed"
+      action="System settings"
+      (onAction)="navigateToSettings()">
+      <ng-container
+        *ngIf="
+          error.devicePortMissed && error.internetPortMissed;
+          else onePortMissed
+        ">
+        No ports detected. Please connect and configure network and device
+        connections in the System settings panel.
+      </ng-container>
+      <ng-template #onePortMissed>
+        Selected port is missing! Please define a valid one using System
+        settings panel.
+      </ng-template>
+    </app-callout>
+    <app-callout
+      id="outdated_devices_callout"
+      role="alert"
+      aria-live="assertive"
+      [closable]="true"
+      [type]="CalloutType.Error"
+      (calloutClosed)="calloutClosed($event)"
+      *ngIf="hasExpiredDevices && !calloutState.get('outdated_devices_callout')"
+      [action]="!isDevicesRoute ? 'Devices' : ''"
+      (onAction)="navigateToDeviceRepository()">
+      Further information is required in your device configurations.
+      <ng-container *ngIf="!isDevicesRoute"
+        >Please update your Devices to continue testing.
+      </ng-container>
+    </app-callout>
+    <app-callout
+      [type]="CalloutType.Info"
+      *ngIf="hasConnectionSettings === false"
+      action="System settings"
+      (onAction)="navigateToSettings()">
+      Step 1: To perform a device test, please, select ports in System settings
+      panel.
+    </app-callout>
+    <app-callout
+      [type]="CalloutType.Info"
+      *ngIf="
+        hasConnectionSettings === true &&
+        (hasDevices === false ||
+          (!!calloutState.get('outdated_devices_callout') &&
+            isAllDevicesOutdated))
+      "
+      action="Devices"
+      (onAction)="navigateToAddDevice()">
+      Step 2: To perform a device test please Create a Device first.
+    </app-callout>
+    <app-callout
+      [type]="CalloutType.Info"
+      *ngIf="
+        hasConnectionSettings === true &&
+        hasDevices &&
+        (!systemStatus || systemStatus === StatusOfTestrun.Idle) &&
+        isStatusLoaded === true &&
+        !reports.length &&
+        !isAllDevicesOutdated
+      "
+      action="Testing"
+      (onAction)="navigateToRuntime()">
+      Step 3: Once device is created, you are able to start testing.
+    </app-callout>
+    <app-callout
+      role="alert"
+      aria-live="assertive"
+      [type]="CalloutType.Check"
+      *ngIf="
+        hasConnectionSettings === true &&
+        hasDevices === true &&
+        hasRiskProfiles === false &&
+        systemStatus === StatusOfTestrun.InProgress &&
+        isRiskAssessmentRoute === false
+      "
+      action="Create risk Assessment"
+      (onAction)="navigateToRiskAssessment()">
+      The device is now being tested. Why not take the time to complete the
+      device Risk Assessment questionnaire?
+    </app-callout>
+  </div>
+</ng-template>
diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
index e307fd6bf..dda9da746 100644
--- a/modules/ui/src/app/app.component.spec.ts
+++ b/modules/ui/src/app/app.component.spec.ts
@@ -377,7 +377,7 @@ describe('AppComponent', () => {
 
       it('should have callout content with "System settings" link ', () => {
         const calloutLinkEl = compiled.querySelector(
-          '.message-link'
+          '.callout-action-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
@@ -438,12 +438,12 @@ describe('AppComponent', () => {
       it('should have callout component with "Risk Assessment" link', () => {
         const callout = compiled.querySelector('app-callout');
         const calloutLinkEl = compiled.querySelector(
-          '.message-link'
+          '.callout-action-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
         expect(callout).toBeTruthy();
-        expect(calloutLinkContent).toContain('Risk Assessment');
+        expect(calloutLinkContent).toContain('Create risk Assessment');
       });
     });
 
@@ -470,12 +470,12 @@ describe('AppComponent', () => {
       it('should have callout component with "Risk Assessment" link', () => {
         const callout = compiled.querySelector('app-callout');
         const calloutLinkEl = compiled.querySelector(
-          '.message-link'
+          '.callout-action-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
         expect(callout).toBeTruthy();
-        expect(calloutLinkContent).toContain('Risk Assessment');
+        expect(calloutLinkContent).toContain('Create risk Assessment');
       });
     });
 
@@ -501,18 +501,18 @@ describe('AppComponent', () => {
 
       it('should have callout content with "Create a Device" link ', () => {
         const calloutLinkEl = compiled.querySelector(
-          '.message-link'
+          '.callout-action-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
         expect(calloutLinkEl).toBeTruthy();
-        expect(calloutLinkContent).toContain('Create a Device');
+        expect(calloutLinkContent).toContain('Devices');
       });
 
       keyboardCases.forEach(testCase => {
         it(`should navigate to the device-repository on keydown ${testCase.name} "Create a Device" link`, fakeAsync(() => {
           const calloutLinkEl = compiled.querySelector(
-            '.message-link'
+            '.callout-action-link'
           ) as HTMLAnchorElement;
 
           calloutLinkEl.dispatchEvent(testCase.event);
@@ -524,7 +524,7 @@ describe('AppComponent', () => {
 
       it('should navigate to the device-repository on click "Create a Device" link', fakeAsync(() => {
         const calloutLinkEl = compiled.querySelector(
-          '.message-link'
+          '.callout-action-link'
         ) as HTMLAnchorElement;
 
         calloutLinkEl.click();
@@ -558,18 +558,18 @@ describe('AppComponent', () => {
       it('should have callout component with "testing" link', () => {
         const callout = compiled.querySelector('app-callout');
         const calloutLinkEl = compiled.querySelector(
-          '.message-link'
+          '.callout-action-link'
         ) as HTMLAnchorElement;
         const calloutLinkContent = calloutLinkEl.innerHTML.trim();
 
         expect(callout).toBeTruthy();
-        expect(calloutLinkContent).toContain('testing');
+        expect(calloutLinkContent).toContain('Testing');
       });
 
       keyboardCases.forEach(testCase => {
         it(`should navigate to the runtime on keydown ${testCase.name} "Run the Test" link`, fakeAsync(() => {
           const calloutLinkEl = compiled.querySelector(
-            '.message-link'
+            '.callout-action-link'
           ) as HTMLAnchorElement;
 
           calloutLinkEl.dispatchEvent(testCase.event);
diff --git a/modules/ui/src/app/components/callout/callout.component.html b/modules/ui/src/app/components/callout/callout.component.html
index 36f0c981f..e346bc4dd 100644
--- a/modules/ui/src/app/components/callout/callout.component.html
+++ b/modules/ui/src/app/components/callout/callout.component.html
@@ -13,25 +13,40 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<div class="callout-container" [ngClass]="type">
+<div class="callout-container" [ngClass]="type()">
   <mat-icon
-    *ngIf="type !== CalloutType.InfoPilot"
+    *ngIf="type() !== CalloutType.InfoPilot"
     class="callout-icon"
     fontSet="material-icons-outlined"
     color="primary">
-    {{ type }}
+    {{ type() }}
   </mat-icon>
-  <span *ngIf="type === CalloutType.InfoPilot" class="callout-icon info-pilot">
+  <span
+    *ngIf="type() === CalloutType.InfoPilot"
+    class="callout-icon info-pilot">
     <app-program-type-icon [type]="ProgramType.Pilot"></app-program-type-icon
   ></span>
   <p class="callout-context">
     <ng-content></ng-content>
   </p>
-  <button
-    *ngIf="closable"
-    class="callout-close-button"
-    mat-button
-    (click)="calloutClosed.emit(id)">
-    Dismiss
-  </button>
+  <div class="callout-action-container">
+    <a
+      *ngIf="action()"
+      (click)="onAction.emit()"
+      (keydown.enter)="onAction.emit()"
+      (keydown.space)="onAction.emit()"
+      tabindex="0"
+      role="link"
+      class="callout-action callout-action-link"
+      >{{ action() }}</a
+    >
+    <button
+      *ngIf="closable()"
+      class="callout-action callout-close-button"
+      mat-button
+      (click)="calloutClosed.emit(id())">
+      Dismiss
+    </button>
+  </div>
+  <div class="callout-border"></div>
 </div>
diff --git a/modules/ui/src/app/components/callout/callout.component.scss b/modules/ui/src/app/components/callout/callout.component.scss
index 4343dc38d..cb5a9131b 100644
--- a/modules/ui/src/app/components/callout/callout.component.scss
+++ b/modules/ui/src/app/components/callout/callout.component.scss
@@ -32,89 +32,84 @@
   }
 }
 
+.check_circle {
+  border-color: colors.$on-tertiary-container;
+  color: colors.$on-tertiary-container;
+  background-color: rgba(20, 108, 46, 0.1);
+}
+
+.info {
+  border-color: colors.$primary;
+  color: colors.$primary;
+  background-color: rgba(127, 207, 255, 0.16);
+}
+
+.error,
+.error_outline {
+  border-color: colors.$on-error-container;
+  color: colors.$on-error-container;
+  background-color: rgba(179, 38, 30, 0.1);
+}
+
+.warning_amber {
+  border-color: colors.$orange-60;
+  color: colors.$orange-40;
+  background-color: colors.$orange-98;
+}
+
 .callout-container {
+  position: relative;
+  overflow: hidden;
   display: flex;
   box-sizing: border-box;
   height: auto;
   min-height: 48px;
-  padding: 6px 24px;
-  border-radius: 8px;
+  padding: 6px 6px 6px 16px;
+  border-radius: variables.$corner-medium;
   align-items: center;
   gap: 16px;
+  margin: 24px 32px;
 }
 
 .callout-icon {
   flex-shrink: 0;
   padding: 4px 0;
-}
-
-.callout-container.info {
-  margin: 24px 32px;
-  background-color: mat.get-theme-color($light-theme, primary, 95);
-
-  .callout-icon {
-    color: mat.get-theme-color($light-theme, primary, 30);
-  }
-
-  .info-pilot {
-    width: 24px;
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.callout-container.warning_amber {
-  background-color: colors.$yellow-50;
-
-  .callout-icon {
-    color: colors.$orange-700;
-  }
-}
-
-.callout-container.error {
-  margin: 24px 32px;
-  background-color: colors.$red-50;
-
-  .callout-icon {
-    color: colors.$red-700;
-  }
-}
-
-.callout-container.check_circle {
-  margin: 24px 32px;
-  background-color: colors.$green-50;
-
-  .callout-icon {
-    color: colors.$green-800;
-  }
-}
-
-.callout-container.error_outline {
-  display: flex;
-  align-items: flex-start;
-  background: colors.$color-background-grey;
-
-  .callout-icon {
-    color: colors.$grey-700;
-  }
-
-  .callout-context {
-    font-weight: bold;
-  }
+  color: inherit;
 }
 
 .callout-context {
   margin: 0;
   padding: 6px 0;
-  color: colors.$grey-800;
+  color: colors.$on-surface-variant;
   font-family: variables.$font-secondary;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.2px;
 }
 
-.callout-close-button {
+.callout-action-container {
   margin-left: auto;
-  margin-right: -20px;
-  color: colors.$warn;
+}
+
+.callout-action {
+  color: inherit;
+  padding: 10px 16px;
+}
+
+.callout-action-link {
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: var(--mdc-text-button-label-text-size);
+  font-family: var(--mdc-text-button-label-text-font);
+}
+
+.callout-border {
+  display: block;
+  height: 3px;
+  border-bottom: 3px solid;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  margin-left: -16px;
 }
diff --git a/modules/ui/src/app/components/callout/callout.component.spec.ts b/modules/ui/src/app/components/callout/callout.component.spec.ts
index fab52c949..7b6a98cd8 100644
--- a/modules/ui/src/app/components/callout/callout.component.spec.ts
+++ b/modules/ui/src/app/components/callout/callout.component.spec.ts
@@ -29,7 +29,7 @@ describe('CalloutComponent', () => {
     }).compileComponents();
     fixture = TestBed.createComponent(CalloutComponent);
     component = fixture.componentInstance;
-    component.type = 'mockValue';
+    fixture.componentRef.setInput('type', 'mockValue');
     compiled = fixture.nativeElement as HTMLElement;
     fixture.detectChanges();
   });
@@ -66,4 +66,27 @@ describe('CalloutComponent', () => {
       expect(calloutClosedSpy).toHaveBeenCalled();
     });
   });
+
+  describe('action', () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput('action', 'action');
+      fixture.detectChanges();
+    });
+
+    it('should have action link', () => {
+      const closeButton = compiled.querySelector('.callout-action-link');
+
+      expect(closeButton).toBeTruthy();
+    });
+
+    it('should emit event', () => {
+      const calloutClosedSpy = spyOn(component.onAction, 'emit');
+      const actionLink = compiled.querySelector(
+        '.callout-action-link'
+      ) as HTMLAnchorElement;
+      actionLink?.click();
+
+      expect(calloutClosedSpy).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/modules/ui/src/app/components/callout/callout.component.ts b/modules/ui/src/app/components/callout/callout.component.ts
index 53d73166a..2081f9f22 100644
--- a/modules/ui/src/app/components/callout/callout.component.ts
+++ b/modules/ui/src/app/components/callout/callout.component.ts
@@ -16,9 +16,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  Output,
+  input,
+  output,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
@@ -43,8 +42,10 @@ import { ProgramTypeIconComponent } from '../program-type-icon/program-type-icon
 export class CalloutComponent {
   readonly CalloutType = CalloutType;
   readonly ProgramType = ProgramType;
-  @Input() id: string | null = null;
-  @Input() type = '';
-  @Input() closable = false;
-  @Output() calloutClosed = new EventEmitter<string | null>();
+  id = input<string | null>(null);
+  type = input<string>('');
+  closable = input<boolean>(false);
+  action = input<string>();
+  calloutClosed = output<string | null>();
+  onAction = output<void>();
 }
diff --git a/modules/ui/src/theming/colors.scss b/modules/ui/src/theming/colors.scss
index b8f9175ea..42ada5546 100644
--- a/modules/ui/src/theming/colors.scss
+++ b/modules/ui/src/theming/colors.scss
@@ -39,7 +39,9 @@ $warn: $red-700;
 /* CUSTOM */
 $green-50: #e6f4ea;
 $green-800: #137333;
-$orange-700: #a85d00;
+$orange-40: #9a4600;
+$orange-60: #e86e00;
+$orange-98: #fffade;
 $yellow-50: #fef7e0;
 $cyan-50: #e4f7fb;
 $cyan-900: #007b83;
diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss
index fd9072b7d..6be3f1bcd 100644
--- a/modules/ui/src/theming/variables.scss
+++ b/modules/ui/src/theming/variables.scss
@@ -18,6 +18,7 @@ $profiles-drawer-width: 320px;
 $form-max-width: 732px;
 $icon-size: 24px;
 $corner-large: 16px;
+$corner-medium: 12px;
 $reports-table-header-size: 32px;
 
 // nav variables