diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index d9af7f8cc..afe1ed985 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -55,10 +55,11 @@ interface Props {
   children?: React.ReactNode
   noPaddingTop?: boolean
   noMarginTop?: boolean
+  sx?: object
 }
 
 export default function Section(props: Props) {
-  const { title, description, collapsable, children, noPaddingTop, noMarginTop } = props
+  const { title, description, collapsable, children, noPaddingTop, noMarginTop, sx } = props
   const [expanded, setExpanded] = useState(true)
 
   const handleAccordionChange = () => {
@@ -67,7 +68,7 @@ export default function Section(props: Props) {
 
   if (collapsable) {
     return (
-      <Paper noPaddingTop={noPaddingTop} sx={{ p: '20px' }}>
+      <Paper noPaddingTop={noPaddingTop} sx={{ p: '20px', ...sx }}>
         <StyledAccordion disableGutters expanded={expanded} onChange={handleAccordionChange}>
           <StyledAccordionSummary>
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
@@ -89,7 +90,7 @@ export default function Section(props: Props) {
   }
 
   return (
-    <Paper noPaddingTop={noPaddingTop}>
+    <Paper noPaddingTop={noPaddingTop} sx={{ ...sx }}>
       {title && <StyledTitle variant='h6'>{title}</StyledTitle>}
       {description && <StyledDescription>{description}</StyledDescription>}
       {children}
diff --git a/src/components/Workloads.tsx b/src/components/Workloads.tsx
index dd55448a1..eb82d2d35 100644
--- a/src/components/Workloads.tsx
+++ b/src/components/Workloads.tsx
@@ -3,12 +3,11 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { GetAllWorkloadsApiResponse } from 'redux/otomiApi'
-import { CircularProgress } from '@mui/material'
+import { Status, getStatus } from 'utils/status'
 import { useSocket } from 'providers/Socket'
 import { HeadCell } from './EnhancedTable'
 import RLink from './Link'
 import ListTable from './ListTable'
-import Iconify from './Iconify'
 
 interface Row {
   teamId: string
@@ -38,22 +37,6 @@ const getArgocdApplicationLink = (row: Row, domainSuffix: string) => {
   )
 }
 
-type Status = 'Unknown' | 'Pending' | 'Succeeded' | 'NotFound'
-
-export const getStatus = (status: Status) => {
-  if (!status || status === 'NotFound') return <CircularProgress size='22px' />
-  switch (status) {
-    case 'Unknown':
-      return <Iconify color='#FF4842' icon='eva:alert-circle-fill' width={22} height={22} />
-    case 'Pending':
-      return <Iconify color='#FFC107' icon='eva:alert-triangle-fill' width={22} height={22} />
-    case 'Succeeded':
-      return <Iconify color='#54D62C' icon='eva:checkmark-circle-2-fill' width={22} height={22} />
-    default:
-      return <CircularProgress size='22px' />
-  }
-}
-
 interface Props {
   workloads: GetAllWorkloadsApiResponse
   teamId?: string
@@ -89,7 +72,7 @@ export default function ({ workloads, teamId }: Props): React.ReactElement {
     {
       id: 'Status',
       label: 'Status',
-      renderer: (row: Row) => getStatus(statuses?.workloads?.[row.name]),
+      renderer: (row: Row) => getStatus((statuses?.workloads?.[row.name] as Status) || 'NotFound'),
     },
   ]
 
diff --git a/src/components/forms/Autocomplete.tsx b/src/components/forms/Autocomplete.tsx
index 4bf97f4f4..454e5d828 100644
--- a/src/components/forms/Autocomplete.tsx
+++ b/src/components/forms/Autocomplete.tsx
@@ -36,7 +36,9 @@ export interface EnhancedAutocompleteProps<
   /** Removes the "select all" option for multiselect */
   disableSelectAll?: boolean
   textFieldProps?: Partial<TextFieldProps>
-  width?: 'small' | 'medium' | 'large'
+  width?: 'small' | 'medium' | 'large' | 'fullwidth'
+  /** Hide placeholder and minimize input width when values are selected (for cleaner multi-select UX) */
+  compactMultiSelect?: boolean
 }
 
 export function Autocomplete<
@@ -58,6 +60,7 @@ export function Autocomplete<
     loadingText,
     multiple,
     disableSelectAll = false,
+    noMarginTop = false,
     noOptionsText,
     onBlur,
     options,
@@ -68,11 +71,15 @@ export function Autocomplete<
     value,
     onChange,
     width = 'medium',
+    compactMultiSelect = false,
     ...rest
   } = props
 
   const [inPlaceholder, setInPlaceholder] = useState('')
 
+  // Check if there are selected values (for hiding placeholder when values exist)
+  const hasValues = multiple ? Array.isArray(value) && value.length > 0 : !!value
+
   // --- select-all logic ---
   const isSelectAllActive = multiple && Array.isArray(value) && value.length === options.length
 
@@ -121,8 +128,10 @@ export function Autocomplete<
             label={label}
             width={width}
             loading={loading}
-            placeholder={inPlaceholder || placeholder || 'Select an option'}
+            noMarginTop={noMarginTop}
+            placeholder={compactMultiSelect && hasValues ? '' : inPlaceholder || placeholder || 'Select an option'}
             {...params}
+            {...textFieldProps}
             error={!!errorText}
             helperText={helperText}
             InputProps={{
@@ -133,6 +142,10 @@ export function Autocomplete<
                 flexWrap: 'wrap',
                 gap: 1,
                 paddingRight: '44px',
+                '& input': {
+                  minWidth: compactMultiSelect && hasValues && multiple ? '30px !important' : undefined,
+                  width: compactMultiSelect && hasValues && multiple ? '30px !important' : undefined,
+                },
               },
             }}
             InputLabelProps={{
diff --git a/src/components/forms/TextArea.tsx b/src/components/forms/TextArea.tsx
index 854cadbf3..3dc7073a0 100644
--- a/src/components/forms/TextArea.tsx
+++ b/src/components/forms/TextArea.tsx
@@ -175,23 +175,27 @@ export function AutoResizableTextarea({
 
   return (
     <Box>
-      <InputLabel
-        className={classes.inputLabel}
-        sx={{
-          fontWeight: 'bold',
-          fontSize: '14px',
-          visibility: label ? 'visible' : 'hidden',
-          marginTop: label ? '16px' : '0px',
-        }}
-      >
-        {label}
-      </InputLabel>
+      {label && (
+        <InputLabel
+          className={classes.inputLabel}
+          sx={{
+            fontWeight: 'bold',
+            fontSize: '14px',
+            visibility: label ? 'visible' : 'hidden',
+            marginTop: label ? '16px' : '0px',
+            height: label ? 'auto' : '0px',
+          }}
+        >
+          {label}
+        </InputLabel>
+      )}
       <Box
         sx={{
           position: 'relative',
           display: 'flex',
           alignItems: 'flex-start',
           gap: '8px',
+          marginTop: label ? '0px' : '16px',
         }}
       >
         <textarea
diff --git a/src/components/AgentPlayground.tsx b/src/pages/agents/create-edit/AgentPlayground.tsx
similarity index 98%
rename from src/components/AgentPlayground.tsx
rename to src/pages/agents/create-edit/AgentPlayground.tsx
index a0895c9aa..1a2235cf6 100644
--- a/src/components/AgentPlayground.tsx
+++ b/src/pages/agents/create-edit/AgentPlayground.tsx
@@ -3,9 +3,9 @@ import { Alert, Box, IconButton, TextField, Typography, keyframes } from '@mui/m
 import SendIcon from '@mui/icons-material/Send'
 import DeleteIcon from '@mui/icons-material/Delete'
 import StopIcon from '@mui/icons-material/StopCircle'
-import Markdown from './Markdown'
-import { Paper } from './Paper'
-import Iconify from './Iconify'
+import Markdown from 'components/Markdown'
+import { Paper } from 'components/Paper'
+import Iconify from 'components/Iconify'
 
 const thinkingAnimation = keyframes`
   0%, 60%, 100% {
@@ -27,7 +27,7 @@ interface AgentPlaygroundProps {
   agentName: string
 }
 
-export function AgentPlayground({ teamId, agentName }: AgentPlaygroundProps): React.ReactElement {
+export default function AgentPlayground({ teamId, agentName }: AgentPlaygroundProps): React.ReactElement {
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
@@ -201,7 +201,6 @@ export function AgentPlayground({ teamId, agentName }: AgentPlaygroundProps): Re
             mb: 2,
             border: '1px solid',
             borderColor: 'divider',
-            borderRadius: 1,
             p: 2,
             backgroundColor: 'background.default',
           }}
diff --git a/src/pages/agents/create-edit/AgentResources.tsx b/src/pages/agents/create-edit/AgentResources.tsx
new file mode 100644
index 000000000..67a572189
--- /dev/null
+++ b/src/pages/agents/create-edit/AgentResources.tsx
@@ -0,0 +1,459 @@
+import React from 'react'
+import { Box, Button, IconButton } from '@mui/material'
+import { TextField } from 'components/forms/TextField'
+import { Autocomplete } from 'components/forms/Autocomplete'
+import { makeStyles } from 'tss-react/mui'
+import { Theme } from '@mui/material/styles'
+import font from 'theme/font'
+import { Add, Clear } from '@mui/icons-material'
+import { InputLabel } from 'components/InputLabel'
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
+import { FormHelperText } from 'components/FormHelperText'
+import { AutoResizableTextarea } from 'components/forms/TextArea'
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  container: {
+    padding: '16px',
+    backgroundColor: '#424242',
+    borderRadius: '8px',
+  },
+  itemRow: {
+    marginBottom: '20px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  addItemButton: {
+    marginLeft: '-10px',
+    display: 'flex',
+    alignItems: 'center',
+    textTransform: 'none',
+  },
+  errorText: {
+    alignItems: 'center',
+    color: '#d63c42',
+    display: 'flex',
+    left: 5,
+    top: 42,
+    width: '100%',
+  },
+  helperTextTop: {
+    color: theme.palette.cl.text.subTitle,
+    marginTop: 0,
+  },
+  inputLabel: {
+    color: theme.palette.cl.text.title,
+    fontFamily: font.bold,
+    fontWeight: 700,
+    fontSize: '0.875rem',
+    lineHeight: '1.5rem',
+  },
+  label: {
+    fontFamily: 'sans-serif',
+  },
+}))
+
+export interface AgentRouteItem {
+  agent: string
+  condition: string
+  apiUrl: string
+  apiKey?: string
+}
+
+export interface AgentToolItem {
+  type: string
+  name: string
+  description?: string
+  apiUrl: string
+  apiKey?: string
+}
+
+type AgentResourceItem = AgentRouteItem | AgentToolItem
+
+interface AgentResourcesProps {
+  title: string
+  noMarginTop?: boolean
+  helperText?: string
+  helperTextPosition?: 'bottom' | 'top'
+  showLabel?: boolean
+  addLabel?: string
+  label?: string
+  error?: boolean
+  name: string
+  compressed?: boolean
+  disabled?: boolean
+  frozen?: boolean
+  errorText?: string
+  hideWhenEmpty?: boolean
+  filterFn?: (item: any, index: number) => boolean
+  mode: 'route' | 'tool' | 'knowledgeBase'
+  toolType?: 'mcpServer' | 'subWorkflow' | 'function' | 'knowledgeBase'
+  dropdownOptions?: string[]
+  useDropdownForFirstField?: boolean
+}
+
+export default function AgentResources(props: AgentResourcesProps) {
+  const { classes, cx } = useStyles()
+  const {
+    control,
+    register,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useFormContext()
+  const [focusedApiKeyIndex, setFocusedApiKeyIndex] = React.useState<number | null>(null)
+
+  const {
+    title,
+    noMarginTop = false,
+    addLabel,
+    disabled = false,
+    frozen = false,
+    name,
+    label,
+    helperText,
+    helperTextPosition,
+    error,
+    errorText,
+    showLabel = true,
+    hideWhenEmpty = false,
+    filterFn,
+    mode,
+    toolType,
+    dropdownOptions = [],
+    useDropdownForFirstField = false,
+  } = props
+
+  const { fields, append, remove } = useFieldArray({ control, name })
+  const typedFields = fields as Array<AgentResourceItem & { id: string }>
+
+  const mappedFields = typedFields.map((field, index) => ({ field, index }))
+  const filteredFields = filterFn ? mappedFields.filter(({ field, index }) => filterFn(field, index)) : mappedFields
+
+  if (filterFn && hideWhenEmpty && filteredFields.length === 0) return null
+
+  const handleAddItem = () => {
+    if (mode === 'route') append({ agent: '', condition: '', apiUrl: '', apiKey: '' })
+    else if (mode === 'knowledgeBase') append({ type: 'knowledgeBase', name: '', description: '' })
+    else if (toolType === 'mcpServer') append({ type: toolType, name: '', apiUrl: '', apiKey: '' })
+    else append({ type: toolType, name: '', description: '', apiUrl: '', apiKey: '' })
+  }
+
+  const getFieldLabels = () => {
+    if (mode === 'route') {
+      return {
+        field1: 'Agent',
+        field2: 'Condition',
+        field3: 'API URL',
+        field4: 'API Key (optional)',
+      }
+    }
+    if (mode === 'knowledgeBase') {
+      return {
+        field1: 'Knowledge base',
+        field2: 'Description',
+      }
+    }
+    if (toolType === 'mcpServer') {
+      return {
+        field1: 'Name',
+        field2: 'API URL',
+        field3: 'API Key (optional)',
+      }
+    }
+    return {
+      field1: 'Name',
+      field2: 'Description',
+      field3: 'API URL',
+      field4: 'API Key (optional)',
+    }
+  }
+
+  const getFieldNames = () => {
+    if (mode === 'route') {
+      return {
+        field1: 'agent',
+        field2: 'condition',
+        field3: 'apiUrl',
+        field4: 'apiKey',
+      }
+    }
+    if (mode === 'knowledgeBase') {
+      return {
+        field1: 'name',
+        field2: 'description',
+        field3: '',
+        field4: '',
+      }
+    }
+    if (toolType === 'mcpServer') {
+      return {
+        field1: 'name',
+        field2: 'apiUrl',
+        field3: 'apiKey',
+        field4: '',
+      }
+    }
+    return {
+      field1: 'name',
+      field2: 'description',
+      field3: 'apiUrl',
+      field4: 'apiKey',
+    }
+  }
+
+  const getFieldCount = () => {
+    if (mode === 'knowledgeBase') return 2
+    // MCP servers don't have description field, so only 3 fields
+    if (toolType === 'mcpServer') return 3
+    return 4
+  }
+
+  const shouldShowDescriptionField = () => {
+    // Don't show description for MCP servers
+    if (toolType === 'mcpServer') return false
+    return true
+  }
+
+  const labels = getFieldLabels()
+  const fieldNames = getFieldNames()
+  const fieldCount = getFieldCount()
+
+  const errorScrollClassName = 'error-for-scroll'
+  return (
+    <Box
+      sx={{ mt: noMarginTop ? 0 : 3 }}
+      className={cx({
+        [errorScrollClassName]: !!errorText,
+      })}
+    >
+      <InputLabel className={classes.inputLabel} sx={{ fontWeight: 'bold', fontSize: '14px', mb: '12px' }}>
+        {title}
+      </InputLabel>
+
+      {/* Render label row for first item */}
+      {showLabel && filteredFields.length > 0 && (
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              maxWidth: 'calc(100% - 40px)',
+              gap: '10px',
+              width: '100%',
+            }}
+          >
+            <InputLabel className={classes.inputLabel} sx={{ flex: 1, fontSize: '14px' }}>
+              {labels.field1}
+            </InputLabel>
+            {/* For knowledge base, show description label. For 4-field modes, skip it */}
+            {mode === 'knowledgeBase' && (
+              <InputLabel className={classes.inputLabel} sx={{ flex: 2, fontSize: '14px' }}>
+                {labels.field2}
+              </InputLabel>
+            )}
+            {fieldCount >= 3 && (
+              <InputLabel className={classes.inputLabel} sx={{ flex: 1, fontSize: '14px' }}>
+                {toolType === 'mcpServer' ? labels.field2 : labels.field3}
+              </InputLabel>
+            )}
+            {((toolType === 'mcpServer' && fieldCount >= 3) || fieldCount >= 4) && (
+              <InputLabel className={classes.inputLabel} sx={{ flex: 1, fontSize: '14px' }}>
+                {toolType === 'mcpServer' ? labels.field3 : labels.field4}
+              </InputLabel>
+            )}
+          </Box>
+          <Box sx={{ width: '40px' }} /> {/* Spacer for delete button */}
+        </Box>
+      )}
+
+      {filteredFields.map(({ field, index }, subIndex) => {
+        const getFieldError = (fieldName: string) => {
+          const fieldPath = name.split('.')
+          const errorObj = fieldPath.reduce((acc: any, path: string) => acc?.[path], errors)
+          return errorObj?.[index]?.[fieldName]
+        }
+
+        const field1Error = getFieldError(fieldNames.field1)
+        const field2Error = getFieldError(fieldNames.field2)
+        const field3Error = getFieldError(fieldNames.field3)
+        const field4Error = getFieldError(fieldNames.field4)
+
+        const renderFirstField = () => {
+          if (useDropdownForFirstField && dropdownOptions.length > 0) {
+            return (
+              <Box sx={{ mt: 1 }}>
+                <Autocomplete
+                  width='fullwidth'
+                  placeholder=' '
+                  options={dropdownOptions}
+                  value={watch(`${name}.${index}.${fieldNames.field1}`) || null}
+                  onChange={(_, value) => {
+                    setValue(`${name}.${index}.${fieldNames.field1}`, value || '')
+                  }}
+                  disabled={disabled || frozen}
+                  label=''
+                  hideLabel
+                  noMarginTop
+                  errorText={field1Error?.message?.toString()}
+                  helperText={field1Error?.message?.toString()}
+                />
+              </Box>
+            )
+          }
+          return (
+            <TextField
+              {...register(`${name}.${index}.${fieldNames.field1}`)}
+              width='fullwidth'
+              sx={{ color: '#B5B5BC' }}
+              disabled={disabled}
+              noMarginTop
+              label=''
+              error={!!field1Error}
+              helperText={field1Error?.message?.toString()}
+              InputProps={{
+                readOnly: frozen,
+              }}
+            />
+          )
+        }
+
+        // Render description textarea component
+        const renderDescriptionField = () => (
+          <Controller
+            name={`${name}.${index}.${fieldNames.field2}`}
+            control={control}
+            render={({ field }) => (
+              <AutoResizableTextarea
+                {...field}
+                disabled={disabled || frozen}
+                error={!!field2Error}
+                minWidth='100%'
+                maxWidth='100%'
+                minRows={1}
+              />
+            )}
+          />
+        )
+
+        return (
+          <Box key={field.id} sx={{ mb: 2 }}>
+            {/* First row: field1 and field3/field4 for 4-field modes, or field1 and description for knowledge base */}
+            <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  maxWidth: 'calc(100% - 40px)',
+                  gap: '10px',
+                  width: '100%',
+                }}
+              >
+                <Box sx={{ flex: 1 }}>{renderFirstField()}</Box>
+                {/* For knowledge base, show description in the same row */}
+                {mode === 'knowledgeBase' && (
+                  <Box sx={{ flex: 2, width: '100%', maxWidth: '66%' }}>
+                    {renderDescriptionField()}
+                    {field2Error && (
+                      <FormHelperText sx={{ mt: '4px' }}>{field2Error?.message?.toString()}</FormHelperText>
+                    )}
+                  </Box>
+                )}
+                {/* For MCP servers: show apiUrl and apiKey. For 4-field modes: show field3 and field4 */}
+                {fieldCount >= 3 && (
+                  <Box sx={{ flex: 1 }}>
+                    <TextField
+                      {...register(
+                        `${name}.${index}.${toolType === 'mcpServer' ? fieldNames.field2 : fieldNames.field3}`,
+                      )}
+                      width='fullwidth'
+                      sx={{ color: '#B5B5BC' }}
+                      disabled={disabled}
+                      noMarginTop
+                      label=''
+                      error={toolType === 'mcpServer' ? !!field2Error : !!field3Error}
+                      helperText={
+                        toolType === 'mcpServer' ? field2Error?.message?.toString() : field3Error?.message?.toString()
+                      }
+                      InputProps={{
+                        readOnly: frozen,
+                      }}
+                    />
+                  </Box>
+                )}
+                {((toolType === 'mcpServer' && fieldCount >= 3) || fieldCount >= 4) && (
+                  <Box sx={{ flex: 1 }}>
+                    <TextField
+                      {...register(
+                        `${name}.${index}.${toolType === 'mcpServer' ? fieldNames.field3 : fieldNames.field4}`,
+                      )}
+                      width='fullwidth'
+                      sx={{ color: '#B5B5BC' }}
+                      disabled={disabled}
+                      noMarginTop
+                      label=''
+                      error={toolType === 'mcpServer' ? !!field3Error : !!field4Error}
+                      helperText={
+                        toolType === 'mcpServer' ? field3Error?.message?.toString() : field4Error?.message?.toString()
+                      }
+                      type={focusedApiKeyIndex === index ? 'text' : 'password'}
+                      onFocus={() => setFocusedApiKeyIndex(index)}
+                      onBlur={() => setFocusedApiKeyIndex(null)}
+                      InputProps={{
+                        readOnly: frozen,
+                      }}
+                    />
+                  </Box>
+                )}
+              </Box>
+              {addLabel && !disabled && (
+                <IconButton sx={{ alignSelf: 'flex-start', mt: '12px' }} onClick={() => remove(index)}>
+                  <Clear />
+                </IconButton>
+              )}
+            </Box>
+            {/* Second row: description field for 4-field modes (tool/route) - skip for MCP servers */}
+            {fieldCount >= 3 && mode !== 'knowledgeBase' && shouldShowDescriptionField() && (
+              <Box sx={{ mt: subIndex === 0 ? 1 : 0, maxWidth: 'calc(100% - 40px)' }}>
+                {subIndex === 0 && (
+                  <InputLabel className={classes.inputLabel} sx={{ fontSize: '12px', mb: '4px' }}>
+                    {labels.field2}
+                  </InputLabel>
+                )}
+                {renderDescriptionField()}
+                {field2Error && <FormHelperText sx={{ mt: '4px' }}>{field2Error?.message?.toString()}</FormHelperText>}
+              </Box>
+            )}
+          </Box>
+        )
+      })}
+      {addLabel && !disabled && (
+        <Button
+          sx={{
+            paddingLeft: '8px',
+            fontSize: '10px',
+            color: `${error ? 'red' : ''}`,
+            ':hover': { backgroundColor: 'transparent' },
+          }}
+          className={classes.addItemButton}
+          onClick={handleAddItem}
+        >
+          <Add /> {addLabel}
+        </Button>
+      )}
+      {errorText && (
+        <FormHelperText
+          className={cx({
+            [classes.errorText]: true,
+          })}
+          data-qa-textfield-error-text={label}
+          role='alert'
+        >
+          {errorText}
+        </FormHelperText>
+      )}
+      {helperText && (helperTextPosition === 'bottom' || !helperTextPosition) && (
+        <FormHelperText data-qa-textfield-helper-text>{helperText}</FormHelperText>
+      )}
+    </Box>
+  )
+}
diff --git a/src/pages/agents/create-edit/AgentsCreateEditPage.tsx b/src/pages/agents/create-edit/AgentsCreateEditPage.tsx
index 80116f6ba..67f16ee25 100644
--- a/src/pages/agents/create-edit/AgentsCreateEditPage.tsx
+++ b/src/pages/agents/create-edit/AgentsCreateEditPage.tsx
@@ -1,14 +1,14 @@
-import { Grid } from '@mui/material'
+import { AppBar, Box, Grid, Tab, Tabs, Tooltip, Typography } from '@mui/material'
 import { TextField } from 'components/forms/TextField'
 import { Autocomplete } from 'components/forms/Autocomplete'
 import { AutoResizableTextarea } from 'components/forms/TextArea'
 import { LandingHeader } from 'components/LandingHeader'
 import PaperLayout from 'layouts/Paper'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormProvider, Resolver, useForm } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { Redirect, RouteComponentProps } from 'react-router-dom'
-import { isEqual } from 'lodash'
+import { isEmpty, isEqual, toNumber } from 'lodash'
 import {
   CreateAplAgentApiArg,
   useCreateAplAgentMutation,
@@ -16,6 +16,7 @@ import {
   useEditAplAgentMutation,
   useGetAiModelsQuery,
   useGetAplAgentQuery,
+  useGetAplAgentsQuery,
   useGetAplKnowledgeBasesQuery,
 } from 'redux/otomiApi'
 import { useTranslation } from 'react-i18next'
@@ -25,7 +26,9 @@ import Section from 'components/Section'
 import DeleteButton from 'components/DeleteButton'
 import { LoadingButton } from '@mui/lab'
 import { Divider } from 'components/Divider'
-import { AgentPlayground } from 'components/AgentPlayground'
+import TabPanel from 'components/TabPanel'
+import AgentPlayground from './AgentPlayground'
+import AgentResources from './AgentResources'
 import { agentSchema } from './create-edit-agents.validator'
 
 interface Params {
@@ -49,6 +52,7 @@ export default function AgentsCreateEditPage({
   )
   const { data: aiModels } = useGetAiModelsQuery()
   const { data: knowledgeBases } = useGetAplKnowledgeBasesQuery({ teamId })
+  const { data: agents } = useGetAplAgentsQuery({ teamId })
 
   const isDirty = useAppSelector(({ global: { isDirty } }) => isDirty)
   useEffect(() => {
@@ -56,6 +60,26 @@ export default function AgentsCreateEditPage({
     if (!isFetching) refetch()
   }, [isDirty])
 
+  const [tab, setTab] = useState(0)
+  const handleTabChange = (event, newTab) => {
+    setTab(newTab as number)
+  }
+
+  const tabHasErrors = (tabIndex: number): boolean => {
+    switch (tabIndex) {
+      case 0: // Settings tab
+        return !!(errors.metadata?.name || errors.spec?.foundationModel)
+      case 1: // Playground tab
+        return !!errors.spec?.agentInstructions
+      case 2: // Workflow resources tab
+        return !!(errors.spec?.tools || errors.spec?.routes)
+      default:
+        return false
+    }
+  }
+
+  const DEFAULT_AGENT_INSTRUCTIONS = 'You are a helpful assistant. Give clear answers to the users.'
+
   type FormType = CreateAplAgentApiArg['body']
 
   const defaultValues: FormType = {
@@ -65,8 +89,12 @@ export default function AgentsCreateEditPage({
     },
     spec: {
       foundationModel: '',
+      temperature: 0.3,
+      topP: 0.9,
+      maxTokens: 512,
       agentInstructions: '',
       tools: [],
+      routes: [],
     },
   }
 
@@ -82,6 +110,7 @@ export default function AgentsCreateEditPage({
     watch,
     formState: { errors },
     setValue,
+    trigger,
   } = methods
 
   useEffect(() => {
@@ -89,12 +118,31 @@ export default function AgentsCreateEditPage({
   }, [data, reset])
 
   const onSubmit = (formData: FormType) => {
-    const body = { ...formData }
+    const body = {
+      ...formData,
+      spec: {
+        ...formData.spec,
+        temperature: formData.spec.temperature ?? 0.3,
+        topP: formData.spec.topP ?? 0.9,
+        maxTokens: formData.spec.maxTokens ?? 512,
+      },
+    }
 
     if (agentName) update({ teamId, agentName, body })
     else create({ teamId, body })
   }
 
+  const handleFormSubmit = async () => {
+    const formData = watch()
+    if (isEmpty(formData.spec.agentInstructions)) {
+      setValue('spec.agentInstructions', DEFAULT_AGENT_INSTRUCTIONS)
+      await trigger('spec.agentInstructions')
+    }
+    handleSubmit(onSubmit)()
+  }
+
+  const requiredFieldsFilled = !!watch('metadata.name') && !!watch('spec.foundationModel')
+
   const mutating = isLoadingCreate || isLoadingUpdate || isLoadingDelete
   if (!mutating && (isSuccessCreate || isSuccessUpdate || isSuccessDelete))
     return <Redirect to={`/teams/${teamId}/agents`} />
@@ -103,6 +151,48 @@ export default function AgentsCreateEditPage({
 
   if (loading) return <PaperLayout loading title={t('TITLE_AGENT')} />
 
+  const formButtons = (
+    <Box>
+      {agentName && (
+        <DeleteButton
+          onDelete={() => del({ teamId, agentName })}
+          resourceName={watch('metadata.name')}
+          resourceType='agent'
+          data-cy='button-delete-agent'
+          sx={{ float: 'right', textTransform: 'capitalize', ml: 2 }}
+          loading={isLoadingDelete}
+          disabled={isLoadingDelete || isLoadingCreate || isLoadingUpdate}
+        />
+      )}
+      <Tooltip
+        title={
+          !agentName && !requiredFieldsFilled
+            ? 'Please fill in required fields: Agent name, Foundation model, and Instructions'
+            : ''
+        }
+      >
+        <Box sx={{ float: 'right' }}>
+          <LoadingButton
+            onClick={handleFormSubmit}
+            variant='contained'
+            color='primary'
+            sx={{ textTransform: 'none' }}
+            loading={isLoadingCreate || isLoadingUpdate}
+            disabled={
+              isLoadingCreate ||
+              isLoadingUpdate ||
+              isLoadingDelete ||
+              (!agentName && !requiredFieldsFilled) ||
+              (agentName && data && isEqual(data, watch()))
+            }
+          >
+            {agentName ? 'Save Changes' : 'Create Agent'}
+          </LoadingButton>
+        </Box>
+      </Tooltip>
+    </Box>
+  )
+
   return (
     <Grid>
       <PaperLayout loading={loading || isError} title={t('TITLE_AGENT')}>
@@ -112,114 +202,277 @@ export default function AgentsCreateEditPage({
           title={agentName ? `${data?.metadata.name}` : 'Create'}
           hideCrumbX={[0, 1]}
         />
+        <AppBar position='relative' color='default' sx={{}}>
+          <Tabs
+            value={tab}
+            onChange={handleTabChange}
+            sx={{
+              '& .MuiTab-root:not(:last-of-type)': {
+                marginRight: 0,
+              },
+            }}
+          >
+            <Tab
+              label='Settings'
+              value={0}
+              sx={{
+                textTransform: 'capitalize',
+                padding: '12px 16px',
+                ...(tab !== 0 &&
+                  tabHasErrors(0) && {
+                    borderBottom: '2px solid',
+                    borderBottomColor: 'error.main',
+                  }),
+              }}
+            />
+            <Tab
+              label='Playground'
+              value={1}
+              sx={{
+                textTransform: 'capitalize',
+                padding: '12px 16px',
+                ...(tab !== 1 &&
+                  tabHasErrors(1) && {
+                    borderBottom: '2px solid',
+                    borderBottomColor: 'error.main',
+                  }),
+              }}
+            />
+            <Tab
+              label='Workflow resources'
+              value={2}
+              sx={{
+                textTransform: 'capitalize',
+                padding: '12px 16px',
+                ...(tab !== 2 &&
+                  tabHasErrors(2) && {
+                    borderBottom: '2px solid',
+                    borderBottomColor: 'error.main',
+                  }),
+              }}
+            />
+          </Tabs>
+        </AppBar>
         <FormProvider {...methods}>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <Section noPaddingTop>
-              <FormRow spacing={10}>
-                <TextField
-                  label='Agent name'
-                  width='large'
-                  placeholder='my-agent'
-                  {...register('metadata.name')}
-                  onChange={(e) => {
-                    const value = e.target.value
-                    setValue('metadata.name', value)
+          <form>
+            <TabPanel value={tab} index={0}>
+              <Section noPaddingTop>
+                <FormRow spacing={10}>
+                  <TextField
+                    label='Agent name *'
+                    width='large'
+                    placeholder='my-agent'
+                    {...register('metadata.name')}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      setValue('metadata.name', value)
+                    }}
+                    error={!!errors.metadata?.name}
+                    helperText={errors.metadata?.name?.message?.toString()}
+                    disabled={!!agentName}
+                  />
+                </FormRow>
+
+                <Divider spacingBottom={10} />
+
+                <FormRow spacing={10}>
+                  <Autocomplete
+                    label='Foundation model *'
+                    width='large'
+                    placeholder='Select a foundation model'
+                    options={
+                      aiModels
+                        ?.filter((model) => model.spec.modelType === 'foundation')
+                        .map((model) => model.metadata.name) || []
+                    }
+                    getOptionLabel={(option) => {
+                      const model = aiModels?.find((m) => m.metadata.name === option)
+                      return model?.spec.displayName || option
+                    }}
+                    value={watch('spec.foundationModel') || null}
+                    onChange={(_, value) => {
+                      setValue('spec.foundationModel', value || '')
+                    }}
+                    errorText={errors.spec?.foundationModel?.message?.toString()}
+                    helperText={errors.spec?.foundationModel?.message?.toString()}
+                  />
+                </FormRow>
+
+                <Divider spacingBottom={10} />
+
+                <FormRow spacing={10}>
+                  <TextField
+                    label='Temperature'
+                    width='large'
+                    placeholder='0.3'
+                    value={watch('spec.temperature') ?? ''}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      setValue('spec.temperature', toNumber(value) ?? undefined)
+                    }}
+                    error={!!errors.spec?.temperature}
+                    helperText={
+                      errors.spec?.temperature?.message?.toString() ||
+                      'Temperature parameter for model inference (controls randomness)'
+                    }
+                    helperTextPosition='top'
+                  />
+                </FormRow>
+
+                <Divider spacingBottom={10} />
+
+                <FormRow spacing={10}>
+                  <TextField
+                    label='Top-p'
+                    width='large'
+                    placeholder='0.9'
+                    value={watch('spec.topP') ?? ''}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      setValue('spec.topP', toNumber(value) ?? undefined)
+                    }}
+                    error={!!errors.spec?.topP}
+                    helperText={
+                      errors.spec?.topP?.message?.toString() || 'Top-p parameter for model inference (nucleus sampling)'
+                    }
+                    helperTextPosition='top'
+                  />
+                </FormRow>
+
+                <Divider spacingBottom={10} />
+
+                <FormRow spacing={10}>
+                  <TextField
+                    label='Max Tokens'
+                    width='large'
+                    placeholder='512'
+                    value={watch('spec.maxTokens') ?? ''}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      setValue('spec.maxTokens', toNumber(value) ?? undefined)
+                    }}
+                    error={!!errors.spec?.maxTokens}
+                    helperText={errors.spec?.maxTokens?.message?.toString() || 'Maximum number of tokens to generate'}
+                    helperTextPosition='top'
+                  />
+                </FormRow>
+              </Section>
+
+              {formButtons}
+            </TabPanel>
+
+            <TabPanel value={tab} index={1}>
+              <Section noPaddingTop>
+                <FormRow spacing={10}>
+                  <Box sx={{ width: '100%' }}>
+                    <AutoResizableTextarea
+                      label='Instructions *'
+                      placeholder={`Enter agent instructions... (Leave empty to use the default: '${DEFAULT_AGENT_INSTRUCTIONS}')`}
+                      minRows={12}
+                      maxRows={40}
+                      minWidth='100%'
+                      {...register('spec.agentInstructions')}
+                      onChange={(e) => {
+                        const value = e.target.value
+                        setValue('spec.agentInstructions', value)
+                      }}
+                      error={!!errors.spec?.agentInstructions}
+                      value={watch('spec.agentInstructions') || ''}
+                    />
+                  </Box>
+                </FormRow>
+              </Section>
+
+              <Box sx={{ my: 2 }}>{formButtons}</Box>
+
+              {agentName ? (
+                <Box sx={{ clear: 'both' }}>
+                  <AgentPlayground teamId={teamId} agentName={agentName} />
+                </Box>
+              ) : (
+                <Box
+                  sx={{
+                    clear: 'both',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '200px',
+                    backgroundColor: 'background.paper',
+                    mt: 10,
                   }}
-                  error={!!errors.metadata?.name}
-                  helperText={errors.metadata?.name?.message?.toString()}
-                  disabled={!!agentName}
+                >
+                  <Typography variant='body1' color='text.secondary'>
+                    Playground will be available here after creating the agent.
+                  </Typography>
+                </Box>
+              )}
+            </TabPanel>
+
+            <TabPanel value={tab} index={2}>
+              <Section sx={{ pt: 2 }}>
+                <AgentResources
+                  title='Knowledge base(s)'
+                  noMarginTop
+                  name='spec.tools'
+                  mode='knowledgeBase'
+                  toolType='knowledgeBase'
+                  showLabel
+                  compressed
+                  addLabel='add knowledge base'
+                  filterFn={(tool) => tool.type === 'knowledgeBase'}
+                  useDropdownForFirstField
+                  dropdownOptions={knowledgeBases?.map((kb) => kb.metadata.name) || []}
                 />
-              </FormRow>
-
-              <Divider spacingBottom={10} />
-
-              <FormRow spacing={10}>
-                <Autocomplete
-                  label='Foundation model'
-                  width='large'
-                  placeholder='Select a foundation model'
-                  options={
-                    aiModels
-                      ?.filter((model) => model.spec.modelType === 'foundation')
-                      .map((model) => model.metadata.name) || []
-                  }
-                  getOptionLabel={(option) => {
-                    const model = aiModels?.find((m) => m.metadata.name === option)
-                    return model?.spec.displayName || option
-                  }}
-                  value={watch('spec.foundationModel') || null}
-                  onChange={(_, value) => {
-                    setValue('spec.foundationModel', value || '')
-                  }}
-                  errorText={errors.spec?.foundationModel?.message?.toString()}
-                  helperText={errors.spec?.foundationModel?.message?.toString()}
+                <Divider spacingBottom={10} />
+                <AgentResources
+                  title='Agent route(s)'
+                  name='spec.routes'
+                  mode='route'
+                  showLabel
+                  compressed
+                  addLabel='add agent route'
+                  useDropdownForFirstField
+                  dropdownOptions={agents?.map((agent) => agent.metadata.name) || []}
                 />
-              </FormRow>
-
-              <Divider spacingBottom={10} />
-
-              <FormRow spacing={10}>
-                <Autocomplete
-                  label='Knowledge base'
-                  width='large'
-                  placeholder='Select a knowledge base'
-                  options={knowledgeBases?.map((kb) => kb.metadata.name) || []}
-                  value={watch('spec.tools')?.find((tool) => tool.type === 'knowledgeBase')?.name || ''}
-                  onChange={(_, value) => {
-                    const currentTools = watch('spec.tools') || []
-                    const nonKbTools = currentTools.filter((tool) => tool.type !== 'knowledgeBase')
-                    const updatedTools = value ? [...nonKbTools, { type: 'knowledgeBase', name: value }] : nonKbTools
-                    setValue('spec.tools', updatedTools)
-                  }}
+                <Divider spacingBottom={10} />
+                <AgentResources
+                  title='MCP server(s)'
+                  name='spec.tools'
+                  mode='tool'
+                  toolType='mcpServer'
+                  showLabel
+                  compressed
+                  addLabel='add MCP server'
+                  filterFn={(tool) => tool.type === 'mcpServer'}
                 />
-              </FormRow>
-
-              <Divider spacingBottom={10} />
-
-              <FormRow spacing={10}>
-                <AutoResizableTextarea
-                  label='Instructions'
-                  placeholder='Enter agent instructions...'
-                  minRows={12}
-                  maxRows={40}
-                  minWidth={400}
-                  {...register('spec.agentInstructions')}
-                  onChange={(e) => {
-                    const value = e.target.value
-                    setValue('spec.agentInstructions', value)
-                  }}
-                  error={!!errors.spec?.agentInstructions}
-                  value={watch('spec.agentInstructions') || ''}
+                <Divider spacingBottom={10} />
+                <AgentResources
+                  title='Subworkflow(s)'
+                  name='spec.tools'
+                  mode='tool'
+                  toolType='subWorkflow'
+                  showLabel
+                  compressed
+                  addLabel='add subworkflow'
+                  filterFn={(tool) => tool.type === 'subWorkflow'}
+                />
+                <Divider spacingBottom={10} />
+                <AgentResources
+                  title='Function route(s)'
+                  name='spec.tools'
+                  mode='tool'
+                  toolType='function'
+                  showLabel
+                  compressed
+                  addLabel='add function route'
+                  filterFn={(tool) => tool.type === 'function'}
                 />
-              </FormRow>
-            </Section>
-
-            {agentName && (
-              <DeleteButton
-                onDelete={() => del({ teamId, agentName })}
-                resourceName={watch('metadata.name')}
-                resourceType='agent'
-                data-cy='button-delete-agent'
-                sx={{ float: 'right', textTransform: 'capitalize', ml: 2 }}
-                loading={isLoadingDelete}
-                disabled={isLoadingDelete || isLoadingCreate || isLoadingUpdate}
-              />
-            )}
-            <LoadingButton
-              type='submit'
-              variant='contained'
-              color='primary'
-              sx={{ float: 'right', textTransform: 'none' }}
-              loading={isLoadingCreate || isLoadingUpdate}
-              disabled={
-                isLoadingCreate || isLoadingUpdate || isLoadingDelete || (agentName && data && isEqual(data, watch()))
-              }
-            >
-              {agentName ? 'Save Changes' : 'Create Agent'}
-            </LoadingButton>
+              </Section>
+
+              {formButtons}
+            </TabPanel>
           </form>
         </FormProvider>
-        {agentName && <AgentPlayground teamId={teamId} agentName={agentName} />}
       </PaperLayout>
     </Grid>
   )
diff --git a/src/pages/agents/create-edit/create-edit-agents.validator.ts b/src/pages/agents/create-edit/create-edit-agents.validator.ts
index 44a6c15f8..a28d2eb46 100644
--- a/src/pages/agents/create-edit/create-edit-agents.validator.ts
+++ b/src/pages/agents/create-edit/create-edit-agents.validator.ts
@@ -17,5 +17,39 @@ export const agentSchema = yup.object({
     foundationModel: yup.string().required('Please select a foundation model'),
     knowledgeBase: yup.string().optional(),
     agentInstructions: yup.string().required('Please enter agent instructions'),
+    routes: yup
+      .array()
+      .of(
+        yup.object({
+          agent: yup.string().required('Name is required'),
+          condition: yup.string().required('Condition is required'),
+          apiUrl: yup.string().required('API URL is required').url('Must be a valid URL'),
+          apiKey: yup.string().optional(),
+        }),
+      )
+      .optional(),
+    tools: yup
+      .array()
+      .of(
+        yup.object({
+          type: yup
+            .string()
+            .oneOf(['knowledgeBase', 'mcpServer', 'subWorkflow', 'function'], 'Invalid tool type')
+            .required('Tool type is required'),
+          name: yup.string().required('Name is required'),
+          description: yup.string().when('type', {
+            is: (val: string) => ['knowledgeBase', 'subWorkflow', 'function'].includes(val),
+            then: (schema) => schema.required('Description is required'),
+            otherwise: (schema) => schema.optional(),
+          }),
+          apiUrl: yup.string().when('type', {
+            is: (val: string) => ['mcpServer', 'subWorkflow', 'function'].includes(val),
+            then: (schema) => schema.required('API URL is required for this tool type').url('Must be a valid URL'),
+            otherwise: (schema) => schema.optional(),
+          }),
+          apiKey: yup.string().optional(),
+        }),
+      )
+      .optional(),
   }),
 })
diff --git a/src/pages/agents/overview/AgentsOverviewPage.tsx b/src/pages/agents/overview/AgentsOverviewPage.tsx
index 915cc62aa..23b093f85 100644
--- a/src/pages/agents/overview/AgentsOverviewPage.tsx
+++ b/src/pages/agents/overview/AgentsOverviewPage.tsx
@@ -5,6 +5,7 @@ import { RouteComponentProps } from 'react-router-dom'
 import { getRole } from 'utils/data'
 import { useGetAplAgentsQuery } from 'redux/otomiApi'
 import { useAppSelector } from 'redux/hooks'
+import { Status, getStatus } from 'utils/status'
 import { HeadCell } from '../../../components/EnhancedTable'
 import RLink from '../../../components/Link'
 import ListTable from '../../../components/ListTable'
@@ -20,12 +21,6 @@ const getAgentName = (): CallableFunction =>
     )
   }
 
-const getStatus = (): CallableFunction =>
-  function (row: any): string {
-    const { status } = row
-    return status?.phase || 'Unknown'
-  }
-
 const getFoundationModel = (): CallableFunction =>
   function (row: any): string {
     const { foundationModel } = row
@@ -66,16 +61,16 @@ export default function AgentsOverviewPage({
       label: t('Name'),
       renderer: getAgentName(),
     },
-    {
-      id: 'status',
-      label: t('Status'),
-      renderer: getStatus(),
-    },
     {
       id: 'foundationModel',
       label: t('Foundation Model'),
       renderer: getFoundationModel(),
     },
+    {
+      id: 'status',
+      label: t('Status'),
+      renderer: (row: any) => getStatus((row.status?.phase as Status) || 'Unknown'),
+    },
   ]
 
   const customButtonText = () => <span>Create Agent</span>
diff --git a/src/pages/builds/overview/BuildsOverviewPage.tsx b/src/pages/builds/overview/BuildsOverviewPage.tsx
index 60093f781..43af5dc0d 100644
--- a/src/pages/builds/overview/BuildsOverviewPage.tsx
+++ b/src/pages/builds/overview/BuildsOverviewPage.tsx
@@ -2,7 +2,7 @@ import { skipToken } from '@reduxjs/toolkit/query/react'
 import { HeadCell } from 'components/EnhancedTable'
 import InformationBanner from 'components/InformationBanner'
 import ListTable from 'components/ListTable'
-import { getStatus } from 'components/Workloads'
+import { Status, getStatus } from 'utils/status'
 import PaperLayout from 'layouts/Paper'
 import { useSession } from 'providers/Session'
 import React, { useEffect } from 'react'
@@ -132,7 +132,7 @@ export default function BuildsOverviewPage({
     {
       id: 'Status',
       label: 'Status',
-      renderer: (row: Row) => getStatus(statuses?.builds?.[row.name]),
+      renderer: (row: Row) => getStatus((statuses?.builds?.[row.name] as Status) || 'NotFound'),
     },
   ]
 
diff --git a/src/pages/knowledge-bases/overview/KnowledgeBasesOverviewPage.tsx b/src/pages/knowledge-bases/overview/KnowledgeBasesOverviewPage.tsx
index 9ec4e3d45..340fc6f8a 100644
--- a/src/pages/knowledge-bases/overview/KnowledgeBasesOverviewPage.tsx
+++ b/src/pages/knowledge-bases/overview/KnowledgeBasesOverviewPage.tsx
@@ -5,6 +5,7 @@ import { RouteComponentProps } from 'react-router-dom'
 import { getRole } from 'utils/data'
 import { useGetAplKnowledgeBasesQuery } from 'redux/otomiApi'
 import { useAppSelector } from 'redux/hooks'
+import { Status, getStatus } from 'utils/status'
 import { HeadCell } from '../../../components/EnhancedTable'
 import RLink from '../../../components/Link'
 import ListTable from '../../../components/ListTable'
@@ -20,12 +21,6 @@ const getKnowledgeBaseName = (): CallableFunction =>
     )
   }
 
-const getStatus = (): CallableFunction =>
-  function (row: any): string {
-    const { status } = row
-    return status?.phase || 'Unknown'
-  }
-
 const getEmbeddingModel = (): CallableFunction =>
   function (row: any): string {
     const { modelName } = row
@@ -66,16 +61,16 @@ export default function KnowledgeBasesOverviewPage({
       label: t('Name'),
       renderer: getKnowledgeBaseName(),
     },
-    {
-      id: 'status',
-      label: t('Status'),
-      renderer: getStatus(),
-    },
     {
       id: 'embeddingModel',
       label: t('Embedding Model'),
       renderer: getEmbeddingModel(),
     },
+    {
+      id: 'status',
+      label: t('Status'),
+      renderer: (row: any) => getStatus((row.status?.phase as Status) || 'Unknown'),
+    },
   ]
 
   const customButtonText = () => <span>Create Knowledge Base</span>
diff --git a/src/pages/secrets/overview/SecretOverviewPage.tsx b/src/pages/secrets/overview/SecretOverviewPage.tsx
index 4da5b0fd8..4f358106a 100644
--- a/src/pages/secrets/overview/SecretOverviewPage.tsx
+++ b/src/pages/secrets/overview/SecretOverviewPage.tsx
@@ -7,7 +7,7 @@ import MuiLink from 'components/MuiLink'
 import { HeadCell } from 'components/EnhancedTable'
 import RLink from 'components/Link'
 import ListTable from 'components/ListTable'
-import { getStatus } from 'components/Workloads'
+import { Status, getStatus } from 'utils/status'
 import InformationBanner from 'components/InformationBanner'
 import { skipToken } from '@reduxjs/toolkit/dist/query'
 import { RouteComponentProps } from 'react-router-dom'
@@ -81,7 +81,7 @@ export default function SecretOverviewPage({
     {
       id: 'Status',
       label: 'Status',
-      renderer: (row) => getStatus(statuses?.secrets?.[row.name]),
+      renderer: (row) => getStatus((statuses?.secrets?.[row.name] as Status) || 'NotFound'),
     },
   ]
   if (!teamId) {
diff --git a/src/pages/services/overview/ServicesOverviewPage.tsx b/src/pages/services/overview/ServicesOverviewPage.tsx
index 2185c1115..4940ffde1 100644
--- a/src/pages/services/overview/ServicesOverviewPage.tsx
+++ b/src/pages/services/overview/ServicesOverviewPage.tsx
@@ -2,7 +2,7 @@ import { skipToken } from '@reduxjs/toolkit/query/react'
 import { HeadCell } from 'components/EnhancedTable'
 import ListTable from 'components/ListTable'
 import MuiLink from 'components/MuiLink'
-import { getStatus } from 'components/Workloads'
+import { Status, getStatus } from 'utils/status'
 import PaperLayout from 'layouts/Paper'
 import { useSession } from 'providers/Session'
 import { useSocket } from 'providers/Socket'
@@ -93,7 +93,7 @@ export default function ServicesOverviewPage({
     {
       id: 'Status',
       label: 'Status',
-      renderer: (row) => getStatus(statuses?.services?.[row.name]),
+      renderer: (row) => getStatus((statuses?.services?.[row.name] as Status) || 'NotFound'),
     },
   ]
   if (!teamId) {
diff --git a/src/redux/otomiApi.ts b/src/redux/otomiApi.ts
index 904ff0ef3..a75eec78b 100644
--- a/src/redux/otomiApi.ts
+++ b/src/redux/otomiApi.ts
@@ -6448,12 +6448,23 @@ export type GetAplAgentsApiResponse = /** status 200 Successfully obtained agent
   kind: 'AkamaiAgent'
   spec: {
     foundationModel: string
+    foundationModelEndpoint?: string
+    temperature?: number
+    topP?: number
+    maxTokens?: number
     agentInstructions: string
+    routes?: {
+      agent: string
+      condition: string
+      apiUrl: string
+      apiKey?: string
+    }[]
     tools?: {
       type: string
       name: string
       description?: string
-      endpoint?: string
+      apiUrl?: string
+      apiKey?: string
     }[]
   }
 } & {
@@ -6483,12 +6494,23 @@ export type CreateAplAgentApiResponse = /** status 200 Successfully stored agent
   kind: 'AkamaiAgent'
   spec: {
     foundationModel: string
+    foundationModelEndpoint?: string
+    temperature?: number
+    topP?: number
+    maxTokens?: number
     agentInstructions: string
+    routes?: {
+      agent: string
+      condition: string
+      apiUrl: string
+      apiKey?: string
+    }[]
     tools?: {
       type: string
       name: string
       description?: string
-      endpoint?: string
+      apiUrl?: string
+      apiKey?: string
     }[]
   }
 } & {
@@ -6518,12 +6540,23 @@ export type CreateAplAgentApiArg = {
     kind: 'AkamaiAgent'
     spec: {
       foundationModel: string
+      foundationModelEndpoint?: string
+      temperature?: number
+      topP?: number
+      maxTokens?: number
       agentInstructions: string
+      routes?: {
+        agent: string
+        condition: string
+        apiUrl: string
+        apiKey?: string
+      }[]
       tools?: {
         type: string
         name: string
         description?: string
-        endpoint?: string
+        apiUrl?: string
+        apiKey?: string
       }[]
     }
   } & {
@@ -6536,12 +6569,23 @@ export type GetAplAgentApiResponse = /** status 200 Successfully obtained agent
   kind: 'AkamaiAgent'
   spec: {
     foundationModel: string
+    foundationModelEndpoint?: string
+    temperature?: number
+    topP?: number
+    maxTokens?: number
     agentInstructions: string
+    routes?: {
+      agent: string
+      condition: string
+      apiUrl: string
+      apiKey?: string
+    }[]
     tools?: {
       type: string
       name: string
       description?: string
-      endpoint?: string
+      apiUrl?: string
+      apiKey?: string
     }[]
   }
 } & {
@@ -6573,12 +6617,23 @@ export type EditAplAgentApiResponse = /** status 200 Successfully edited a team
   kind: 'AkamaiAgent'
   spec: {
     foundationModel: string
+    foundationModelEndpoint?: string
+    temperature?: number
+    topP?: number
+    maxTokens?: number
     agentInstructions: string
+    routes?: {
+      agent: string
+      condition: string
+      apiUrl: string
+      apiKey?: string
+    }[]
     tools?: {
       type: string
       name: string
       description?: string
-      endpoint?: string
+      apiUrl?: string
+      apiKey?: string
     }[]
   }
 } & {
@@ -6610,12 +6665,23 @@ export type EditAplAgentApiArg = {
     kind: 'AkamaiAgent'
     spec: {
       foundationModel: string
+      foundationModelEndpoint?: string
+      temperature?: number
+      topP?: number
+      maxTokens?: number
       agentInstructions: string
+      routes?: {
+        agent: string
+        condition: string
+        apiUrl: string
+        apiKey?: string
+      }[]
       tools?: {
         type: string
         name: string
         description?: string
-        endpoint?: string
+        apiUrl?: string
+        apiKey?: string
       }[]
     }
   } & {
diff --git a/src/utils/status.tsx b/src/utils/status.tsx
new file mode 100644
index 000000000..674943934
--- /dev/null
+++ b/src/utils/status.tsx
@@ -0,0 +1,38 @@
+import { CircularProgress, Tooltip } from '@mui/material'
+import Iconify from '../components/Iconify'
+
+export type Status = 'NotFound' | 'Failed' | 'Unknown' | 'Pending' | 'Succeeded' | 'Running' | 'Indexed'
+
+export const getStatus = (status: Status) => {
+  if (!status || status === 'NotFound') return <CircularProgress size='22px' />
+  switch (status) {
+    case 'Failed':
+      return (
+        <Tooltip title={status} arrow>
+          <span>
+            <Iconify color='#FF4842' icon='eva:alert-circle-fill' width={22} height={22} />
+          </span>
+        </Tooltip>
+      )
+    case 'Pending':
+      return (
+        <Tooltip title={status} arrow>
+          <span>
+            <Iconify color='#FFC107' icon='eva:alert-triangle-fill' width={22} height={22} />
+          </span>
+        </Tooltip>
+      )
+    case 'Succeeded':
+    case 'Running':
+    case 'Indexed':
+      return (
+        <Tooltip title={status} arrow>
+          <span>
+            <Iconify color='#54D62C' icon='eva:checkmark-circle-2-fill' width={22} height={22} />
+          </span>
+        </Tooltip>
+      )
+    default:
+      return <CircularProgress size='22px' />
+  }
+}