diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 05031f055..93ac36a28 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -93,7 +93,7 @@ const hasQuotedMessage = computed(() => {
         <template v-else>
           <Letter
             v-if="showQuotedMessage"
-            class-name="prose prose-bubble !max-w-none"
+            class-name="prose prose-bubble !max-w-none letter-render"
             :allowed-css-properties="[
               ...allowedCssProperties,
               'transform',
@@ -104,7 +104,7 @@ const hasQuotedMessage = computed(() => {
           />
           <Letter
             v-else
-            class-name="prose prose-bubble !max-w-none"
+            class-name="prose prose-bubble !max-w-none letter-render"
             :html="unquotedHTML"
             :allowed-css-properties="[
               ...allowedCssProperties,
@@ -143,3 +143,21 @@ const hasQuotedMessage = computed(() => {
     </section>
   </BaseBubble>
 </template>
+
+<style lang="scss">
+// Tailwind resets break the rendering of google drive link in Gmail messages
+// This fixes it using https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+
+.letter-render [class*='gmail_drive_chip'] {
+  box-sizing: initial;
+  @apply bg-n-slate-4 border-n-slate-6 rounded-md !important;
+
+  a {
+    @apply text-n-slate-12 !important;
+
+    img {
+      display: inline-block;
+    }
+  }
+}
+</style>