diff --git a/src/components/EmptyState.vue b/src/components/EmptyState.vue
index 2724529a7..34e00910c 100644
--- a/src/components/EmptyState.vue
+++ b/src/components/EmptyState.vue
@@ -78,10 +78,10 @@ $-empty-state-skins: (
     gap: 1rem;
     justify-content: center;
     max-width: map.get(variables.$breakpoints, 'phablet');
-    height: 100%;
     margin-right: auto;
     margin-left: auto;
     padding: 2rem 1.5rem;
+    text-align: center;
 
     @include bp('tablet-up') {
       gap: 1.5rem;
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 844368e46..0e0450e06 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -579,7 +579,7 @@ export default {
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--color-gray);
+  background-color: var(--color-gray-light);
 
   &__inner {
     position: relative;
diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 6c876de2f..243adb939 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -31,7 +31,7 @@
           </div>
         </div>
 
-        <progress-bar :progression="progression" compact />
+        <progress-bar :progression="progression" skin="yellow" compact />
       </div>
     </a>
   </router-link>
@@ -111,8 +111,8 @@ export default {
 
   &--active {
     color: var(--color-hover);
-    background-color: var(--color-blue-5);
-    border: 2px solid var(--color-hover);
+    background-color: var(--color-yellow-5);
+    border-color: var(--color-yellow);
   }
 }
 
diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
index 26ae19d8b..3a4080b13 100644
--- a/src/components/ProgressBar.vue
+++ b/src/components/ProgressBar.vue
@@ -1,12 +1,11 @@
 <template>
-  <div :class="['progress-bar', { 'progress-bar--compact': compact }]">
+  <div :class="['progress-bar', skinClass, { 'progress-bar--compact': compact }]">
     <h4 v-if="title" class="pkt-txt-14-medium">{{ title }}</h4>
     <div class="progress-bar__bar">
       <div
         :class="[
           'progress-bar__value',
           { 'progress-bar__value--indicator': progression > 0 && progression < 1 },
-          { 'progress-bar__value--complete': progression >= 1 },
         ]"
         :style="progressValueStyle"
         role="progressbar"
@@ -44,6 +43,11 @@ export default {
       type: Number,
       default: 0,
     },
+    skin: {
+      type: String,
+      default: 'blue',
+      validator: (value) => ['blue', 'yellow', 'green'].includes(value),
+    },
     leftLabel: {
       type: String,
       default: null,
@@ -75,6 +79,13 @@ export default {
     progressValueStyle() {
       return `width: ${this.percent}%`;
     },
+
+    skinClass() {
+      if (this.progression >= 1) {
+        return 'progress-bar--green';
+      }
+      return `progress-bar--${this.skin}`;
+    },
   },
 };
 </script>
@@ -83,6 +94,11 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .progress-bar {
+  // Default skin colors: `blue`
+  --progress-bar-bg: var(--color-grayscale-10);
+  --progress-bar-value: var(--color-blue);
+  --progress-bar-value-indicator: var(--color-blue-dark);
+
   width: 100%;
 
   h4 + &__bar {
@@ -92,7 +108,7 @@ export default {
   &__bar {
     position: relative;
     margin-bottom: 1rem;
-    background-color: var(--color-grayscale-10);
+    background-color: var(--progress-bar-bg);
 
     > span {
       position: absolute;
@@ -104,14 +120,10 @@ export default {
 
   &__value {
     height: 1rem;
-    background-color: var(--color-blue);
+    background-color: var(--progress-bar-value);
 
     &--indicator {
-      border-right: 1px solid var(--color-blue-dark);
-    }
-
-    &--complete {
-      background-color: var(--color-green);
+      border-right: 1px solid var(--progress-bar-value-indicator);
     }
   }
 
@@ -133,5 +145,15 @@ export default {
       height: 0.5rem;
     }
   }
+
+  &--green {
+    --progress-bar-value: var(--color-green);
+    --progress-bar-value-indicator: var(--color-green-dark);
+  }
+
+  &--yellow {
+    --progress-bar-value: var(--color-yellow);
+    --progress-bar-value-indicator: var(--color-yellow-70);
+  }
 }
 </style>
diff --git a/src/components/panes/KeyResultPane.vue b/src/components/panes/KeyResultPane.vue
index d2baed15e..4f3668786 100644
--- a/src/components/panes/KeyResultPane.vue
+++ b/src/components/panes/KeyResultPane.vue
@@ -13,57 +13,75 @@
       :breadcrumbs="breadcrumbs"
     />
 
-    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
-      {{ $t('general.keyResult') }}
-    </pkt-tag>
+    <div class="key-result-pane__details">
+      <div class="key-result-pane__header">
+        <pkt-tag text-style="normal-text" skin="yellow">
+          {{ $t('general.keyResult') }}
+        </pkt-tag>
+
+        <pkt-button
+          v-if="hasEditRights"
+          v-tooltip="$t('btn.updateKeyResult')"
+          skin="tertiary"
+          size="small"
+          variant="icon-only"
+          icon-name="edit"
+          @onClick="$emit('edit-key-result')"
+        />
+      </div>
 
-    <div class="key-result-pane__title">
       <h2 class="pkt-txt-18-medium">{{ activeKeyResult.name }}</h2>
-      <pkt-button
-        v-if="hasEditRights"
-        v-tooltip="$t('btn.updateKeyResult')"
-        skin="tertiary"
-        size="small"
-        variant="icon-only"
-        icon-name="edit"
-        @onClick="$emit('edit-key-result')"
+
+      <HTML-output
+        v-if="activeKeyResult.description"
+        class="key-result-pane__description"
+        :html="activeKeyResult.description"
       />
-    </div>
 
-    <HTML-output
-      v-if="activeKeyResult.description"
-      class="key-result-pane__description"
-      :html="activeKeyResult.description"
-    />
+      <progress-bar
+        class="key-result-pane__progression"
+        :title="`${$t('keyResult.progression')}:`"
+        :progression="progression"
+        :right-label="progressionRightLabel"
+        skin="yellow"
+      />
+    </div>
 
-    <progress-bar
-      class="key-result-pane__progression"
-      :title="`${$t('keyResult.progression')}:`"
-      :progression="progression"
-      :right-label="progressionRightLabel"
-    />
+    <div class="key-result-pane__values">
+      <div class="key-result-pane__values-header">
+        <h3 class="pkt-txt-16-medium">{{ $t('keyResult.registeredValues') }}</h3>
+        <pkt-button
+          v-if="hasEditRights"
+          :text="$t('keyResult.newValue')"
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="showValueModal = true"
+        />
+      </div>
+
+      <div v-if="isLoading">
+        <loading-small />
+        {{ $t('general.loading') }}
+      </div>
+
+      <widget-progress-history
+        v-else-if="progress.length"
+        :progress="progress"
+        :is-loading="isLoading"
+        @update-record="updateHistoryRecord"
+        @delete-record="deleteHistoryRecord"
+      />
 
-    <widget-progress-history
-      class="key-result-pane__values"
-      :title="$t('keyResult.registeredValues')"
-      :progress="progress"
-      :is-loading="isLoading"
-      @update-record="updateHistoryRecord"
-      @delete-record="deleteHistoryRecord"
-    >
-      <template #title-actions>
-        <div v-if="hasEditRights">
-          <pkt-button
-            :text="$t('keyResult.newValue')"
-            skin="primary"
-            size="small"
-            variant="icon-left"
-            icon-name="plus-sign"
-            @onClick="showValueModal = true"
-          />
-        </div>
-      </template>
-    </widget-progress-history>
+      <empty-state
+        v-else
+        icon="history"
+        :heading="$t('widget.history.empty.heading')"
+        :body="$t('empty.noKeyResultProgress')"
+        skin="warning"
+      />
+    </div>
 
     <widget class="key-result-pane__graph" :title="$t('general.graph')">
       <svg ref="graph" class="graph"></svg>
@@ -114,6 +132,8 @@ import WidgetKeyResultDetails from '@/components/widgets/WidgetKeyResultDetails.
 import HTMLOutput from '@/components/HTMLOutput.vue';
 import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
+import LoadingSmall from '@/components/LoadingSmall.vue';
+import EmptyState from '@/components/EmptyState.vue';
 
 export default {
   name: 'KeyResultPane',
@@ -131,6 +151,8 @@ export default {
     HTMLOutput,
     ProgressModal,
     ProgressBar,
+    LoadingSmall,
+    EmptyState,
   },
 
   data: () => ({
@@ -304,13 +326,28 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .key-result-pane {
-  &__title {
+  background-color: #faf6f1;
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border-left: 0.25rem solid var(--color-yellow-50);
+
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
+
+  &__header {
     display: flex;
     justify-content: space-between;
     text-wrap: balance;
 
     .pkt-btn {
-      margin: -0.75rem 0 0 1rem;
+      margin: -0.5rem -0.5rem 0 0;
     }
   }
 
@@ -318,27 +355,37 @@ export default {
     margin-top: 1rem;
   }
 
-  &__values,
-  &__graph {
-    padding: 0;
-    border: 0;
-  }
   &__values {
-    margin-top: 1rem;
+    margin-top: 3rem;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+    }
+
+    ::v-deep .widget__header {
+      // Temporarily hide the history widget header. The table is
+      // to be replaced
+      display: none;
+    }
   }
 
-  ::v-deep .widget {
-    padding: 1.5rem 0;
+  &__graph {
+    margin-top: 3rem;
 
-    h3 {
-      @include get-text('pkt-txt-16-medium');
+    ::v-deep .widget__header {
+      h3 {
+        @include get-text('pkt-txt-16-medium');
+      }
     }
   }
 
   &__widgets {
-    ::v-deep .widget {
-      border: 0;
+    margin-top: 3rem;
 
+    ::v-deep .widget__header {
       h3 {
         @include get-text('pkt-txt-16');
       }
@@ -346,6 +393,15 @@ export default {
   }
 }
 
+.empty {
+  background-color: transparent;
+}
+
+::v-deep .widget {
+  padding: 0;
+  border: 0;
+}
+
 ::v-deep .pkt-breadcrumbs--mobile {
   width: 100%;
 
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index e5e70d64b..bd3c4c58d 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -11,65 +11,68 @@
       :breadcrumbs="breadcrumbs"
     />
 
-    <pkt-tag text-style="normal-text" skin="grey" class="mt-size-8">
-      {{ $t('general.objective') }}
-    </pkt-tag>
+    <div class="objective-pane__details">
+      <div class="objective-pane__header">
+        <pkt-tag text-style="normal-text" skin="blue">
+          {{ $t('general.objective') }}
+        </pkt-tag>
 
-    <div class="objective-pane__title">
-      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
-      <pkt-button
-        v-if="hasEditRights"
-        v-tooltip="$t('btn.updateObjective')"
-        skin="tertiary"
-        variant="icon-only"
-        size="small"
-        icon-name="edit"
-        @onClick="$emit('edit-objective')"
-      />
-    </div>
+        <pkt-button
+          v-if="hasEditRights"
+          v-tooltip="$t('btn.updateObjective')"
+          skin="tertiary"
+          variant="icon-only"
+          size="small"
+          icon-name="edit"
+          @onClick="$emit('edit-objective')"
+        />
+      </div>
 
-    <HTML-output
-      v-if="activeObjective.description"
-      class="objective-pane__description"
-      :html="activeObjective.description"
-    />
+      <h2 class="pkt-txt-18-medium">{{ activeObjective.name }}</h2>
 
-    <div class="objective-pane__members">
-      <div>
-        <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
-        <pkt-tag text-style="normal-text" skin="yellow" size="small">
-          {{ activeObjective.parent.name }}
-        </pkt-tag>
-      </div>
+      <HTML-output
+        v-if="activeObjective.description"
+        class="objective-pane__description"
+        :html="activeObjective.description"
+      />
 
-      <div class="objective-pane__contributors">
-        <h4 class="pkt-txt-14-medium">{{ $t('objective.contributors') }}</h4>
-        <ul>
-          <li v-for="c in contributors" :key="c.id" class="objective-pane__contributor">
-            <span class="pkt-txt-14">{{ c.name }}</span>
-            <span
-              class="objective-pane__contributor-tag"
-              :class="[
-                'objective-link-card__tag',
-                'pkt-txt-12-bold',
-                `objective-link-card__tag--${contributorTagMode(c.name)}`,
-              ]"
-              :style="{ background: contributorTagColor(c.name) }"
-            ></span>
-          </li>
-        </ul>
+      <div class="objective-pane__members">
+        <div>
+          <h4 class="pkt-txt-14-medium">{{ $t('objective.owner') }}</h4>
+          <pkt-tag text-style="normal-text" skin="yellow" size="small">
+            {{ activeObjective.parent.name }}
+          </pkt-tag>
+        </div>
+
+        <div class="objective-pane__contributors">
+          <h4 class="pkt-txt-14-medium">{{ $t('objective.contributors') }}</h4>
+          <ul>
+            <li v-for="c in contributors" :key="c.id" class="objective-pane__contributor">
+              <span class="pkt-txt-14">{{ c.name }}</span>
+              <span
+                class="objective-pane__contributor-tag"
+                :class="[
+                  'objective-link-card__tag',
+                  'pkt-txt-12-bold',
+                  `objective-link-card__tag--${contributorTagMode(c.name)}`,
+                ]"
+                :style="{ background: contributorTagColor(c.name) }"
+              ></span>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
 
-    <progress-bar
-      class="objective-pane__progression"
-      :title="$t('objective.progressionTitle')"
-      :progression="activeObjective.progression"
-    />
+      <progress-bar
+        class="objective-pane__progression"
+        :title="$t('objective.progressionTitle')"
+        :progression="activeObjective.progression"
+      />
 
-    <div v-if="period" class="mt-size-16">
-      <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
-      <div class="pkt-txt-14">{{ periodDates(period) }}</div>
+      <div v-if="period" class="mt-size-16">
+        <div class="pkt-txt-14-medium">{{ $t('objective.period') }}</div>
+        <div class="pkt-txt-14">{{ periodDates(period) }}</div>
+      </div>
     </div>
 
     <div class="objective-pane__key-results">
@@ -273,15 +276,28 @@ export default {
 @use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
 
 .objective-pane {
-  background-color: var(--color-gray-light);
+  background-color: #f5f5f8;
 
-  &__title {
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    background-color: var(--color-white);
+    border-left: 0.25rem solid var(--color-blue-light);
+
+    @include bp('laptop-up') {
+      margin-top: 2rem;
+    }
+  }
+
+  &__header {
     display: flex;
     justify-content: space-between;
     text-wrap: balance;
 
     .pkt-btn {
-      margin: -0.75rem 0 0 1rem;
+      margin: -0.5rem -0.5rem 0 0;
     }
   }
 
@@ -322,10 +338,6 @@ export default {
   &__key-results {
     margin-top: 3rem;
 
-    @include bp('tablet-up') {
-      padding-right: 1.5rem;
-    }
-
     &-header {
       display: flex;
       align-items: center;
@@ -337,7 +349,7 @@ export default {
       position: relative;
 
       @include bp('tablet-up') {
-        margin-left: 3rem;
+        margin: 0 3rem;
       }
 
       & .key-result-link-card {
@@ -385,6 +397,10 @@ export default {
   }
 }
 
+.empty {
+  background-color: transparent;
+}
+
 ::v-deep .pkt-breadcrumbs--mobile {
   width: 100%;
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ca9bd54d7..451db6587 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -113,7 +113,7 @@ body.using-mouse :not([class^='pkt-'], [class*=' pkt-']):focus {
   --color-green-dark-15: #b8d9d4;
   --color-red-100: #4d0800;
   --color-red-20: #fad0cb;
-  --color-yellow-80: #774c01;
+  --color-yellow-70: #966a1c;
 
   // Colors in RGB value - add more if needed. SCSS rgba() function
   // can read hex numbers with CSS Variables.