diff --git a/web/app/components/snippets/components/snippet-collapsed-preview.tsx b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
index 81632114df9..3646cb78a42 100644
--- a/web/app/components/snippets/components/snippet-collapsed-preview.tsx
+++ b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
@@ -51,7 +51,7 @@ export function SnippetCollapsedPreview({
           )}
       <div
         className={cn(
-          'mt-4 flex min-w-6 items-center justify-center rounded-full bg-background-default-subtle px-2 text-2xs leading-4 font-normal text-text-tertiary',
+          'mt-4 flex min-w-6 items-center justify-center rounded-full border border-divider-subtle bg-components-badge-bg-gray-soft px-2 text-2xs leading-4 font-normal text-text-secondary',
           inputFieldCount > 99 ? 'h-5' : 'size-5',
         )}
         aria-label={`${inputFieldCount} ${t('inputVariables', { ns: 'snippet' })}`}