diff --git a/web/components/bio/profile-bio.tsx b/web/components/bio/profile-bio.tsx
index 9252b63..64ca19b 100644
--- a/web/components/bio/profile-bio.tsx
+++ b/web/components/bio/profile-bio.tsx
@@ -7,7 +7,6 @@ import {MAX_INT, MIN_BIO_LENGTH} from "common/constants";
 import {useTextEditor} from "web/components/widgets/editor";
 import {JSONContent} from "@tiptap/core"
 import {useT} from "web/lib/locale";
-import {Row} from "web/components/layout/row";
 import {Tooltip} from "web/components/widgets/tooltip";
 import {QuestionMarkCircleIcon} from "@heroicons/react/outline";
 
@@ -15,13 +14,15 @@ export default function TooShortBio() {
   const t = useT()
   const text = t('profile.bio.too_short_tooltip', "Since your bio is too short, Compass' algorithm filters out your profile from search results (unless \"Include Short Bios\" is selected). This ensures searches show meaningful profiles.");
   return (
-    <Row className="text-red-600 gap-1">
-      <p>{t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}</p>
-      <Tooltip
-        text={text}>
-        <QuestionMarkCircleIcon className="w-5 h-5 inline-flex align-middle"/>
-      </Tooltip>
-    </Row>
+    <p className="text-red-600">
+      {t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}{" "}
+      <span className="inline-flex align-middle">
+          <Tooltip
+            text={text}>
+            <QuestionMarkCircleIcon className="w-5 h-5"/>
+          </Tooltip>
+        </span>
+    </p>
   );
 }
 
diff --git a/web/components/widgets/tooltip.tsx b/web/components/widgets/tooltip.tsx
index 513d978..cda1927 100644
--- a/web/components/widgets/tooltip.tsx
+++ b/web/components/widgets/tooltip.tsx
@@ -11,8 +11,8 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react'
-import { Transition } from '@headlessui/react'
-import { ReactNode, useRef, useState } from 'react'
+import {Transition} from '@headlessui/react'
+import {ReactNode, useRef, useState} from 'react'
 
 // See https://floating-ui.com/docs/react-dom
 
@@ -102,14 +102,14 @@ export function Tooltip(props: {
         role="tooltip"
         ref={floating}
         style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
-        className="text-ink-0 bg-ink-700 z-20 w-max max-w-xs whitespace-normal rounded px-2 py-1 text-center text-sm font-medium"
+        className="text-ink-1000 bg-canvas-0 z-20 w-max max-w-xs whitespace-normal rounded px-2 py-1 text-center text-sm font-medium"
         suppressHydrationWarning={suppressHydrationWarning}
         {...getFloatingProps()}
       >
         {text}
         <div
           ref={arrowRef}
-          className="bg-ink-700 absolute h-2 w-2 rotate-45"
+          className="bg-canvas-0 absolute h-2 w-2 rotate-45"
           style={{
             top: arrowY != null ? arrowY : '',
             left: arrowX != null ? arrowX : '',