diff --git a/clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx b/clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx
index f68dce0a..e1541e40 100644
--- a/clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx
+++ b/clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx
@@ -53,3 +53,48 @@ export const Template: Story = {
     selected: false,
   },
 };
+
+export const WithAudience: Story = {
+  args: {
+    resource: {
+      name: "settings.json",
+      uri: "file:///settings.json",
+      annotations: { audience: ["user"] },
+    },
+    selected: false,
+  },
+};
+
+export const WithPriority: Story = {
+  args: {
+    resource: {
+      name: "schema.sql",
+      uri: "file:///schema.sql",
+      annotations: { priority: 0.8 },
+    },
+    selected: false,
+  },
+};
+
+export const WithAudienceAndPriority: Story = {
+  args: {
+    resource: {
+      name: "config.json",
+      title: "Configuration File",
+      uri: "file:///config.json",
+      annotations: { audience: ["user", "assistant"], priority: 0.5 },
+    },
+    selected: false,
+  },
+};
+
+export const TemplateWithAnnotations: Story = {
+  args: {
+    resource: {
+      name: "User Profile",
+      uriTemplate: "file:///users/{userId}/profile",
+      annotations: { audience: ["assistant"], priority: 0.2 },
+    },
+    selected: false,
+  },
+};
diff --git a/clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx b/clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx
index 3dbdf99b..7059b5b6 100644
--- a/clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx
+++ b/clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx
@@ -1,8 +1,9 @@
-import { Text, UnstyledButton } from "@mantine/core";
+import { Group, Text, UnstyledButton } from "@mantine/core";
 import type {
   Resource,
   ResourceTemplate,
 } from "@modelcontextprotocol/sdk/types.js";
+import { AnnotationBadge } from "../../elements/AnnotationBadge/AnnotationBadge";
 
 export interface ResourceListItemProps {
   resource: Resource | ResourceTemplate;
@@ -10,11 +11,28 @@ export interface ResourceListItemProps {
   onClick: () => void;
 }
 
+const RowGroup = Group.withProps({
+  gap: "xs",
+  wrap: "wrap",
+  justify: "space-between",
+});
+
+const BadgeGroup = Group.withProps({
+  gap: "xs",
+  wrap: "wrap",
+});
+
 export function ResourceListItem({
   resource,
   selected,
   onClick,
 }: ResourceListItemProps) {
+  const audience = resource.annotations?.audience;
+  const priority = resource.annotations?.priority;
+  const showBadges =
+    (audience !== undefined && audience.length > 0) || priority !== undefined;
+  const label = <Text fw={500}>{resource.title ?? resource.name}</Text>;
+
   return (
     <UnstyledButton
       w="100%"
@@ -23,7 +41,21 @@ export function ResourceListItem({
       bg={selected ? "var(--mantine-primary-color-light)" : undefined}
       onClick={onClick}
     >
-      <Text fw={500}>{resource.title ?? resource.name}</Text>
+      {showBadges ? (
+        <RowGroup>
+          {label}
+          <BadgeGroup>
+            {audience !== undefined && audience.length > 0 && (
+              <AnnotationBadge facet="audience" value={audience} />
+            )}
+            {priority !== undefined && (
+              <AnnotationBadge facet="priority" value={priority} />
+            )}
+          </BadgeGroup>
+        </RowGroup>
+      ) : (
+        label
+      )}
     </UnstyledButton>
   );
 }