diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 4f0db333e..c3821fc96 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { Badge } from '~/components/ds/ui'
 import { CaretUpDownIcon } from '@phosphor-icons/react/CaretUpDown'
 import { CheckIcon } from '@phosphor-icons/react/Check'
 import { twMerge } from 'tailwind-merge'
@@ -13,6 +14,7 @@ export type SelectOption = {
   label: string
   value: string
   logo?: string
+  badge?: string
 }
 
 export type SelectProps<T extends SelectOption> = {
@@ -63,6 +65,9 @@ export function Select<T extends SelectOption>({
               </span>
             ) : null}
             <span className="truncate font-medium">{selectedOption.label}</span>
+            {selectedOption.badge ? (
+              <Badge>{selectedOption.badge}</Badge>
+            ) : null}
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
               <CaretUpDownIcon
                 className="h-4 w-4 opacity-40"
@@ -92,6 +97,7 @@ export function Select<T extends SelectOption>({
                 />
               ) : null}
               <span className="truncate">{option.label}</span>
+              {option.badge ? <Badge>{option.badge}</Badge> : null}
               {selected === option.value ? (
                 <CheckIcon
                   className="h-4 w-4 absolute right-2 text-gray-800 dark:text-gray-400"
diff --git a/src/components/VersionSelect.tsx b/src/components/VersionSelect.tsx
index 5e46cb024..e92aa3410 100644
--- a/src/components/VersionSelect.tsx
+++ b/src/components/VersionSelect.tsx
@@ -101,7 +101,7 @@ function useVersionConfig({
     const available = versions.map(
       (version): SelectOption =>
         version === latestVersion
-          ? { label: `${version} - Latest`, value: 'latest' }
+          ? { label: version, value: 'latest', badge: 'Latest' }
           : { label: version, value: version },
     )