diff --git a/src/app.css b/src/app.css
deleted file mode 100644
index b87aec7..0000000
--- a/src/app.css
+++ /dev/null
@@ -1,80 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/assets/green_check.svg b/src/assets/green_check.svg
new file mode 100644
index 0000000..c583b6c
--- /dev/null
+++ b/src/assets/green_check.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#059E6F"/>
+<path d="M10 14L13 17L18.5 11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/red_cross.svg b/src/assets/red_cross.svg
new file mode 100644
index 0000000..f5f42a4
--- /dev/null
+++ b/src/assets/red_cross.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" rx="14" fill="#D91F0A"/>
+<path d="M18.5 9.5L9.5 18.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 9.5L18.5 18.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/Contrast.svelte b/src/pages/Contrast.svelte
index 8780d7f..8bc6744 100644
--- a/src/pages/Contrast.svelte
+++ b/src/pages/Contrast.svelte
@@ -73,23 +73,36 @@
   <p>
     This is primarily a tool for the Warp team to check the contrast between the
     various text colours and background colours. Currently only for FINN
-    colours.
-
-    The colour contrast for small and normal text must be minimun <strong>4.5 : 1</strong>. 
+    colours. The colour contrast for small and normal text must be minimun <strong
+      >4.5 : 1</strong
+    >.
   </p>
 
+  <!-- Checkbox 
+  <div class="mt-32">
+    <input
+    type="checkbox"
+    id="accessibilityOnly"
+    name="accessibilityOnly"
+    value="checkedValue"
+  />
+  <label for="accessibilityOnly">Only accessible colour combinations</label>
+
+  </div>
+  -->
+  
   {#if backgroundTokens.length === 0}
     <p>No background colours loaded</p>
   {:else}
     {#each backgroundTokens as background (background.name)}
       <h2 class="mt-56 text-ml">{background.name}</h2>
 
-      <div class="flex">
+      <div class="flex mt-8">
         <div
-          class="colorsquare w-24 h-24 rounded-4 border mr-8"
+          class="colorsquare w-24 h-24 rounded-4 mr-8"
           style="background-color: {background.value};"
         />
-        <p>{background.colorName}, {background.value}</p>
+        <p> {background.colorName}</p>
       </div>
 
       <div>
@@ -98,16 +111,17 @@
         {:else}
           <!-- Table for foreground colours -->
           <table
-            class="mt-24 mb-56 border-spacing-x-24"
-            style="border-collapse: separate;"
+            class="mt-32 border-spacing-x-24"
+            style="border-collapse: collapse;"
           >
+            <!-- Column headers -->
             <thead>
-              <tr class="text-left">
+              <tr class="text-left mb-48">
                 <th>Text colour name</th>
                 <th>Colour</th>
                 <th>Example</th>
                 <th>Contrast</th>
-                <th>Usage</th>
+                <th>Accessible</th>
               </tr>
             </thead>
 
@@ -116,49 +130,50 @@
               {#each foregroundTokens as token (token.name)}
                 <tr>
                   <!-- Name -->
-                  <td>{token.name}</td>
+                  <td>
+                    <p class="mt-6">{token.name}</p>
+                  </td>
                   <!-- Colour -->
-
                   <td>
-                    <div class="flex mt-8">
+                    <div class="flex items-center">
                       <div
-                        class="colorsquare w-24 h-24 rounded-4 border mr-8 flex justify-center items-center"
-                        style="background-color: {background.value};"
-                      >
-                        <div
-                          class="w-16 h-16 rounded-2"
-                          style="background-color: {token.value};"
-                        />
-                      </div>
-
-                      <p>{token.colorName}</p>
+                        class="w-24 h-24 mr-8 rounded-2"
+                        style="background-color: {token.value};"
+                      />
+                      <p class="mt-6">{token.colorName}</p>
                     </div>
                   </td>
                   <!-- Example -->
                   <td>
                     <div
-                      class="mt-2 px-8 colorsquare border rounded-4 flex justify-center items-center h-24"
+                      class="h-48 w-128 colorsquare rounded-4 flex justify-center items-center"
                       style="background-color: {background.value};"
                     >
-                      <p class="mb-0" style="color: {token.value};">ABC abc</p>
+                      <p class="mb-2" style="color: {token.value};">ABC abc</p>
                     </div>
                   </td>
                   <!-- Contrast -->
-                  <td class="text-right">
+                  <td class="text-left">
+                    <p class="mt-6">
                       {checkColors(token.value, background.value).contrast} : 1
+                    </p>
                   </td>
-                  <!-- Usage -->
-                  <td>
-                      <!-- Evaluation OK or not -->
-                      {#if parseFloat(checkColors(token.value, background.value).contrast) > 4.5}
-                        <div class="px-8 s-bg-positive s-text-inverted rounded-4 flex justify-center items-center h-24" >
-                          <p class="mt-8">OK</p>
-                        </div>
-                      {:else}
-                        <div class="px-8 s-bg-negative s-text-inverted rounded-4 flex justify-center items-center h-24">
-                          <p class="mt-8">Not OK</p>
-                        </div>
-                      {/if}
+                  <!-- Accessible -->
+                  <td class="flex justify-center items-center">
+                    <!-- Evaluation OK or not -->
+                    {#if parseFloat(checkColors(token.value, background.value).contrast) > 4.5}
+                      <img
+                        class="h-24 mt-10"
+                        src="../src/assets/green_check.svg"
+                        alt="Green check"
+                      />
+                    {:else}
+                      <img
+                        class="h-24 mt-10"
+                        src="../src/assets/red_cross.svg"
+                        alt="Red cross"
+                      />
+                    {/if}
                   </td>
                 </tr>
               {/each}
@@ -180,7 +195,7 @@
   main {
     padding: 16px;
     margin: auto;
-    max-width: 700px;
+    max-width: 900px;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -191,10 +206,46 @@
   }
 
   table {
-    margin-left: -24px; /* Adjust to match your border-spacing value */
+    /* margin-left: -24px;  Adjust to match your border-spacing value */
+  }
+
+  td,
+  th {
+    padding-right: 24px; /* Space to the right of the cell content */
+    padding-left: 24px; /* Space to the right of the cell content */
+    padding-top: 12px;
+    padding-bottom: 12px;
+    vertical-align: middle;
+  }
+
+  tr {
+    border-bottom: 1px solid #000;
+    border-color: var(--w-s-color-border);
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  tr:last-child {
+    border-bottom: none;
   }
 
-  td:first-child {
+  td:first-child,
+  th:first-child {
     padding-left: 0;
   }
+
+  td:last-child,
+  th:last-child {
+    padding-right: 0;
+  }
+
+  input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+  }
+
+  input[type="checkbox"],
+label {
+    vertical-align: middle;
+}
 </style>