diff --git a/wavefront/client/public/wavefront.png b/wavefront/client/public/wavefront.png
new file mode 100644
index 00000000..8d1deb3d
Binary files /dev/null and b/wavefront/client/public/wavefront.png differ
diff --git a/wavefront/client/src/components/topbar/Topbar.tsx b/wavefront/client/src/components/topbar/Topbar.tsx
index 492ee4ea..42db56fa 100644
--- a/wavefront/client/src/components/topbar/Topbar.tsx
+++ b/wavefront/client/src/components/topbar/Topbar.tsx
@@ -42,17 +42,13 @@ const Topbar = ({ user, apps = [] }: { user: IUser; apps: App[] }) => {
   return (
     <div className="flex h-20 justify-between border-b">
       <a className="flex min-w-[240px] cursor-pointer justify-center border-r px-8 py-5" onClick={handleNavIconClick}>
-        <RootfloIcon />
+        <img src="/wavefront.png" alt="Rootflo Icon" className="object-contain" width={149} />
       </a>
 
       <div className="flex w-full justify-between px-8 py-5">
-        <div id="left_part" className="flex items-center justify-center gap-3">
-          <p className="text-[16.33px] font-bold text-black">AI Middleware</p>
-          {/* <p>|</p> */}
-          {/* <div className="flex items-center justify-center gap-1">
-            <p className="text-[13px] font-normal">Powered by </p>
-            <RootfloIcon />
-          </div> */}
+        <div id="left_part" className="flex items-center justify-center gap-1">
+          <p className="text-[10px] text-black/80">POWERED BY</p>
+          <RootfloIcon height={16} width={42} />
         </div>
         <div id="right_part" className="flex items-center justify-center gap-3">
           {apps && (
diff --git a/wavefront/client/src/pages/apps/[appId]/agents/[id].tsx b/wavefront/client/src/pages/apps/[appId]/agents/[id].tsx
index 43b23c53..9c99a7af 100644
--- a/wavefront/client/src/pages/apps/[appId]/agents/[id].tsx
+++ b/wavefront/client/src/pages/apps/[appId]/agents/[id].tsx
@@ -104,18 +104,11 @@ const AgentDetail: React.FC = () => {
           [key]: value !== undefined ? value : `<${key}>`,
         };
       });
-      // Create display name with all prefilled values (only values, not keys)
-      const prefilledValuesString = prefillValues
-        .filter((key) => tool.prefilled_value?.[key])
-        .map((key) => tool.prefilled_value?.[key]) // Only show the value, not the key
-        .join(', ');
 
       return {
         name: tool.name,
         prefilled_values: prefilledValue,
-        display_name: `${tool.resource_name ? tool.resource_name + ' - ' : ''}${
-          tool.name
-        }${prefilledValuesString ? ` (${prefilledValuesString})` : ''}`,
+        display_name: `${tool.resource_name ? tool.resource_name + ' - ' : ''}${tool.name}`,
         description: tool.description,
       };
     });
diff --git a/wavefront/client/src/pages/apps/layout.tsx b/wavefront/client/src/pages/apps/layout.tsx
index 6dfd870e..0ef4afdd 100644
--- a/wavefront/client/src/pages/apps/layout.tsx
+++ b/wavefront/client/src/pages/apps/layout.tsx
@@ -16,6 +16,7 @@ import { Outlet, useLocation, useNavigate, useParams } from 'react-router';
 
 const navItems = [
   {
+    id: 'agents',
     name: 'Agents',
     icon: AiAgentIcon,
     link: `/apps/:appId/agents`,
@@ -28,42 +29,49 @@ const navItems = [
   //   description: 'Manage authentication provider configurations',
   // },
   {
+    id: 'datasources',
     name: 'Datasources',
     icon: DatasourcesIcon,
     link: `/apps/:appId/datasources`,
     description: 'Manage and configure data sources for this application',
   },
   {
+    id: 'functions',
     name: 'Functions',
     icon: WorkflowIcon,
     link: `/apps/:appId/functions`,
     description: 'Create, manage, and execute functions',
   },
   {
+    id: 'llm-repository',
     name: 'LLM Repository',
     icon: ModelRepositoryIcon,
     link: `/apps/:appId/llm-repository`,
     description: 'Manage and configure LLMs for your application',
   },
   {
+    id: 'model-inference',
     name: 'Model Inference',
     icon: ModelInferenceIcon,
     link: `/apps/:appId/model-inference`,
     description: 'Manage and configure model inference for this application',
   },
   {
+    id: 'knowledge-bases',
     name: 'RAG Service',
     icon: RagIcon,
     link: `/apps/:appId/knowledge-bases`,
     description: 'Manage and configure knowledge bases for this application',
   },
   {
+    id: 'voice-agents',
     name: 'Voice Agents',
     icon: PhoneIcon,
     link: `/apps/:appId/voice-agents`,
     description: 'Manage AI voice agents with LLM, TTS, STT, and telephony',
   },
   {
+    id: 'workflows',
     name: 'Workflows',
     icon: WorkflowIcon,
     link: `/apps/:appId/workflows`,
@@ -80,6 +88,7 @@ const navItems = [
 let finalNavItems = navItems;
 if (appEnv.isApiServicesEnabled) {
   const apiServiceNavItem = {
+    id: 'api-services',
     name: 'API Services',
     icon: ApiIcon,
     link: `/apps/:appId/api-services`,
@@ -98,10 +107,10 @@ const AppLayout: React.FC = () => {
       <div className="flex h-full w-full overflow-auto">
         <div className="flex h-full w-[240px] flex-col gap-3 border-r border-gray-200 p-5">
           {finalNavItems.map((item) => {
-            const isActive = location.pathname.includes(item.link.split('/')[3]);
+            const isActive = item.id === location.pathname.split('/')[3];
             return (
               <div
-                key={item.name}
+                key={item.id}
                 className={clsx(
                   'cursor-pointer rounded-lg border-[0.5px] border-[#EFF0F1] p-3',
                   isActive && 'bg-[#FBFBFB]'