diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
index 54f673747ab..e7593cc4c3b 100644
--- a/frontend/src/components/VButton.vue
+++ b/frontend/src/components/VButton.vue
@@ -358,10 +358,10 @@ a.button {
   @apply border border-dark-charcoal-20 bg-white text-dark-charcoal hover:border-dark-charcoal;
 }
 .transparent-gray {
-  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal-10;
+  @apply bg-tx text-dark-charcoal hover:bg-dark-charcoal-10;
 }
 .transparent-dark {
-  @apply bg-white text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
+  @apply bg-tx text-dark-charcoal hover:bg-dark-charcoal hover:text-white;
 }
 
 .primary {
diff --git a/frontend/src/components/meta/VButton.stories.mdx b/frontend/src/components/meta/VButton.stories.mdx
index 3b69327cc66..5ecfca8e3f4 100644
--- a/frontend/src/components/meta/VButton.stories.mdx
+++ b/frontend/src/components/meta/VButton.stories.mdx
@@ -31,7 +31,9 @@ export const buttonSizes = allButtonSizes.filter(
 
 export const Template = (args) => ({
   template: `
-    <div id="wrapper" class="w-40 h-16 flex items-center justify-center bg-white">
+    <div id="wrapper"
+        class="w-40 h-16 flex items-center justify-center"
+        :class="args?.variant.startsWith('transparent') ? 'bg-dark-charcoal-06': 'bg-white'">
     <VButton v-bind="args" @click="onClick" href="/">
       Code is Poetry
     </VButton>