diff --git a/frontend/src/components/agents/custom-agents-page/header.tsx b/frontend/src/components/agents/custom-agents-page/header.tsx
index 89220f68..becf67e6 100644
--- a/frontend/src/components/agents/custom-agents-page/header.tsx
+++ b/frontend/src/components/agents/custom-agents-page/header.tsx
@@ -7,9 +7,19 @@ import { PageHeader } from '@/components/ui/page-header';
 export const AgentsPageHeader = () => {
   return (
     <PageHeader icon={Bot}>
-      <span className="text-primary">Custom agents</span> that
-      <br />
-      <span className="text-muted-foreground">automate</span> your <span className="text-muted-foreground">workflows</span>.
+      <div className="space-y-4">
+        <div className="text-4xl font-semibold tracking-tight">
+          <span className="text-primary">AI Agents</span> = <span className="text-primary">AI Employee´s</span>
+        </div>
+        <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
+          Explore and create your own custom agents that combine{' '}
+          <span className="text-foreground font-medium">integrations</span>,{' '}
+          <span className="text-foreground font-medium">instructions</span>,{' '}
+          <span className="text-foreground font-medium">knowledge</span>,{' '}
+          <span className="text-foreground font-medium">triggers</span> and{' '}
+          <span className="text-foreground font-medium">workflows</span>.
+        </p>
+      </div>
     </PageHeader>
   );
 };
diff --git a/frontend/src/components/sidebar/sidebar-left.tsx b/frontend/src/components/sidebar/sidebar-left.tsx
index b7b872c7..c78bb0e0 100644
--- a/frontend/src/components/sidebar/sidebar-left.tsx
+++ b/frontend/src/components/sidebar/sidebar-left.tsx
@@ -183,7 +183,7 @@ export function SidebarLeft({
                     <SidebarMenuButton
                       tooltip="Agents"
                     >
-                      <Bot className="h-4 w-4" />
+                      <Bot className="h-4 w-4 mr-1" />
                       <span>Agents</span>
                       <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                     </SidebarMenuButton>
@@ -191,7 +191,7 @@ export function SidebarLeft({
                   <CollapsibleContent>
                     <SidebarMenuSub>
                       <SidebarMenuSubItem>
-                        <SidebarMenuSubButton className={cn({
+                        <SidebarMenuSubButton className={cn('pl-3', {
                           'bg-accent text-accent-foreground font-medium': pathname === '/agents' && searchParams.get('tab') === 'marketplace',
                         })} asChild>
                           <Link href="/agents?tab=marketplace">
@@ -200,7 +200,7 @@ export function SidebarLeft({
                         </SidebarMenuSubButton>
                       </SidebarMenuSubItem>
                       <SidebarMenuSubItem>
-                        <SidebarMenuSubButton className={cn({
+                        <SidebarMenuSubButton className={cn('pl-3', {
                           'bg-accent text-accent-foreground font-medium': pathname === '/agents' && (searchParams.get('tab') === 'my-agents' || searchParams.get('tab') === null),
                         })} asChild>
                           <Link href="/agents?tab=my-agents">
@@ -211,7 +211,7 @@ export function SidebarLeft({
                       <SidebarMenuSubItem>
                         <SidebarMenuSubButton 
                           onClick={() => setShowNewAgentDialog(true)}
-                          className="cursor-pointer"
+                          className="cursor-pointer pl-3"
                         >
                           <span>New Agent</span>
                         </SidebarMenuSubButton>