diff --git a/app/views/mermaid/index.html.erb b/app/views/mermaid/index.html.erb
index 4d553e49c..3e35be2da 100644
--- a/app/views/mermaid/index.html.erb
+++ b/app/views/mermaid/index.html.erb
@@ -1,7 +1,23 @@
 <h1> Driving in Great Britain on a non-GB licence</h1>
 <pre class="mermaid">
+  %%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'background': '#FFFFFF',
+      'primaryColor': '#ffffff',
+      'primaryTextColor': '#0B0C0C',
+      'lineColor': '#0b0c0c',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff',
+      'fontSize': '19px'
+    }
+  }
+}%%
+
             flowchart TD
             accTitle: Flowchart for Driving in Great Britain on a non-GB licence
+            accDescr: A flowchart for the Driving in Great Britain on a non-GB licence smart answer
             AA["`Start`"]:::start
             A["`Q1 Are you:`"]:::question
             B["`Q2 What kind of driving licence do you have?`"]:::question
@@ -101,14 +117,17 @@
             F---NU
             NU-->S
 
-
-      classDef answer fill: #f3f2f1
-      classDef outcome fill:#003078,color:#ffffff;
-      classDef question fill: #ffffff
-      classDef start fill:#00703c
+      classDef answer fill: #F3F2F1, stroke:#505A5F;
+      classDef outcome fill: #6FA4D2
+      classDef question fill: #B1B4B6, stroke:#505A5F;
+      classDef start fill:#44ADA5
     </pre>
+<style>
+  .container{
+      width: 100% !important;
+  }
+</style>
 <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
     mermaid.initialize({ startOnLoad: true});
 </script>
-