diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
index e54fa73fcf..2ef507e1b8 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/index.vue
@@ -102,10 +102,7 @@
           backgroundColor: $themeTokens.error,
           color: $themeTokens.textInverted,
           ':hover': {
-            // Vuetify generates this based on theme colors, but oddly it doesn't make it
-            // available in the theme tokens
-            // TODO: Replace with KDS lighten/darken utilities
-            backgroundColor: 'var(--v-error-darken1)',
+            backgroundColor: $darken1($themeTokens.error),
           },
         }"
         @click="showDeleteConfirmation = true"
@@ -233,4 +230,4 @@
 .row {
   padding: 8px 0;
 }
-</style>
\ No newline at end of file
+</style>