diff --git a/frontend/.browserlistrc b/frontend/.browserlistrc
new file mode 100644
index 0000000000..afcf7c5cb2
--- /dev/null
+++ b/frontend/.browserlistrc
@@ -0,0 +1,6 @@
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 969977a507..855d2e88ed 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -36,6 +36,7 @@
         "@cypress/skip-test": "^2.6.1",
         "@types/jest": "^29.5.13",
         "@types/uuid": "^10.0.0",
+        "browserslist": "^4.24.2",
         "cypress": "^13.15.0",
         "cypress-real-events": "^1.13.0",
         "jest": "^29.7.0",
@@ -6936,7 +6937,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "caniuse-lite": "^1.0.30001669",
         "electron-to-chromium": "^1.5.41",
diff --git a/frontend/package.json b/frontend/package.json
index 08e2415442..544a324e45 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -50,6 +50,7 @@
     "@cypress/skip-test": "^2.6.1",
     "@types/jest": "^29.5.13",
     "@types/uuid": "^10.0.0",
+    "browserslist": "^4.24.2",
     "cypress": "^13.15.0",
     "cypress-real-events": "^1.13.0",
     "jest": "^29.7.0",
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
index b31b83d0bd..df05187ead 100644
--- a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -8,7 +8,7 @@ <h2 class="title">{{ keyResult.title }}</h2>
         </button>
       </div>
       <div class="me-3">
-        <section class="d-flex justify-content-between mb-3">
+        <section class="d-flex justify-content-between mb-2-rem">
           <h4>
             {{ "KEY_RESULT_TYPE." + keyResult.keyResultType | translate }}
           </h4>
@@ -19,7 +19,7 @@ <h4 *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}<
           <h4 *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</h4>
         </section>
 
-        <section class="scoring-section">
+        <section class="scoring-section mb-2-rem">
           <app-scoring class="scoring-detail" [keyResult]="keyResult" [isDetail]="true"></app-scoring>
           <span class="text-small d-flex align-items-center flex-column mb-2 ms-3 confidence-container">
             <h4>Confidence</h4>
@@ -31,7 +31,7 @@ <h4>Confidence</h4>
           </span>
         </section>
 
-        <section class="d-flex gap-4 flex-row mt-2">
+        <section class="d-flex gap-4 flex-row mb-2-rem">
           <ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
             <div class="d-flex justify-content-start w-100 metric-label-div">
               <p class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
@@ -83,7 +83,7 @@ <h4 class="ordinal-zone-title">Stretch</h4>
           </ng-container>
         </section>
 
-        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
+        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mb-2-rem">
           <h3 class="mb-1">Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})</h3>
           <p class="linebreak" *ngIf="checkIn.changeInfo">{{ checkIn.changeInfo }}</p>
           <span class="d-flex justify-content-start">
@@ -100,8 +100,8 @@ <h3 class="mb-1">Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})<
           </span>
         </section>
 
-        <section>
-          <div class="mt-3 mb-4">
+        <section class="mb-2-rem">
+          <div>
             <h3 class="mb-1">Beschrieb</h3>
             <p class="linebreak">{{ keyResult.description || "-" }}</p>
           </div>
@@ -112,7 +112,7 @@ <h3>Action Plan</h3>
               <div *ngIf="action.isChecked">
                 <div class="action-list-checked-item break-word ms-4">
                   <img src="../../../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
-                  <span class="" [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</span>
+                  <span [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</span>
                 </div>
               </div>
               <div *ngIf="!action.isChecked">
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
index b0c3a256fd..da200da15e 100644
--- a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
+++ b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
@@ -90,3 +90,7 @@
 .action-list-checked-item {
   text-indent: -1.3rem;
 }
+
+.mb-2-rem {
+  margin-bottom: 2rem !important;
+}
diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
index a39ba63848..01551a20ea 100644
--- a/frontend/src/app/components/keyresult/keyresult.component.html
+++ b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -5,18 +5,18 @@
   class="key-result rounded-2 p-3 w-100 focus-outline"
   tabindex="0"
 >
-  <h3 class="fw-normal linebreak mb-2">{{ keyResult.title }}</h3>
+  <h3 class="linebreak mb-3">{{ keyResult.title }}</h3>
   <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-2">
     <div class="d-flex justify-content-center align-items-center flex-wrap">
-      <h5 class="text-nowrap me-2">Letztes Check-in</h5>
+      <h4 class="text-nowrap me-2">Letztes Check-in</h4>
       <span class="keyResult-attribute-show">{{
         keyResult.lastCheckIn == null ? "Keines" : (keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT)
       }}</span>
     </div>
 
     <div class="d-flex align-items-center flex-wrap justify-content-end keyResult-overview-attribute">
-      <h5 class="me-2">Confidence</h5>
+      <h4 class="me-2">Confidence</h4>
       <app-confidence
         [edit]="false"
         [isDetail]="false"
diff --git a/frontend/src/app/components/keyresult/keyresult.component.scss b/frontend/src/app/components/keyresult/keyresult.component.scss
index 7bfb87d523..f99afa0e47 100644
--- a/frontend/src/app/components/keyresult/keyresult.component.scss
+++ b/frontend/src/app/components/keyresult/keyresult.component.scss
@@ -1,6 +1,6 @@
 @import "../style/variables";
 .key-result {
-  background-color: $dark-grey;
+  background-color: $soft-grey;
   border: 1px solid $dark-grey-border;
   word-wrap: break-word;
 
diff --git a/frontend/src/app/components/overview/overview.component.html b/frontend/src/app/components/overview/overview.component.html
index 9cfe539a04..7103ade284 100644
--- a/frontend/src/app/components/overview/overview.component.html
+++ b/frontend/src/app/components/overview/overview.component.html
@@ -7,7 +7,7 @@
   </app-team>
   <div *ngIf="(overviewEntities$ | async)?.length == 0" class="d-flex align-items-center flex-column pt-5 gap-5">
     <p>Kein Team ausgewählt</p>
-    <img src="{{ this.backgroundLogoSrc$ | async }}" alt="" width="242" class="puzzle-logo" />
+    <img src="{{ this.backgroundLogoSrc$ | async }}" alt="Greyed out company logo" width="242" class="puzzle-logo" />
   </div>
 </div>
 <router-outlet></router-outlet>
diff --git a/frontend/src/app/shared/custom/scoring/scoring.component.html b/frontend/src/app/shared/custom/scoring/scoring.component.html
index 4d7af54310..6f9d1d77d9 100644
--- a/frontend/src/app/shared/custom/scoring/scoring.component.html
+++ b/frontend/src/app/shared/custom/scoring/scoring.component.html
@@ -2,13 +2,13 @@
   <div class="scoring-container d-flex flex-row">
     <div class="flex-fill">
       <span class="okr-score-label">
-        <h4 class="text-center text-small">Fail</h4>
+        <h5 class="text-center text-small">Fail</h5>
       </span>
       <span class="okr-score-label okr-score-commit">
-        <h4 class="text-center text-small">Commit</h4>
+        <h5 class="text-center text-small">Commit</h5>
       </span>
       <span class="okr-score-label">
-        <h4 class="text-center text-small">Target</h4>
+        <h5 class="text-center text-small">Target</h5>
       </span>
       <div
         [ngStyle]="{ display: stretched ? 'none' : 'flex' }"
@@ -40,7 +40,7 @@ <h4 class="text-center text-small">Target</h4>
     </div>
 
     <div class="okr-stretch d-flex flex-column align-items-center">
-      <h4 class="text-center stretch-label">Stretch</h4>
+      <h5 class="text-center stretch-label">Stretch</h5>
       <img
         [src]="'assets/icons/star-' + iconPath + '-icon.svg'"
         [attr.data-testId]="'stretch'"
diff --git a/frontend/src/app/shared/sidepanel/sidepanel.component.scss b/frontend/src/app/shared/sidepanel/sidepanel.component.scss
index e2ebee50f6..cc8b211b4b 100644
--- a/frontend/src/app/shared/sidepanel/sidepanel.component.scss
+++ b/frontend/src/app/shared/sidepanel/sidepanel.component.scss
@@ -1,6 +1,6 @@
 @import "../style/variables";
 .sidebar__content {
-  padding: 18px;
+  padding: 32px;
 }
 
 .sidepanel {
diff --git a/frontend/src/assets/fonts/Roboto.scss b/frontend/src/assets/fonts/Roboto.scss
index 9becdd1a28..237f11689a 100644
--- a/frontend/src/assets/fonts/Roboto.scss
+++ b/frontend/src/assets/fonts/Roboto.scss
@@ -1,9 +1,9 @@
 @font-face {
-  font-family: Roboto, sans-serif;
-  font-display: swap;
+  font-family: "Roboto";
   font-style: normal;
-  font-weight: 300;
-  src: url('./Roboto/Roboto-Regular.ttf') format('ttf'),
-  url('./Roboto/Roboto-Regular.woff2') format('woff2'),
-  url('./Roboto/Roboto-Regular.woff') format('woff');
+  font-display: swap;
+  src:
+    url('./Roboto/RobotoFlex-Regular.woff2') format('woff2'),
+    url('./Roboto/RobotoFlex-Regular.woff') format('woff'),
+    url('./Roboto/RobotoFlex-Regular.ttf') format('truetype');
 }
diff --git a/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.ttf b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.ttf
new file mode 100644
index 0000000000..6cf3b2a47c
Binary files /dev/null and b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.ttf differ
diff --git a/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.woff b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.woff
new file mode 100644
index 0000000000..838bd2d960
Binary files /dev/null and b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.woff differ
diff --git a/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.woff2 b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.woff2
new file mode 100644
index 0000000000..d6b60c2a1c
Binary files /dev/null and b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.woff2 differ
diff --git a/frontend/src/style/_variables.scss b/frontend/src/style/_variables.scss
index 58c52163cb..3a0e3f75f6 100644
--- a/frontend/src/style/_variables.scss
+++ b/frontend/src/style/_variables.scss
@@ -5,6 +5,7 @@ $error: #ba3838;
 $eggshell: #f6f7f8;
 
 $light-grey: #f8f8f8;
+$soft-grey: #f5f5f5;
 $dark-grey: #e5e8eb;
 $dark-grey-border: #5d6974;