diff --git a/frontend/src/metabase/components/TokenField/TokenField.styled.tsx b/frontend/src/metabase/components/TokenField/TokenField.styled.tsx
index a134368a440fab8af9aa5aa0f83dcb04fcc04f27..b18fb3b73853650484546f949ce1c7b95c921d9e 100644
--- a/frontend/src/metabase/components/TokenField/TokenField.styled.tsx
+++ b/frontend/src/metabase/components/TokenField/TokenField.styled.tsx
@@ -35,3 +35,9 @@ export const TokenInputItem = styled.li`
     height: 46px;
   }
 `;
+
+export const PrefixContainer = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${color("text-medium")};
+`;
diff --git a/frontend/src/metabase/components/TokenField/TokenField.tsx b/frontend/src/metabase/components/TokenField/TokenField.tsx
index 7f59dbec78ce6fd90ba318c11639746e337063c1..30b0093e882a5a8271e5477cdc6d57a9585e446c 100644
--- a/frontend/src/metabase/components/TokenField/TokenField.tsx
+++ b/frontend/src/metabase/components/TokenField/TokenField.tsx
@@ -19,7 +19,11 @@ import {
 } from "metabase/lib/keyboard";
 import { isObscured } from "metabase/lib/dom";
 
-import { TokenInputItem, TokenFieldContainer } from "./TokenField.styled";
+import {
+  TokenInputItem,
+  TokenFieldContainer,
+  PrefixContainer,
+} from "./TokenField.styled";
 
 export type LayoutRendererArgs = {
   valuesList: React.ReactNode;
@@ -579,9 +583,7 @@ export default class TokenField extends Component<
         onMouseDownCapture={this.onMouseDownCapture}
       >
         {!!prefix && (
-          <span className="text-medium mb1 py1 pr1" data-testid="input-prefix">
-            {prefix}
-          </span>
+          <PrefixContainer data-testid="input-prefix">{prefix}</PrefixContainer>
         )}
         {value.map((v, index) => (
           <TokenFieldItem key={index} isValid={validateValue(v)}>