diff --git a/src/components/section/SectionItem/SectionListItem.tsx b/src/components/section/SectionItem/SectionListItem.tsx
index 42cfd16a..96d7dcde 100644
--- a/src/components/section/SectionItem/SectionListItem.tsx
+++ b/src/components/section/SectionItem/SectionListItem.tsx
@@ -22,6 +22,18 @@ export function SectionListItem({ className, children }: SectionListItemProps) {
   )
 }
 
+function SectionListItemIcon() {
+  const { section } = useTheme()
+
+  return (
+    <IconKeyboardArrowRight
+      width="24"
+      height="24"
+      className={section.listItemButtonLink.icon}
+    />
+  )
+}
+
 export type SectionListItemButtonProps = ClassNameProps & {
   /**
    * On click handler for the button.
@@ -44,21 +56,15 @@ export const SectionListItemButton = forwardRef<
     <button
       onClick={onClick}
       className={classNames(
-        section.listItemButton.base,
         section.listItem.base,
+        section.listItemButtonLink.base,
         className,
       )}
       ref={ref}
       {...props}
     >
       {children}
-      {withIcon && (
-        <IconKeyboardArrowRight
-          width="24"
-          height="24"
-          className={section.listItemButton.icon}
-        />
-      )}
+      {withIcon && <SectionListItemIcon />}
     </button>
   )
 })
@@ -80,8 +86,8 @@ export const SectionListItemLink = forwardRef<
   return (
     <LinkComponent
       className={classNames(
-        section.listItemLink.base,
         section.listItem.base,
+        section.listItemButtonLink.base,
         className,
       )}
       internal={internal}
@@ -89,13 +95,7 @@ export const SectionListItemLink = forwardRef<
       {...props}
     >
       {children}
-      {withIcon && (
-        <IconKeyboardArrowRight
-          width="24"
-          height="24"
-          className={section.listItemButton.icon}
-        />
-      )}
+      {withIcon && <SectionListItemIcon />}
     </LinkComponent>
   )
 })
diff --git a/src/components/section/theme.ts b/src/components/section/theme.ts
index 464e1325..05d7eea5 100644
--- a/src/components/section/theme.ts
+++ b/src/components/section/theme.ts
@@ -38,13 +38,10 @@ export default {
       base: 'flex flex-shrink-0',
     },
   },
-  listItemButton: {
+  listItemButtonLink: {
     base: 'block w-full focus:outline-neutral-800 justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
     icon: 'fill-current',
   },
-  listItemLink: {
-    base: 'block focus:outline-neutral-800 justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
-  },
   subsectionTitle: {
     base: 'bg-neutral-100 px-4 md:px-6 py-1 border-b border-t first:border-t-none border-neutral-200 text-sm text-neutral-600',
   },
diff --git a/src/examples/List.stories.tsx b/src/examples/List.stories.tsx
index 228f6e53..b341fa62 100644
--- a/src/examples/List.stories.tsx
+++ b/src/examples/List.stories.tsx
@@ -28,6 +28,7 @@ import {
   Tone,
   Option,
   SectionListItemButtonProps,
+  SectionListItemLink,
 } from '../components'
 import { SearchField } from '../components/form/SearchField'
 import { useFilter } from '../components/util/useFilter'
@@ -86,15 +87,25 @@ const List = ({
           />
         ) : (
           <SectionContentList>
-            {content.map((item) => (
-              <SectionListItemButton
-                key={item.name}
-                onClick={action('onItemClick')}
-                withIcon={withIcon}
-              >
-                {`${item.name} (${item.role} - ${item.department})`}
-              </SectionListItemButton>
-            ))}
+            {content.map((item, index) =>
+              index % 2 === 0 ? (
+                <SectionListItemButton
+                  key={item.name}
+                  onClick={action('onItemClick')}
+                  withIcon={withIcon}
+                >
+                  {`Button ${item.name} (${item.role} - ${item.department})`}
+                </SectionListItemButton>
+              ) : (
+                <SectionListItemLink
+                  key={item.name}
+                  href="#"
+                  withIcon={withIcon}
+                >
+                  {`Link ${item.name} (${item.role} - ${item.department})`}
+                </SectionListItemLink>
+              ),
+            )}
           </SectionContentList>
         )}
       </SectionContainer>