diff --git a/web/packages/shared/components/Search/SearchPanel.tsx b/web/packages/shared/components/Search/SearchPanel.tsx
index 521ca6d4a9294..c69930a20f120 100644
--- a/web/packages/shared/components/Search/SearchPanel.tsx
+++ b/web/packages/shared/components/Search/SearchPanel.tsx
@@ -22,6 +22,7 @@ import styled from 'styled-components';
 import { Flex } from 'design';
 import InputSearch from 'design/DataTable/InputSearch';
 import { PageIndicatorText } from 'design/DataTable/Pager/PageIndicatorText';
+import { FlexProps } from 'design/Flex/Flex';
 import { AdvancedSearchToggle } from 'shared/components/AdvancedSearchToggle';
 
 // eslint-disable-next-line no-restricted-imports -- FIXME
@@ -35,6 +36,7 @@ export function SearchPanel({
   disableSearch,
   hideAdvancedSearch,
   extraChildren,
+  mb = 3,
 }: {
   updateQuery?: (s: string) => void;
   updateSearch: (s: string) => void;
@@ -43,6 +45,7 @@ export function SearchPanel({
   disableSearch?: boolean;
   hideAdvancedSearch?: boolean;
   extraChildren?: JSX.Element;
+  mb?: FlexProps['mb'];
 }) {
   const [query, setQuery] = useState(filter.search || filter.query || '');
   const [isAdvancedSearch, setIsAdvancedSearch] = useState(!!filter.query);
@@ -72,7 +75,7 @@ export function SearchPanel({
       justifyContent="space-between"
       alignItems="center"
       width="100%"
-      mb={3}
+      mb={mb}
     >
       <Flex style={{ width: '100%' }} alignItems="center">
         <StyledFlex
diff --git a/web/packages/teleport/src/BotInstances/BotInstances.story.tsx b/web/packages/teleport/src/BotInstances/BotInstances.story.tsx
index a993324dee156..2d6fd654d3c6f 100644
--- a/web/packages/teleport/src/BotInstances/BotInstances.story.tsx
+++ b/web/packages/teleport/src/BotInstances/BotInstances.story.tsx
@@ -203,7 +203,7 @@ function Wrapper(props?: {
         <TeleportProviderBasic teleportCtx={ctx}>
           <Router history={history}>
             <Route path={cfg.routes.botInstances}>
-              <Box height={820} overflow={'auto'}>
+              <Box height={820}>
                 <BotInstances />
               </Box>
             </Route>
diff --git a/web/packages/teleport/src/BotInstances/BotInstances.test.tsx b/web/packages/teleport/src/BotInstances/BotInstances.test.tsx
index 66d44e62a2b96..fdc83a0bcbb7b 100644
--- a/web/packages/teleport/src/BotInstances/BotInstances.test.tsx
+++ b/web/packages/teleport/src/BotInstances/BotInstances.test.tsx
@@ -229,16 +229,20 @@ describe('BotInstances', () => {
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
 
     expect(
-      screen.queryByRole('heading', { name: 'Resource YAML' })
+      screen.queryByRole('heading', {
+        name: 'test-bot-2/3c3aae3e-de25-4824-a8e9-5a531862f19a',
+      })
     ).not.toBeInTheDocument();
 
-    const item2 = screen.getByRole('listitem', {
+    const item = screen.getByRole('listitem', {
       name: 'test-bot-2/3c3aae3e-de25-4824-a8e9-5a531862f19a',
     });
-    await user.click(item2);
+    await user.click(item);
 
     expect(
-      screen.getByRole('heading', { name: 'Resource YAML' })
+      screen.getByRole('heading', {
+        name: 'test-bot-2/3c3aae3e-de25-4824-a8e9-5a531862f19a',
+      })
     ).toBeInTheDocument();
 
     expect(
diff --git a/web/packages/teleport/src/BotInstances/BotInstances.tsx b/web/packages/teleport/src/BotInstances/BotInstances.tsx
index da8dd9d81338d..f412bbf91040e 100644
--- a/web/packages/teleport/src/BotInstances/BotInstances.tsx
+++ b/web/packages/teleport/src/BotInstances/BotInstances.tsx
@@ -176,9 +176,9 @@ export function BotInstances() {
   }
 
   return (
-    <FeatureBox>
-      <FeatureHeader justifyContent="space-between">
-        <FeatureHeaderTitle>Bot instances</FeatureHeaderTitle>
+    <FeatureBox hideBottomSpacing>
+      <FeatureHeader justifyContent="space-between" mb={0}>
+        <FeatureHeaderTitle>Bot Instances</FeatureHeaderTitle>
         <InfoGuideButton config={{ guide: <InfoGuide /> }} />
       </FeatureHeader>
 
@@ -190,6 +190,7 @@ export function BotInstances() {
           }}
           updateSearch={query => handleQueryChange(query, false)}
           updateQuery={query => handleQueryChange(query, true)}
+          mb={2}
         />
         <ContentContainer>
           <ListAndDetailsContainer $listOnlyMode={!selectedItemId}>
@@ -234,7 +235,7 @@ const Container = styled(Flex)`
   flex-direction: column;
   flex: 1;
   overflow: auto;
-  gap: ${props => props.theme.space[2]}px;
+  padding-bottom: ${props => props.theme.space[3]}px;
 `;
 
 const ContentContainer = styled(Flex)`
diff --git a/web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.tsx b/web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.tsx
index d300edb7de469..37cb4c429c589 100644
--- a/web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.tsx
+++ b/web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.tsx
@@ -57,14 +57,14 @@ export function BotInstanceDetails(props: {
   return (
     <Container>
       <TitleContainer>
-        <Flex gap={2} alignItems={'center'}>
-          <HoverTooltip placement="top" tipContent={'Close'}>
-            <ButtonIcon onClick={() => onClose()} aria-label="close">
-              <Cross size="medium" />
-            </ButtonIcon>
-          </HoverTooltip>
-          <TitleText>Resource YAML</TitleText>
-        </Flex>
+        <TitleText>
+          {botName}/{instanceId}
+        </TitleText>
+        <HoverTooltip placement="top" tipContent={'Close'}>
+          <ButtonIcon onClick={() => onClose()} aria-label="close">
+            <Cross size="medium" />
+          </ButtonIcon>
+        </HoverTooltip>
       </TitleContainer>
       <Divider />
       <ContentContainer>
@@ -90,7 +90,7 @@ export function BotInstanceDetails(props: {
         {isSuccess && data.yaml ? (
           <YamlContaner>
             <TextEditor
-              bg="levels.elevated"
+              bg="levels.sunken"
               data={[
                 {
                   content: data.yaml,
@@ -113,6 +113,7 @@ const Container = styled.section`
   border-left-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
   border-left-width: 1px;
   border-left-style: solid;
+  overflow: hidden;
 `;
 
 const TitleContainer = styled(Flex)`
@@ -120,13 +121,18 @@ const TitleContainer = styled(Flex)`
   justify-content: space-between;
   height: ${p => p.theme.space[8]}px;
   padding-left: ${p => p.theme.space[3]}px;
+  padding-right: ${p => p.theme.space[3]}px;
   gap: ${p => p.theme.space[2]}px;
+  overflow: hidden;
 `;
 
 export const TitleText = styled(Text).attrs({
   as: 'h2',
   typography: 'h2',
-})``;
+})`
+  flex: 1;
+  white-space: nowrap;
+`;
 
 const Divider = styled.div`
   height: 1px;
@@ -143,5 +149,5 @@ const ContentContainer = styled.div`
 const YamlContaner = styled(Flex)`
   flex: 1;
   border-radius: ${props => props.theme.space[2]}px;
-  background-color: ${({ theme }) => theme.colors.levels.elevated};
+  background-color: ${({ theme }) => theme.colors.levels.surface};
 `;
diff --git a/web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx b/web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx
index 02e2e1f898f83..6ce8874992a81 100644
--- a/web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx
+++ b/web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx
@@ -86,7 +86,7 @@ function InternalBotInstancesList(
   return (
     <Container>
       <TitleContainer>
-        <TitleText>Currently Active</TitleText>
+        <TitleText>Active Instances</TitleText>
         <SortMenu
           current={{
             fieldName: sortField,
@@ -131,7 +131,7 @@ function InternalBotInstancesList(
       {hasData ? (
         <>
           {data && data.length > 0 ? (
-            <ContentContainer ref={contentRef}>
+            <ContentContainer ref={contentRef} data-scrollbar="default">
               {data.map((instance, i) => (
                 <React.Fragment key={`${instance.instance_id}`}>
                   {i === 0 ? undefined : <Divider />}
diff --git a/web/packages/teleport/src/Bots/Delete/DeleteDialog.test.tsx b/web/packages/teleport/src/Bots/Delete/DeleteDialog.test.tsx
index 970e38122520d..a280971870ff5 100644
--- a/web/packages/teleport/src/Bots/Delete/DeleteDialog.test.tsx
+++ b/web/packages/teleport/src/Bots/Delete/DeleteDialog.test.tsx
@@ -56,7 +56,7 @@ describe('DeleteDialog', () => {
     expect(screen.getByText('Delete test-bot-name?')).toBeInTheDocument();
     expect(
       screen.getByText(
-        'Alternatively, you can lock a bot to stop all of its activity.'
+        'Alternatively, you can lock a bot to stop all of its activity immediately.'
       )
     ).toBeInTheDocument();
     expect(screen.getByText('Delete Bot')).toBeEnabled();
@@ -99,7 +99,7 @@ describe('DeleteDialog', () => {
     });
     expect(
       screen.queryByText(
-        'Alternatively, you can lock a bot to stop all of its activity.'
+        'Alternatively, you can lock a bot to stop all of its activity immediately.'
       )
     ).not.toBeInTheDocument();
     expect(screen.queryByText('Lock Bot')).not.toBeInTheDocument();
diff --git a/web/packages/teleport/src/Bots/Delete/DeleteDialog.tsx b/web/packages/teleport/src/Bots/Delete/DeleteDialog.tsx
index 82f13c4b05007..309d9771e684e 100644
--- a/web/packages/teleport/src/Bots/Delete/DeleteDialog.tsx
+++ b/web/packages/teleport/src/Bots/Delete/DeleteDialog.tsx
@@ -92,15 +92,19 @@ export function DeleteDialog(props: {
       <DialogHeader>
         <DialogTitle>Delete {botName}?</DialogTitle>
       </DialogHeader>
-      <DialogContent>
+      <DialogContent maxWidth={540}>
         <div>
           <P>
-            Deleting a bot is permanent and cannot be undone. All bot instances
-            will terminate immediately.
+            Deleting a bot is permanent and cannot be undone. Bot instances
+            remain active until their issued credentials expire.
+            {showLockAlternative
+              ? ''
+              : ' To terminate active instances immediately, lock the bot before deleting it.'}
           </P>
           {showLockAlternative ? (
             <P>
-              Alternatively, you can lock a bot to stop all of its activity.
+              Alternatively, you can lock a bot to stop all of its activity
+              immediately.
             </P>
           ) : undefined}
         </div>
diff --git a/web/packages/teleport/src/Bots/Details/Instance.tsx b/web/packages/teleport/src/Bots/Details/Instance.tsx
index 740f6ebd31381..e58421835e601 100644
--- a/web/packages/teleport/src/Bots/Details/Instance.tsx
+++ b/web/packages/teleport/src/Bots/Details/Instance.tsx
@@ -64,7 +64,16 @@ export function Instance(props: {
     <Container
       $isSelectable={!!isSelectable}
       $isSelected={!!isSelected}
-      onClick={() => onSelected?.()}
+      onClick={onSelected}
+      onKeyUp={
+        onSelected
+          ? event => {
+              if (event.key === 'Enter') {
+                onSelected();
+              }
+            }
+          : undefined
+      }
       role="listitem"
       tabIndex={0}
       aria-label={`${botName}/${id}`}
@@ -148,7 +157,8 @@ const Container = styled(Flex)<{
       ? css`
           border-left: ${p.theme.space[1]}px solid
             ${p.theme.colors.interactive.solid.primary.default};
-          background-color: ${p.theme.colors.interactive.tonal.neutral[0]};
+          padding-left: ${props => props.theme.space[3] - p.theme.space[1]}px;
+          background-color: ${p.theme.colors.levels.sunken};
         `
       : ''}
 
@@ -158,10 +168,12 @@ const Container = styled(Flex)<{
           cursor: pointer;
 
           &:hover {
-            background-color: ${p.theme.colors.interactive.tonal.neutral[0]};
+            background-color: ${p.theme.colors.levels.sunken};
           }
-          &:active {
-            background-color: ${p.theme.colors.interactive.tonal.neutral[1]};
+          &:active,
+          &:focus {
+            outline: none;
+            background-color: ${p.theme.colors.levels.deep};
           }
         `
       : ''}