diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css
index 6aeb8db..a5de725 100644
--- a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css
+++ b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css
@@ -39,3 +39,9 @@
   height: 100%;
   padding: 15px;
 }
+
+h1 {
+  font-style: italic;
+  /* TODO: Orange for Duch version */
+  color: blueviolet;
+}
diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
index 7383c08..372e400 100644
--- a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
@@ -58,8 +58,14 @@ const BenchmarkGridItem = ({ type }: { type: string }) => {
       title=""
       text=""
       highlight={t(`deployment_frequency.overall_labels.${benchmark}`)}
-      // to do: think of text colouring for different scenarios
-      textColour="positiveHighlight"
+      healthStatus={
+        {
+          'on-demand': 'positive',
+          'lt-6month': 'critical',
+          'week-month': 'neutral',
+          'month-6month': 'negative',
+        }[benchmark]
+      }
     />
   ) : (
     <CircularProgress />
diff --git a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
index 64033d3..9e1abe2 100644
--- a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
+++ b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
@@ -1,7 +1,7 @@
 .highlight {
   text-align: center;
   width: 100%;
-  font-size: 70px;
+  font-size: 42px;
 }
 
 .notification {
@@ -9,7 +9,7 @@
   font-style: italic;
 }
 
-.warning {
+.negative {
   color: #ffcc00;
 }
 
@@ -17,6 +17,20 @@
   color: red;
 }
 
-.positiveHighlight {
+.positive {
   color: #198754;
 }
+
+.neutral {
+  color: default;
+}
+
+.highlightTextBoxBorder {
+  padding: 20px;
+  border-style: hidden;
+  background-color: #333333;
+}
+
+.margin-left-offset-m25 {
+  margin: 0 0 0 -8px;
+}
diff --git a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx
index 203d2a2..a3622aa 100644
--- a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx
@@ -7,7 +7,7 @@ describe('HighlightTextBoxComponent', () => {
     const { getByText, queryByText } = render(
       <HighlightTextBoxComponent
         title="example title"
-        textColour="warning"
+        healthStatus="warning"
         highlight="example highlight"
       />,
     );
@@ -23,7 +23,7 @@ describe('HighlightTextBoxComponent', () => {
     const { queryByText } = render(
       <HighlightTextBoxComponent
         title="example title"
-        textColour="warning"
+        healthStatus="warning"
         highlight="example highlight"
         text="example text"
       />,
diff --git a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
index 07e9d62..9e7be05 100644
--- a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
@@ -3,7 +3,7 @@ import './HighlightTextBoxComponent.css';
 
 interface HighlightTextBoxComponentProps {
   title: string;
-  textColour: 'warning' | 'critical' | 'positiveHighlight';
+  healthStatus: string;
   highlight: string;
   text?: string;
 }
@@ -11,9 +11,9 @@ export const HighlightTextBoxComponent = (
   props: HighlightTextBoxComponentProps,
 ) => {
   return (
-    <div>
-      <h1>{props.title}</h1>
-      <div className={props.textColour}>
+    <div className="highlightTextBoxBorder">
+      <h1 className="margin-left-offset-m25 headerStyle">{props.title}</h1>
+      <div className={props.healthStatus}>
         <div className="highlight">{props.highlight}</div>
       </div>
       <div className="notification">{props.text}</div>
diff --git a/backstage-plugin/plugins/open-dora/src/locales/en/translation.json b/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
index fa3916c..2f0e798 100644
--- a/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
+++ b/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
@@ -2,7 +2,8 @@
   "deployment_frequency": {
     "labels": {
       "deployment_frequency": "Deployment Frequency",
-      "deployment_frequency_average": "Deployment Frequency Average"
+      "deployment_frequency_average": "Deployment Frequency Average",
+      "deployment_frequency_overall": "Deployment frequency overall"
     },
     "overall_labels": {
       "lt-6month": "Fewer than once per six months",