diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index fd28a386b..4c08110b0 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -18,6 +18,7 @@ import IconDisplay, { WithIcons } from "./IconDisplay";
 
 export type Prompt = {
   name: string;
+  title?: string;
   description?: string;
   arguments?: {
     name: string;
@@ -120,7 +121,7 @@ const PromptsTab = ({
                 <IconDisplay icons={prompt.icons} size="sm" />
               </div>
               <div className="flex flex-col flex-1 min-w-0">
-                <span className="truncate">{prompt.name}</span>
+                <span className="truncate">{prompt.title || prompt.name}</span>
                 <span className="text-sm text-gray-500 text-left line-clamp-2">
                   {prompt.description}
                 </span>
@@ -143,7 +144,9 @@ const PromptsTab = ({
                 />
               )}
               <h3 className="font-semibold">
-                {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+                {selectedPrompt
+                  ? selectedPrompt.title || selectedPrompt.name
+                  : "Select a prompt"}
               </h3>
             </div>
           </div>
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 36e5cec8f..897ae7a0f 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -135,7 +135,7 @@ const ResourcesTab = ({
                 <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
               )}
               <span className="flex-1 truncate" title={resource.uri.toString()}>
-                {resource.name}
+                {resource.title || resource.name}
               </span>
               <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
             </div>
@@ -168,7 +168,7 @@ const ResourcesTab = ({
                 <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
               )}
               <span className="flex-1 truncate" title={template.uriTemplate}>
-                {template.name}
+                {template.title || template.name}
               </span>
               <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
             </div>
@@ -193,12 +193,16 @@ const ResourcesTab = ({
               )}
               <h3
                 className="font-semibold truncate"
-                title={selectedResource?.name || selectedTemplate?.name}
+                title={
+                  selectedResource
+                    ? selectedResource.title || selectedResource.name
+                    : selectedTemplate?.title || selectedTemplate?.name
+                }
               >
                 {selectedResource
-                  ? selectedResource.name
+                  ? selectedResource.title || selectedResource.name
                   : selectedTemplate
-                    ? selectedTemplate.name
+                    ? selectedTemplate.title || selectedTemplate.name
                     : "Select a resource or template"}
               </h3>
             </div>