diff --git a/packages/client/src/components/app/spreadsheet/DateCell.svelte b/packages/client/src/components/app/spreadsheet/DateCell.svelte
index 5f0c0cdfa1..887bf11c65 100644
--- a/packages/client/src/components/app/spreadsheet/DateCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/DateCell.svelte
@@ -48,13 +48,13 @@
 
 <style>
   .container {
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex: 1 1 auto;
-    gap: 4px;
+    gap: var(--cell-spacing);
   }
   .value {
     flex: 1 1 auto;
diff --git a/packages/client/src/components/app/spreadsheet/OptionsCell.svelte b/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
index 46d3552ad2..dd3cc8f5a3 100644
--- a/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/OptionsCell.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
+  import { getColor } from "./utils"
 
   export let value
   export let schema
@@ -22,12 +23,9 @@
     }
   }
 
-  const getColor = value => {
-    const index = options.indexOf(value)
-    if (!value || index === -1) {
-      return null
-    }
-    return `hsla(${((index + 1) * 222) % 360}, 90%, 75%, 0.3)`
+  const getOptionColor = value => {
+    const index = value ? options.indexOf(value) : null
+    return getColor(index)
   }
 
   const toggleOption = option => {
@@ -60,7 +58,7 @@
 >
   <div class="values">
     {#each values as val (val)}
-      {@const color = getColor(val)}
+      {@const color = getOptionColor(val)}
       {#if color}
         <div class="badge text" style="--color: {color}">
           {val}
@@ -80,7 +78,7 @@
   {#if open}
     <div class="options">
       {#each values as val (val)}
-        {@const color = getColor(val)}
+        {@const color = getOptionColor(val)}
         <div class="option" on:click={() => toggleOption(val)}>
           <div class="badge text" style="--color: {color}">
             {val}
@@ -93,7 +91,7 @@
       {/each}
       {#each unselectedOptions as option (option)}
         <div class="option" on:click={() => toggleOption(option)}>
-          <div class="badge text" style="--color: {getColor(option)}">
+          <div class="badge text" style="--color: {getOptionColor(option)}">
             {option}
           </div>
         </div>
@@ -121,9 +119,9 @@
     align-items: center;
     flex: 1 1 auto;
     width: 0;
-    gap: 4px;
+    gap: var(--cell-spacing);
     overflow: hidden;
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
   }
   .text {
     overflow: hidden;
@@ -134,9 +132,9 @@
     flex: 0 0 auto;
   }
   .badge {
-    padding: 2px 8px;
+    padding: 2px var(--cell-padding);
     background: var(--color);
-    border-radius: 8px;
+    border-radius: var(--cell-padding);
     user-select: none;
   }
   .arrow {
@@ -153,6 +151,13 @@
       var(--cell-background) 40%
     );
   }
+  :global(.cell.hovered) .arrow {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--cell-background-hover) 40%
+    );
+  }
   .options {
     min-width: 100%;
     position: absolute;
@@ -168,19 +173,19 @@
     z-index: 1;
   }
   .option {
-    flex: 0 0 32px;
-    padding: 0 8px;
+    flex: 0 0 var(--cell-height);
+    padding: 0 var(--cell-padding);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 4px;
-    background-color: var(--spectrum-global-color-gray-50);
+    gap: var(--cell-spacing);
+    background-color: var(--cell-background);
   }
   .option:first-child {
-    flex: 0 0 31px;
+    flex: 0 0 calc(var(--cell-height) - 1px);
   }
   .option:hover {
-    background-color: var(--spectrum-global-color-gray-100);
+    background-color: var(--cell-background-hover);
   }
 </style>
diff --git a/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte b/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte
index e47633d603..4c1a32ca16 100644
--- a/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/RelationshipCell.svelte
@@ -1,14 +1,7 @@
 <script>
+  import { getColor } from "./utils"
+
   export let value
-
-  $: console.log(value)
-
-  const getColor = idx => {
-    if (!value || idx === -1) {
-      return null
-    }
-    return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
-  }
 </script>
 
 <div class="container">
@@ -24,17 +17,17 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     flex: 1 1 auto;
     width: 0;
-    gap: 4px;
+    gap: var(--cell-spacing);
     overflow: hidden;
   }
   .badge {
     flex: 0 0 auto;
-    padding: 2px 8px;
+    padding: 2px var(--cell-padding);
     background: var(--color);
-    border-radius: 8px;
+    border-radius: var(--cell-padding);
     user-select: none;
   }
 </style>
diff --git a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
index 60eeda6898..6a5cec15d2 100644
--- a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
+++ b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
@@ -369,6 +369,10 @@
     /* Variables */
     --cell-background: var(--spectrum-global-color-gray-50);
     --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --cell-padding: 8px;
+    --cell-spacing: 4px;
+    --cell-height: 32px;
+    --cell-font-size: 14px;
   }
   .spreadsheet {
     display: grid;
@@ -407,7 +411,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: 4px;
+    gap: var(--cell-spacing);
   }
   .delete {
     display: flex;
@@ -424,7 +428,7 @@
   }
 
   .cell {
-    height: 32px;
+    height: var(--cell-height);
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     border-right: 1px solid var(--spectrum-global-color-gray-300);
     display: flex;
@@ -432,14 +436,13 @@
     justify-content: flex-start;
     align-items: center;
     color: var(--spectrum-global-color-gray-900);
-    font-size: 14px;
-    gap: 4px;
+    font-size: var(--cell-font-size);
+    gap: var(--cell-spacing);
     background: var(--cell-background);
     position: relative;
   }
   .cell.hovered {
     background: var(--cell-background-hover);
-    --cell-background: var(--cell-background-hover);
   }
   .cell.selected {
     box-shadow: inset 0 0 0 2px var(--spectrum-global-color-blue-400);
@@ -470,7 +473,7 @@
     background: var(--spectrum-global-color-gray-200);
     position: sticky;
     top: 0;
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     z-index: 3;
     border-color: var(--spectrum-global-color-gray-400);
   }
diff --git a/packages/client/src/components/app/spreadsheet/TextCell.svelte b/packages/client/src/components/app/spreadsheet/TextCell.svelte
index 19531c88aa..40d15818f8 100644
--- a/packages/client/src/components/app/spreadsheet/TextCell.svelte
+++ b/packages/client/src/components/app/spreadsheet/TextCell.svelte
@@ -22,7 +22,7 @@
 
 <style>
   .text-cell {
-    padding: 0 8px;
+    padding: 0 var(--cell-padding);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -30,12 +30,12 @@
   input {
     border: none;
     padding: 0;
-    margin: 0 8px;
+    margin: 0 var(--cell-padding);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     background: none;
-    font-size: 14px;
+    font-size: var(--cell-font-size);
     font-family: var(--font-sans);
     color: inherit;
   }
diff --git a/packages/client/src/components/app/spreadsheet/utils.js b/packages/client/src/components/app/spreadsheet/utils.js
new file mode 100644
index 0000000000..9c708c3237
--- /dev/null
+++ b/packages/client/src/components/app/spreadsheet/utils.js
@@ -0,0 +1,6 @@
+export const getColor = idx => {
+  if (idx == null || idx === -1) {
+    return null
+  }
+  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
+}