diff --git a/.changeset/tough-peas-sort.md b/.changeset/tough-peas-sort.md
new file mode 100644
index 00000000000..bf03ca68455
--- /dev/null
+++ b/.changeset/tough-peas-sort.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add string type to the `counter` prop and display loading counter for all
diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx
index f4db6ec23b1..c5b1f78eb03 100644
--- a/docs/content/drafts/UnderlineNav2.mdx
+++ b/docs/content/drafts/UnderlineNav2.mdx
@@ -152,7 +152,7 @@ const Navigation = () => {
     name="loadingCounters"
     type="boolean"
     defaultValue="false"
-    description="Whether all of the counters are in loading state"
+    description="Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
   />
   <PropsTableRow
     name="afterSelect"
diff --git a/src/UnderlineNav2/LoadingCounter.tsx b/src/UnderlineNav2/LoadingCounter.tsx
index 9d25c2911d6..7e7d67b4366 100644
--- a/src/UnderlineNav2/LoadingCounter.tsx
+++ b/src/UnderlineNav2/LoadingCounter.tsx
@@ -2,13 +2,13 @@ import styled, {keyframes} from 'styled-components'
 import {get} from '../constants'
 
 const loading = keyframes`
-  from { opacity: 0.4; }
-  to { opacity: 0.8; }
+  from { opacity: 1; }
+  to { opacity: 0.2; }
 `
 
 export const LoadingCounter = styled.span`
-  animation: ${loading} 1.2s linear infinite alternate;
-  background-color: ${get('colors.neutral.emphasis')};
+  animation: ${loading} 1.2s ease-in-out infinite alternate;
+  background-color: ${get('colors.neutral.muted')};
   border-color: ${get('colors.border.default')};
   width: 1.5rem;
   height: 1rem; // 16px
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 279fd7edcdc..5ece6d2a32c 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -299,7 +299,9 @@ export const UnderlineNav = forwardRef(
                                 {loadingCounters ? (
                                   <LoadingCounter />
                                 ) : (
-                                  <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                  actionElementProps.counter !== undefined && (
+                                    <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                                  )
                                 )}
                               </Box>
                             </ActionList.Item>
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
index c248c9d5f96..288a088e04f 100644
--- a/src/UnderlineNav2/UnderlineNavItem.tsx
+++ b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -42,7 +42,7 @@ export type UnderlineNavItemProps = {
   /**
    * Counter
    */
-  counter?: number
+  counter?: number | string
 } & SxProp &
   LinkProps
 
@@ -172,10 +172,16 @@ export const UnderlineNavItem = forwardRef(
                 {children}
               </Box>
             )}
-            {counter && (
+            {loadingCounters ? (
               <Box as="span" data-component="counter" sx={counterStyles}>
-                {loadingCounters ? <LoadingCounter /> : <CounterLabel>{counter}</CounterLabel>}
+                <LoadingCounter />
               </Box>
+            ) : (
+              counter !== undefined && (
+                <Box as="span" data-component="counter" sx={counterStyles}>
+                  <CounterLabel>{counter}</CounterLabel>
+                </Box>
+              )
             )}
           </Box>
         </Box>
diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx
index 04daa680922..8f224053ff7 100644
--- a/src/UnderlineNav2/examples.stories.tsx
+++ b/src/UnderlineNav2/examples.stories.tsx
@@ -72,14 +72,14 @@ export const withCounterLabels = () => {
   )
 }
 
-const items: {navigation: string; icon: React.FC<IconProps>; counter?: number}[] = [
+const items: {navigation: string; icon: React.FC<IconProps>; counter?: number | string}[] = [
   {navigation: 'Code', icon: CodeIcon},
-  {navigation: 'Issues', icon: IssueOpenedIcon, counter: 120},
+  {navigation: 'Issues', icon: IssueOpenedIcon, counter: '12K'},
   {navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
   {navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
   {navigation: 'Actions', icon: PlayIcon, counter: 4},
   {navigation: 'Projects', icon: ProjectIcon, counter: 9},
-  {navigation: 'Insights', icon: GraphIcon},
+  {navigation: 'Insights', icon: GraphIcon, counter: '0'},
   {navigation: 'Settings', icon: GearIcon, counter: 10},
   {navigation: 'Security', icon: ShieldLockIcon}
 ]