diff --git a/.storybook/helpers/styles.ts b/.storybook/helpers/styles.ts
index 773cde5260..d66b8155a4 100644
--- a/.storybook/helpers/styles.ts
+++ b/.storybook/helpers/styles.ts
@@ -1,9 +1,10 @@
 import styled from 'styled-components'
 import { Theme } from 'uiSrc/components/base/theme/types'
+import PageBody from 'uiSrc/components/base/layout/page/PageBody'
 
-export const StyledContainer = styled.div`
-  padding: 50px;
+export const StyledContainer = styled(PageBody)`
   height: max-content;
+  max-height: 100%;
   overflow: hidden;
   overflow-y: auto;
   background-color: ${({ theme }: { theme: Theme }) =>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index a3407dc6d5..240c7771a1 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -13,6 +13,13 @@
       min-height: 100vh;
     }
 
+    #storybook-root {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  
     .sbdocs-wrapper div:has(>div>.toc-wrapper){
       width:14rem;
     }
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index c21141eebb..1120831996 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -9,6 +9,7 @@ import { CommonStyles, themeDark, themeLight, themeOld } from '@redis-ui/styles'
 import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
 import '@redis-ui/styles/fonts.css'
+import 'uiSrc/pages/home/styles.scss'
 import { RootStoryLayout } from './RootStoryLayout'
 import { StoryContextProvider } from './Story.context'
 import { useStoryContext } from 'storybook/internal/preview-api'
@@ -18,12 +19,13 @@ import { type Theme } from 'uiSrc/components/base/theme/types'
 import { Provider } from 'react-redux'
 import { store } from 'uiSrc/slices/store'
 import Router from 'uiSrc/Router'
+import { StyledContainer } from './helpers/styles'
 
 const parameters: Parameters = {
   parameters: {
     layout: 'centered',
   },
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: { argTypesRegex: '^on.*' },
   controls: {
     disableSaveFromUI: true,
     matchers: {
@@ -51,7 +53,7 @@ const parameters: Parameters = {
 const GlobalStoryStyles = createGlobalStyle`
   .sb-show-main, .docs-story {
     background: ${({ theme }: { theme: Theme }) => theme.globals.body.bgColor};
-    color: ${({ theme }: { theme: Theme }) => theme.globals.body.textColor};
+    color: ${({ theme }: { theme: Theme }) => theme.components.typography.colors.primary};
   }
 `
 
@@ -65,7 +67,9 @@ const preview: Preview = {
             <TooltipProvider>
               <RootStoryLayout storyContext={useStoryContext()}>
                 <CommonStyles />
-                <Story />
+                <StyledContainer>
+                  <Story />
+                </StyledContainer>
               </RootStoryLayout>
             </TooltipProvider>
           </Provider>
diff --git a/redisinsight/ui/src/components/auto-discover/Header.tsx b/redisinsight/ui/src/components/auto-discover/Header.tsx
new file mode 100644
index 0000000000..13947aca79
--- /dev/null
+++ b/redisinsight/ui/src/components/auto-discover/Header.tsx
@@ -0,0 +1,61 @@
+import React, { ReactNode } from 'react'
+
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
+import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
+import {
+  PageSubTitle,
+  PageTitle,
+  SearchContainer,
+  SearchForm,
+} from 'uiSrc/components/auto-discover/index'
+import { SearchInput } from 'uiSrc/components/base/inputs'
+
+type HeaderProps = {
+  title: ReactNode
+  subTitle?: ReactNode
+  onBack: () => void
+  onQueryChange: (query: string) => void
+  backButtonText?: string
+}
+export const Header = ({
+  title,
+  subTitle,
+  onBack,
+  onQueryChange,
+  backButtonText = 'Add databases',
+}: HeaderProps) => {
+  return (
+    <Row align="center" justify="between" grow={false}>
+      <Col align="start" justify="start" gap="m">
+        <EmptyButton
+          icon={ChevronLeftIcon}
+          onClick={onBack}
+          data-testid="btn-back-adding"
+        >
+          {backButtonText}
+        </EmptyButton>
+        <PageTitle color="primary" data-testid="title">
+          {title}
+        </PageTitle>
+        {subTitle && (
+          <FlexItem grow>
+            <PageSubTitle>{subTitle}</PageSubTitle>
+          </FlexItem>
+        )}
+      </Col>
+      <Row justify="end" gap="s" grow={false}>
+        <SearchContainer>
+          <SearchForm>
+            <SearchInput
+              placeholder="Search..."
+              onChange={onQueryChange}
+              aria-label="Search"
+              data-testid="search"
+            />
+          </SearchForm>
+        </SearchContainer>
+      </Row>
+    </Row>
+  )
+}
diff --git a/redisinsight/ui/src/components/auto-discover/index.ts b/redisinsight/ui/src/components/auto-discover/index.ts
index b5d9c263d2..3618342256 100644
--- a/redisinsight/ui/src/components/auto-discover/index.ts
+++ b/redisinsight/ui/src/components/auto-discover/index.ts
@@ -1,20 +1,20 @@
+import React from 'react'
 import styled from 'styled-components'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { Text, Title } from 'uiSrc/components/base/text'
 import { Theme } from 'uiSrc/components/base/theme/types'
-import { FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { CopyIcon } from 'uiSrc/components/base/icons'
 
 export const PageTitle = styled(Title).attrs({
-  size: 'M',
+  size: 'L',
 })`
   padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
 `
 export const PageSubTitle = styled(Text).attrs({
   size: 'S',
-  color: 'subdued',
   component: 'span',
 })`
   padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space100};
@@ -26,12 +26,28 @@ export const SearchContainer = styled(FlexItem)`
 export const SearchForm = styled(FormField)`
   width: 266px;
 `
-export const Footer = styled(FlexItem).attrs({
-  grow: false,
-})`
+export const Footer = styled(FlexItem).attrs<{
+  grow?: boolean | number
+  padding?: React.ComponentProps<typeof FlexItem>['padding']
+}>(({ grow, padding }) => ({
+  grow: grow ?? false,
+  padding: padding ?? 6,
+}))`
   border-top: 1px solid
     ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral400};
 `
+
+export const DatabaseContainer = styled(Col)`
+  position: relative;
+  padding: ${({ theme }: { theme: Theme }) =>
+    `${theme.core.space.space250} ${theme.core.space.space200} 0 ${theme.core.space.space200}`};
+  @media only screen and (min-width: 768px) {
+    padding: ${({ theme }: { theme: Theme }) =>
+      `${theme.core.space.space400} ${theme.core.space.space200} 0 ${theme.core.space.space400}`};
+    max-width: calc(100vw - 95px);
+  }
+`
+
 export const DatabaseWrapper = styled.div`
   height: auto;
   scrollbar-width: thin;
@@ -42,10 +58,6 @@ export const DatabaseWrapper = styled.div`
     theme.semantic.color.background.neutral100};
   flex-grow: 1;
   overflow: hidden;
-
-  .column_status {
-    text-transform: capitalize;
-  }
 `
 export const SelectAllCheckbox = styled(Checkbox)`
   & svg {
@@ -53,23 +65,29 @@ export const SelectAllCheckbox = styled(Checkbox)`
   }
 `
 export const CellText = styled(Text).attrs({
-  size: 'S',
+  size: 'M',
   component: 'span',
-})``
-
-export const CopyPublicEndpointText = styled(CellText)`
+})`
   max-width: 100%;
   display: inline-block;
   width: auto;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+`
+
+export const CopyPublicEndpointText = styled(CellText)`
   vertical-align: top;
 `
+
+export const StatusColumnText = styled(CellText)`
+  text-transform: capitalize;
+`
 export const CopyBtn = styled(IconButton).attrs({
   icon: CopyIcon,
+  size: 'L',
 })`
-  margin-left: 25px;
+  margin-left: 15px;
   opacity: 0;
   height: 0;
   transition: opacity 0.25s ease-in-out;
@@ -83,8 +101,6 @@ export const CopyTextContainer = styled.div`
   padding-right: 34px;
   position: relative;
   * {
-    color: ${({ theme }: { theme: Theme }) =>
-      theme.semantic.color.text.primary500};
   }
 
   &:hover ${CopyBtn} {
diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx
index c8a0592ce4..d1bde85893 100644
--- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx
+++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx
@@ -2,6 +2,8 @@ import { Button } from '@redis-ui/components'
 import React from 'react'
 import { LoaderLargeIcon } from 'uiSrc/components/base/icons'
 import { BaseButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles'
+import { Spacer } from 'uiSrc/components/base/layout'
+import styled from 'styled-components'
 
 type ButtonSize = 'small' | 'medium' | 'large'
 type SizeKey = 'small' | 's' | 'medium' | 'm' | 'large' | 'l'
@@ -59,7 +61,11 @@ export const IconSizes = {
   medium: '20px',
   large: '24px',
 }
-
+const Wrapper = styled.div`
+  svg {
+    display: block;
+  }
+`
 export const ButtonIcon = ({
   buttonSide,
   icon,
@@ -82,11 +88,12 @@ export const ButtonIcon = ({
   if (size) {
     iconSize = IconSizes[size]
   }
+  const spacer = <Spacer size="s" direction="horizontal" />
   return (
-    <Button.Icon
-      title={`button-icon ${iconSide}`}
-      icon={renderIcon}
-      customSize={iconSize}
-    />
+    <Wrapper>
+      {buttonSide === 'right' && spacer}
+      <Button.Icon icon={renderIcon} customSize={iconSize} />
+      {buttonSide === 'left' && spacer}
+    </Wrapper>
   )
 }
diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx
index b5016359d4..7ad6ddae16 100644
--- a/redisinsight/ui/src/components/base/icons/Icon.tsx
+++ b/redisinsight/ui/src/components/base/icons/Icon.tsx
@@ -3,11 +3,12 @@ import { useTheme } from '@redis-ui/styles'
 import cx from 'classnames'
 import { IconSizeType } from '@redis-ui/icons'
 import { MonochromeIconProps } from 'uiSrc/components/base/icons'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 type BaseIconProps = Omit<MonochromeIconProps, 'color' | 'size'> & {
   icon: React.ComponentType<any>
   color?:
-    | keyof ReturnType<typeof useTheme>['semantic']['color']['icon']
+    | keyof Theme['semantic']['color']['icon']
     | 'currentColor'
     | (string & {})
   size?: IconSizeType | null
@@ -30,7 +31,7 @@ const sizesMap = {
  * @returns A boolean indicating if the color is valid and a type predicate
  */
 function isValidIconColor(
-  theme: ReturnType<typeof useTheme>,
+  theme: Theme,
   color: string | number | symbol,
 ): color is keyof typeof theme.semantic.color.icon {
   return color in theme.semantic.color.icon
diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts
index aca8a3d8d8..cc95955d17 100644
--- a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts
+++ b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts
@@ -222,46 +222,46 @@ export const flexItemStyles = {
     `,
   },
   padding: {
-    '0': css`
+    0: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space000};
     `,
-    '1': css`
+    1: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space010};
     `,
-    '2': css`
+    2: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space025};
     `,
-    '3': css`
+    3: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
     `,
-    '4': css`
+    4: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space100};
     `,
-    '5': css`
+    5: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space150};
     `,
-    '6': css`
+    6: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
     `,
-    '7': css`
+    7: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space250};
     `,
-    '8': css`
+    8: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space300};
     `,
-    '9': css`
+    9: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space400};
     `,
-    '10': css`
+    10: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space500};
     `,
-    '11': css`
+    11: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space550};
     `,
-    '12': css`
+    12: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space600};
     `,
-    '13': css`
+    13: css`
       padding: ${({ theme }: { theme: Theme }) => theme.core.space.space800};
     `,
   },
@@ -285,33 +285,19 @@ export const VALID_GROW_VALUES = [
   10,
 ] as const
 
-export const VALID_PADDING_VALUES = [
-  null,
-  undefined,
-  true,
-  false,
-  0, // '0',
-  1, // '0.1rem: 1,25px',
-  2, // '0.2rem: 2,5px',
-  3, // '0.4rem: 5px',
-  4, // '0.8rem: 10px',
-  5, // '1.2rem: 15px',
-  6, // '1.6rem: 20px',
-  7, // '2rem: 25px',
-  8, // '2.4rem: 30px',
-  9, // '3.2rem: 40px',
-  10, // '4rem: 50px',
-  11, // '4.4rem: 55px',
-  12, // '4.8rem: 60px',
-  13, // '6.4rem: 80px',
-] as const
+export type PaddingType =
+  | keyof typeof flexItemStyles.padding
+  | null
+  | undefined
+  | true
+  | false
 
 export type FlexItemProps = React.HTMLAttributes<HTMLDivElement> &
   PropsWithChildren &
   CommonProps & {
     grow?: (typeof VALID_GROW_VALUES)[number]
     $direction?: (typeof dirValues)[number]
-    $padding?: (typeof VALID_PADDING_VALUES)[number]
+    $padding?: PaddingType
     $gap?: GapSizeType
   }
 
@@ -339,10 +325,7 @@ export const StyledFlexItem = styled.div<FlexItemProps>`
     if ($padding === true) {
       return flexItemStyles.padding['4'] // Default padding (space100)
     }
-    if (
-      typeof $padding === 'number' &&
-      flexItemStyles.padding[$padding] !== undefined
-    ) {
+    if (flexItemStyles.padding[$padding] !== undefined) {
       return flexItemStyles.padding[$padding]
     }
     return ''
diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.tsx
index 9083099a59..b0c7bdc2a2 100644
--- a/redisinsight/ui/src/components/base/layout/flex/flex.tsx
+++ b/redisinsight/ui/src/components/base/layout/flex/flex.tsx
@@ -5,10 +5,10 @@ import {
   FlexItemProps,
   FlexProps,
   GridProps,
+  PaddingType,
   StyledFlex,
   StyledFlexItem,
   StyledGrid,
-  VALID_PADDING_VALUES,
 } from 'uiSrc/components/base/layout/flex/flex.styles'
 
 export const Grid = ({ children, className, ...rest }: GridProps) => {
@@ -77,7 +77,7 @@ export const FlexGroup = ({
  * Column Component
  *
  * A Column component is a special type of FlexGroup that is meant to be used when you
- * want to layout a group of items in a vertical column. It is functionally equivalent to
+ * want to lay out a group of items in a vertical column. It is functionally equivalent to
  * using a FlexGroup with a direction of 'column', but includes some additional conveniences.
  *
  * This is the preferred API of a component that is not meant to be distributed but widely used in our project
@@ -154,7 +154,7 @@ export const FlexItem = ({
   direction,
   ...rest
 }: Omit<FlexItemProps, '$padding' | '$direction'> & {
-  padding?: (typeof VALID_PADDING_VALUES)[number]
+  padding?: PaddingType
   direction?: (typeof dirValues)[number]
 }) => {
   const classes = classNames('RI-flex-item', className)
diff --git a/redisinsight/ui/src/components/base/layout/page/page.styles.ts b/redisinsight/ui/src/components/base/layout/page/page.styles.ts
index 05218505d6..a2078712a7 100644
--- a/redisinsight/ui/src/components/base/layout/page/page.styles.ts
+++ b/redisinsight/ui/src/components/base/layout/page/page.styles.ts
@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components'
 import { CSSProperties, HTMLAttributes } from 'react'
 import { StyledPageHeader } from 'uiSrc/components/base/layout/page/page-heading.styles'
 import { StyledPageBody } from 'uiSrc/components/base/layout/page/page-body.styles'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export const PageClassNames = {
   page: 'RI-page',
@@ -123,7 +124,8 @@ export const StyledPage = styled.div<
   }
 >`
   display: flex;
-  background-color: var(--euiPageBackgroundColor);
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.neutral100};
   /* Ensure Safari doesn't shrink height beyond contents */
   flex-shrink: 0;
   /* Ensure Firefox doesn't expand width beyond bounds */
diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.spec.tsx b/redisinsight/ui/src/components/base/layout/spacer/spacer.spec.tsx
new file mode 100644
index 0000000000..00f700433b
--- /dev/null
+++ b/redisinsight/ui/src/components/base/layout/spacer/spacer.spec.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { render } from 'uiSrc/utils/test-utils'
+import { Spacer } from './spacer'
+import { SpacerProps } from './spacer.styles'
+
+const sizeToValue = {
+  xs: '0.2rem',
+  s: '0.4rem',
+  m: '0.8rem',
+  l: '1.6rem',
+  xl: '2rem',
+  xxl: '2.4rem',
+} as const
+
+describe('Spacer', () => {
+  test('is rendered', () => {
+    const { container } = render(<Spacer />)
+
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  describe('Size', () => {
+    Object.entries(sizeToValue).forEach(([size, value]) => {
+      it(`size '${size}' is rendered`, () => {
+        const { container } = render(
+          <Spacer size={size as SpacerProps['size']} />,
+        )
+        expect(container.firstChild).toHaveStyle(`height: ${value}`)
+      })
+    })
+  })
+
+  describe('Direction', () => {
+    it(`width is rendered for Horizontal direction`, () => {
+      const { container } = render(<Spacer />)
+      expect(container.firstChild).toHaveStyle(`height: 1.6rem`)
+      expect(container.firstChild).not.toHaveStyle(`width: 1.6rem`)
+    })
+    it(`width is rendered for explicit Horizontal direction`, () => {
+      const { container } = render(<Spacer direction="horizontal" />)
+      expect(container.firstChild).toHaveStyle(`width: 1.6rem`)
+      expect(container.firstChild).not.toHaveStyle(`height: 1.6rem`)
+    })
+    it(`height is rendered for Vertical direction`, () => {
+      const { container } = render(<Spacer direction="vertical" />)
+      expect(container.firstChild).toHaveStyle('height: 1.6rem')
+      expect(container.firstChild).not.toHaveStyle(`width: 1.6rem`)
+    })
+  })
+})
diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts b/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts
index 317aed0aeb..995d5ac8e8 100644
--- a/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts
+++ b/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts
@@ -14,6 +14,7 @@ export type SpacerProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     children?: ReactNode
     size?: SpacerSize | ThemeSpacingKey
+    direction?: 'horizontal' | 'vertical'
   }
 
 export const spacerStyles: Record<SpacerSize, ReturnType<typeof css>> = {
@@ -54,7 +55,19 @@ const getSpacingValue = (
   return spacerStyles[size as SpacerSize]
 }
 
-export const StyledSpacer = styled.div<SpacerProps>`
+type StyledSpacerType = Omit<SpacerProps, 'direction'> & {
+  $direction: SpacerProps['direction']
+}
+
+export const StyledSpacer = styled.div<StyledSpacerType>`
   flex-shrink: 0;
-  height: ${({ size = 'l', theme }) => getSpacingValue(size, theme)};
+  ${({ $direction = 'vertical', size = 'l', theme }) => {
+    return $direction === 'horizontal'
+      ? css`
+          width: ${getSpacingValue(size, theme)};
+        `
+      : css`
+          height: ${getSpacingValue(size, theme)};
+        `
+  }}
 `
diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx b/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx
index fd3c0491d9..7274eac814 100644
--- a/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx
+++ b/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx
@@ -16,9 +16,18 @@ import { SpacerProps, StyledSpacer } from './spacer.styles'
  *
  *   The default value for `size` is 'l'.
  */
-export const Spacer = ({ className, children, ...rest }: SpacerProps) => {
+export const Spacer = ({
+  className,
+  children,
+  direction,
+  ...rest
+}: SpacerProps) => {
   return (
-    <StyledSpacer {...rest} className={cx('RI-spacer', className)}>
+    <StyledSpacer
+      {...rest}
+      className={cx('RI-spacer', className)}
+      $direction={direction}
+    >
       {children}
     </StyledSpacer>
   )
diff --git a/redisinsight/ui/src/components/base/link/UserProfileLink.tsx b/redisinsight/ui/src/components/base/link/UserProfileLink.tsx
index 970caa559e..b854d03002 100644
--- a/redisinsight/ui/src/components/base/link/UserProfileLink.tsx
+++ b/redisinsight/ui/src/components/base/link/UserProfileLink.tsx
@@ -1,11 +1,11 @@
-import styled from "styled-components"
-import { useTheme } from "@redis-ui/styles"
-import { Link } from "./Link"
+import styled from 'styled-components'
+import { Link } from './Link'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export const UserProfileLink = styled(Link)`
   padding: 8px 12px !important;
   width: 100%;
-  color: ${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
+  color: ${({ theme }: { theme: Theme }) =>
     theme.semantic.color.text.informative400} !important;
   text-decoration: none !important;
 
diff --git a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx
index 26fb9aba9a..8b14ac7fad 100644
--- a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx
+++ b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx
@@ -1,6 +1,7 @@
-import { omit } from 'lodash'
 import React, { useState } from 'react'
-import cx from 'classnames'
+import styled from 'styled-components'
+import { omit } from 'lodash'
+
 import { useDebouncedEffect } from 'uiSrc/services'
 import {
   NumericInput,
@@ -9,7 +10,6 @@ import {
 } from 'uiSrc/components/base/inputs'
 
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import styles from './styles.module.scss'
 
 export enum SentinelInputFieldType {
   Text = 'text',
@@ -33,6 +33,14 @@ export interface Props {
   append?: React.ReactElement
   onChangedInput: (name: string, value: string) => void
 }
+const InputInvalidIcon = styled(RiIcon).attrs({
+  color: 'danger500',
+  type: 'ToastDangerIcon',
+})`
+  position: absolute;
+  top: calc(50% - 9px);
+  right: 10px;
+`
 
 const InputFieldSentinel = (props: Props) => {
   const {
@@ -82,13 +90,7 @@ const InputFieldSentinel = (props: Props) => {
           data-testid="sentinel-input-number"
         />
       )}
-      {isInvalid && (
-        <RiIcon
-          color="danger500"
-          type="ToastDangerIcon"
-          className={cx(styles.inputInvalidIcon)}
-        />
-      )}
+      {isInvalid && <InputInvalidIcon />}
     </>
   )
 }
diff --git a/redisinsight/ui/src/components/message-bar/MessageBar.tsx b/redisinsight/ui/src/components/message-bar/MessageBar.tsx
index 3ac33e041c..4244eb4d9c 100644
--- a/redisinsight/ui/src/components/message-bar/MessageBar.tsx
+++ b/redisinsight/ui/src/components/message-bar/MessageBar.tsx
@@ -23,9 +23,7 @@ const MessageBar = ({ children, opened }: Props) => {
   return (
     <ContainerWrapper centered>
       <Container grow={false} centered gap="l">
-        <FlexItem grow className={styles.text}>
-          {children}
-        </FlexItem>
+        <FlexItem grow>{children}</FlexItem>
         <FlexItem className={styles.cross}>
           <IconButton
             icon={CancelSlimIcon}
diff --git a/redisinsight/ui/src/components/page-header/PageHeader.tsx b/redisinsight/ui/src/components/page-header/PageHeader.tsx
index 125e8023ac..54931014dd 100644
--- a/redisinsight/ui/src/components/page-header/PageHeader.tsx
+++ b/redisinsight/ui/src/components/page-header/PageHeader.tsx
@@ -18,9 +18,10 @@ import { Title } from 'uiSrc/components/base/text/Title'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { RedisLogoFullIcon } from 'uiSrc/components/base/icons'
 import styles from './PageHeader.module.scss'
+import { ColorText } from 'uiSrc/components/base/text'
 
 interface Props {
-  title: string
+  title?: string
   subtitle?: string
   children?: React.ReactNode
   showInsights?: boolean
@@ -57,9 +58,13 @@ const PageHeader = (props: Props) => {
     <div className={cx(styles.pageHeader, className)}>
       <div className={styles.pageHeaderTop}>
         <div>
-          <Title size="L" data-testid="page-title">
-            <b data-testid="page-header-title">{title}</b>
-          </Title>
+          {title && (
+            <Title size="L" data-testid="page-title">
+              <ColorText variant="semiBold" data-testid="page-header-title">
+                {title}
+              </ColorText>
+            </Title>
+          )}
           {subtitle ? <span data-testid="page-subtitle">{subtitle}</span> : ''}
         </div>
         {children ? <>{children}</> : ''}
diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx
index 32acdc861a..2530803b04 100644
--- a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx
+++ b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx
@@ -98,6 +98,7 @@ const InsightsTrigger = (props: Props) => {
           onClick={handleClickTrigger}
           data-testid="insights-trigger"
           isOpen={isInsightsOpen}
+          aria-label="Insights-trigger"
         />
         {isHighlighted && instanceId && <BulbHighlighting />}
       </BulbWrapper>
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx
index dab70b8298..911d6c2cca 100644
--- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx
@@ -118,7 +118,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
           <SummaryText />
         </MessageBar>
       </div>
-      <Footer padding={4}>
+      <Footer>
         <Row justify="between">
           <SecondaryButton
             onClick={onBack}
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx
index 401d710f24..8ada4c33af 100644
--- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx
@@ -217,7 +217,7 @@ const RedisCloudDatabasesPage = ({
           {!items.length && <Text size="S">{message}</Text>}
         </DatabaseWrapper>
       </div>
-      <Footer padding={4}>
+      <Footer>
         <Row justify="between">
           <SecondaryButton
             onClick={onBack}
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx
index 27525ced12..28ba35616c 100644
--- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx
@@ -280,7 +280,7 @@ const RedisCloudSubscriptions = ({
         </MessageBar>
       </div>
 
-      <Footer padding={4}>
+      <Footer>
         <Row justify="between">
           <SecondaryButton
             onClick={onBack}
diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/utils.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/utils.tsx
index 53a6204ad4..e189d132be 100644
--- a/redisinsight/ui/src/pages/autodiscover-cloud/utils.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-cloud/utils.tsx
@@ -1,66 +1,27 @@
 import React from 'react'
-import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
-import {
-  ColumnDefinition,
-  RowDefinition,
-} from 'uiSrc/components/base/layout/table'
-import { SelectAllCheckbox } from 'uiSrc/components/auto-discover'
+import { type ColumnDef, Table } from 'uiSrc/components/base/layout/table'
 
 type Props = {
   size?: number
   id?: string
-  enableResizing?: boolean
-  canSelectRow?: (row: RowDefinition<any>) => boolean
-  setSelection: (selection: any[]) => void
-  onSelectionChange: (selection: any) => void
 }
 
+/**
+ * @see [Row selection]{@link https://redislabsdev.github.io/redis-ui/?path=/docs/table-table-rowselection--docs#usage}
+ */
 export const getSelectionColumn = <T extends object>({
   size = 50,
-  id = 'select-col',
-  enableResizing = false,
-  canSelectRow = (_row: RowDefinition<T>) => true,
-  setSelection,
-  onSelectionChange,
-}: Props): ColumnDefinition<T> => {
+  id = 'row-selection',
+}: Props = {}): ColumnDef<T> => {
   return {
     id,
     size,
-    enableResizing,
+    isHeaderCustom: true,
     header: ({ table }) => (
-      <SelectAllCheckbox
-        checked={table.getIsAllRowsSelected()}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          const selected = event.target.checked
-          table.toggleAllRowsSelected()
-          if (selected) {
-            const rows = table.getRowModel().rows
-            setSelection(
-              rows
-                .filter((row) => canSelectRow(row))
-                .map((row) => row.original),
-            )
-          } else {
-            setSelection([])
-          }
-        }} //or getToggleAllPageRowsSelectedHandler
-      />
+      <Table.HeaderMultiRowSelectionButton table={table} data-testid={id} />
+    ),
+    cell: ({ row }) => (
+      <Table.RowSelectionButton row={row} data-testid={`${id}-${row.id}`} />
     ),
-    cell: ({ row }) => {
-      let canSelect = true
-      if (canSelectRow) {
-        canSelect = canSelectRow(row)
-      }
-      return (
-        <Checkbox
-          checked={canSelect && row.getIsSelected()}
-          disabled={!canSelect}
-          onChange={() => {
-            row.toggleSelected()
-            onSelectionChange(row.original)
-          }}
-        />
-      )
-    },
   }
 }
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx
index dab3b2dd81..54cbd0b01a 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/SentinelDatabasesResultPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import SentinelDatabasesResult from './components'
+import SentinelDatabasesResult from './components/SentinelDatabasesResult/SentinelDatabasesResult'
 import { useSentinelDatabasesResultConfig } from './useSentinelDatabasesResultConfig'
 
 const SentinelDatabasesResultPage = () => {
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.spec.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.spec.tsx
index 1f5d5c32ac..4fd3582354 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.spec.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.spec.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import { cleanup, render, screen, fireEvent } from 'uiSrc/utils/test-utils'
-import { ColumnDefinition } from 'uiSrc/components/base/layout/table'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
 import SentinelDatabasesResult, { Props } from './SentinelDatabasesResult'
 
 const mockedProps = mock<Props>()
 
 let mastersMock: ModifiedSentinelMaster[]
-let columnsMock: ColumnDefinition<ModifiedSentinelMaster>[]
+let columnsMock: ColumnDef<ModifiedSentinelMaster>[]
 
 beforeEach(() => {
   cleanup()
@@ -26,7 +26,7 @@ beforeEach(() => {
     {
       name: 'mymaster',
       host: 'localhost',
-      port: 6379,
+      port: '6379',
       alias: 'alias',
       numberOfSlaves: 0,
     },
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.stories.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.stories.tsx
new file mode 100644
index 0000000000..0430a88f12
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.stories.tsx
@@ -0,0 +1,224 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { action } from 'storybook/actions'
+
+import SentinelDatabasesResult from './SentinelDatabasesResult'
+import {
+  AddRedisDatabaseStatus,
+  ModifiedSentinelMaster,
+} from 'uiSrc/slices/interfaces'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+import { colFactory } from '../../useSentinelDatabasesResultConfig'
+import { fn } from 'storybook/test'
+import { faker } from '@faker-js/faker'
+
+let mastersMock: ModifiedSentinelMaster[] = [
+  {
+    name: 'mymaster',
+    status: AddRedisDatabaseStatus.Fail,
+    message: 'Lorem ipsum dolor sit.',
+    host: '192.168.0.19',
+    port: '6379',
+    numberOfSlaves: 0,
+    // nodes: [],
+    id: '1',
+    alias: 'mymaster',
+    username: '',
+    password: '',
+    db: 1,
+    error: {
+      statusCode: 404,
+      name: 'Not Found',
+    },
+  },
+  {
+    name: 'mymaster4',
+    status: AddRedisDatabaseStatus.Fail,
+    loading: true,
+    message: 'Lorem ipsum dolor sit.',
+    host: '192.168.0.19',
+    port: '6379',
+    numberOfSlaves: 0,
+    // nodes: [],
+    id: '4',
+    alias: 'mymaster4',
+    username: '',
+    password: '',
+    db: 1,
+    error: {
+      statusCode: 400,
+      name: 'Not Found',
+    },
+  },
+  {
+    name: 'mymaster2',
+    status: AddRedisDatabaseStatus.Success,
+    message: 'Yay',
+    host: '192.168.0.18',
+    port: '6380',
+    numberOfSlaves: 0,
+    // nodes: [],
+    id: '2',
+    alias: 'mymaster2',
+    username: '',
+    password: '',
+    db: 1,
+  },
+  {
+    name: 'mymaster3',
+    status: AddRedisDatabaseStatus.Fail,
+    message: 'Lorem ipsum dolor.',
+    host: '192.168.0.18',
+    port: '6380',
+    numberOfSlaves: 0,
+    alias: 'mymaster3',
+    username: 'default',
+    password: 'abcde',
+    db: 1,
+  },
+]
+
+let columnsMock: ColumnDef<ModifiedSentinelMaster>[] = colFactory(
+  action('onChangedInput'),
+  action('onAddInstance'),
+  false,
+  mastersMock.length - 2,
+  mastersMock.length,
+)
+const meta: Meta<typeof SentinelDatabasesResult> = {
+  component: SentinelDatabasesResult,
+  args: {
+    columns: columnsMock,
+    countSuccessAdded: mastersMock.filter(
+      (m) => m.status === AddRedisDatabaseStatus.Success,
+    ).length,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SentinelDatabasesResult>
+
+const DefaultRender = () => {
+  return (
+    <SentinelDatabasesResult
+      onViewDatabases={action('onViewDatabases')}
+      columns={columnsMock}
+      masters={mastersMock}
+      countSuccessAdded={
+        mastersMock.filter((m) => m.status === AddRedisDatabaseStatus.Success)
+          .length
+      }
+      onBack={action('onBack')}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <DefaultRender />,
+}
+
+export const WithManyRows: Story = {
+  render: () => {
+    const mastersMock: ModifiedSentinelMaster[] = Array.from(
+      { length: 100 },
+      (_, i) => {
+        const status = Object.values(AddRedisDatabaseStatus)[
+          Math.floor(
+            Math.random() * Object.values(AddRedisDatabaseStatus).length,
+          )
+        ]
+        return {
+          name: `mymaster${i}`,
+          status,
+          message: faker.lorem.sentence(),
+          host: faker.internet.ip(),
+          port: `${faker.internet.port()}`,
+          numberOfSlaves: Math.floor(Math.random() * 10) + 1,
+          id: i.toString(),
+          alias: `mymaster${i}`,
+          username: '',
+          password: '',
+          db: 1,
+          ...(status === AddRedisDatabaseStatus.Fail
+            ? {
+                error: {
+                  statusCode: 404,
+                  name: 'Not Found',
+                },
+              }
+            : {}),
+        }
+      },
+    )
+
+    const columnsMock = colFactory(
+      fn(),
+      fn(),
+      false,
+      mastersMock.filter((m) => m.status === AddRedisDatabaseStatus.Success)
+        .length,
+      mastersMock.length,
+    )
+
+    return (
+      <SentinelDatabasesResult
+        onViewDatabases={fn()}
+        onBack={fn()}
+        columns={columnsMock}
+        masters={mastersMock}
+        countSuccessAdded={
+          mastersMock.filter((m) => m.status === AddRedisDatabaseStatus.Success)
+            .length
+        }
+      />
+    )
+  },
+}
+
+export const AllValid: Story = {
+  args: {
+    columns: colFactory(
+      action('onChangedInput'),
+      action('onAddInstance'),
+      false,
+      1,
+      1,
+    ),
+    countSuccessAdded: 1,
+    masters: [
+      mastersMock.find((m) => m.status === AddRedisDatabaseStatus.Success) ||
+        mastersMock[0],
+    ],
+    onBack: action('onBack'),
+  },
+}
+
+export const AllInvalid: Story = {
+  args: {
+    columns: colFactory(
+      action('onChangedInput'),
+      action('onAddInstance'),
+      false,
+      0,
+      1,
+    ),
+    masters: [mastersMock[0]],
+    onBack: action('onBack'),
+    countSuccessAdded: 0,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    columns: colFactory(
+      action('onChangedInput'),
+      action('onAddInstance'),
+      false,
+      0,
+      0,
+    ),
+    masters: [],
+    onBack: action('onBack'),
+    countSuccessAdded: 0,
+  },
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx
index e27151ec9d..ef18c4a7a6 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx
@@ -1,31 +1,28 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { SearchInput } from 'uiSrc/components/base/inputs'
 
 import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
 import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import MessageBar from 'uiSrc/components/message-bar/MessageBar'
 import { AutodiscoveryPageTemplate } from 'uiSrc/templates'
 
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import {
-  PrimaryButton,
-  SecondaryButton,
-} from 'uiSrc/components/base/forms/buttons'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
-import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
+import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
 
 import {
+  DatabaseContainer,
   DatabaseWrapper,
   Footer,
-  PageTitle,
-  SearchForm,
 } from 'uiSrc/components/auto-discover'
 import { Spacer } from 'uiSrc/components/base/layout'
+import { Header } from 'uiSrc/components/auto-discover/Header'
+import { SummaryText } from './Summary'
 
 export interface Props {
   countSuccessAdded: number
-  columns: ColumnDefinition<ModifiedSentinelMaster>[]
+  columns: ColumnDef<ModifiedSentinelMaster>[]
   masters: ModifiedSentinelMaster[]
   onBack: () => void
   onViewDatabases: () => void
@@ -77,50 +74,26 @@ const SentinelDatabasesResult = ({
     setItems(itemsTemp)
   }
 
-  const SummaryText = () => (
-    <Text color="secondary" size="S" data-testid="summary">
-      <b>Summary: </b>
-      {countSuccessAdded ? (
-        <span>
-          Successfully added {countSuccessAdded}
-          {' primary group(s)'}
-          {countFailAdded ? '; ' : ' '}
-        </span>
-      ) : null}
-      {countFailAdded ? (
-        <span>
-          Failed to add {countFailAdded}
-          {' primary group(s)'}
-        </span>
-      ) : null}
-    </Text>
-  )
-
   return (
     <AutodiscoveryPageTemplate>
-      <div className="databaseContainer">
-        <PageTitle data-testid="title">
-          Auto-Discover Redis Sentinel Primary Groups
-        </PageTitle>
-
-        <Row align="end" gap="s">
-          <FlexItem>
-            <SearchForm>
-              <SearchInput
-                placeholder="Search..."
-                onChange={onQueryChange}
-                aria-label="Search"
-                data-testid="search"
-              />
-            </SearchForm>
-          </FlexItem>
-        </Row>
-        <Spacer size="l" />
+      <DatabaseContainer justify="start">
+        <Header
+          title="Auto-Discover Redis Sentinel Primary Groups"
+          onBack={onBack}
+          onQueryChange={onQueryChange}
+        />
+
+        <Spacer size="m" />
         <DatabaseWrapper>
-          {!items.length || loading ? (
-            <Text>{message}</Text>
+          {loading ? (
+            <Col full centered>
+              <Text size="XL" variant="semiBold">
+                {message}
+              </Text>
+            </Col>
           ) : (
             <Table
+              rowSelectionMode={undefined}
               columns={columns}
               data={items}
               defaultSorting={[
@@ -129,22 +102,27 @@ const SentinelDatabasesResult = ({
                   desc: false,
                 },
               ]}
+              emptyState={() => (
+                <Col centered full>
+                  <FlexItem padding={13}>
+                    <Text size="L">{message}</Text>
+                  </FlexItem>
+                </Col>
+              )}
+              stripedRows
+              paginationEnabled={items?.length > 10}
             />
           )}
         </DatabaseWrapper>
         <MessageBar opened={!!countSuccessAdded || !!countFailAdded}>
-          <SummaryText />
+          <SummaryText
+            countSuccessAdded={countSuccessAdded}
+            countFailAdded={countFailAdded}
+          />
         </MessageBar>
-      </div>
-      <Footer padding={4}>
-        <Row justify="between">
-          <SecondaryButton
-            onClick={onBack}
-            className="btn-cancel btn-back"
-            data-testid="btn-back-to-adding"
-          >
-            Back to adding databases
-          </SecondaryButton>
+      </DatabaseContainer>
+      <Footer>
+        <Row justify="end">
           <PrimaryButton
             size="m"
             onClick={handleViewDatabases}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/Summary.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/Summary.tsx
new file mode 100644
index 0000000000..d59c78c9ac
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/Summary.tsx
@@ -0,0 +1,29 @@
+import { ColorText, Text } from 'uiSrc/components/base/text'
+import React from 'react'
+
+export const SummaryText = ({
+  countSuccessAdded,
+  countFailAdded,
+}: {
+  countSuccessAdded: number
+  countFailAdded: number
+}) => (
+  <Text component="div" color="primary" data-testid="summary">
+    <ColorText variant="semiBold" size="S">
+      Summary:&nbsp;
+    </ColorText>
+    {countSuccessAdded ? (
+      <ColorText size="S">
+        Successfully added {countSuccessAdded}
+        {' primary group(s)'}
+        {countFailAdded ? '; ' : ' '}
+      </ColorText>
+    ) : null}
+    {countFailAdded ? (
+      <ColorText size="S">
+        Failed to add {countFailAdded}
+        {' primary group(s)'}
+      </ColorText>
+    ) : null}
+  </Text>
+)
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/AddressColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/AddressColumn.tsx
new file mode 100644
index 0000000000..68f93cafad
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/AddressColumn.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {
+  CopyTextContainer,
+  CopyPublicEndpointText,
+  CopyBtn,
+} from 'uiSrc/components/auto-discover'
+import { RiTooltip } from 'uiSrc/components'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+const handleCopy = (text = '') => {
+  navigator.clipboard.writeText(text)
+}
+
+export const AddressColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Address',
+    id: 'host',
+    accessorKey: 'host',
+    enableSorting: true,
+    cell: ({
+      row: {
+        original: { host, port },
+      },
+    }) => {
+      const text = `${host}:${port}`
+      return (
+        <CopyTextContainer>
+          <CopyPublicEndpointText className="copyHostPortText">
+            {text}
+          </CopyPublicEndpointText>
+          <RiTooltip
+            position="right"
+            content="Copy"
+            anchorClassName="copyPublicEndpointTooltip"
+          >
+            <CopyBtn
+              aria-label="Copy address"
+              className="copyPublicEndpointBtn"
+              onClick={() => handleCopy(text)}
+              tabIndex={-1}
+            />
+          </RiTooltip>
+        </CopyTextContainer>
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/AliasColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/AliasColumn.tsx
new file mode 100644
index 0000000000..62e1438717
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/AliasColumn.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { CellText } from 'uiSrc/components/auto-discover'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import {
+  ModifiedSentinelMaster,
+  AddRedisDatabaseStatus,
+} from 'uiSrc/slices/interfaces'
+
+export const AliasColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+  errorNotAuth: (
+    error?: string | object | null,
+    status?: AddRedisDatabaseStatus,
+  ) => boolean,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Database Alias*',
+    id: 'alias',
+    accessorKey: 'alias',
+    enableSorting: true,
+    cell: ({
+      row: {
+        original: { id, alias, error, loading = false, status },
+      },
+    }) => {
+      if (errorNotAuth(error, status)) {
+        return <CellText>{alias}</CellText>
+      }
+      return (
+        <InputFieldSentinel
+          name={`alias-${id}`}
+          value={alias}
+          placeholder="Database"
+          disabled={loading}
+          inputType={SentinelInputFieldType.Text}
+          onChangedInput={handleChangedInput}
+          maxLength={500}
+        />
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/DbColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/DbColumn.tsx
new file mode 100644
index 0000000000..b211d3d027
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/DbColumn.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import {
+  ModifiedSentinelMaster,
+  AddRedisDatabaseStatus,
+} from 'uiSrc/slices/interfaces'
+import { ApiStatusCode } from 'uiSrc/constants'
+
+export const DbColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Database Index',
+    id: 'db',
+    accessorKey: 'db',
+    size: 140,
+    cell: ({
+      row: {
+        original: { db, id, loading = false, status, error },
+      },
+    }) => {
+      if (status === AddRedisDatabaseStatus.Success) {
+        return db || <i>not assigned</i>
+      }
+      const isDBInvalid =
+        typeof error === 'object' &&
+        error !== null &&
+        'statusCode' in error &&
+        error.statusCode === ApiStatusCode.BadRequest
+      return (
+        <div role="presentation" style={{ position: 'relative' }}>
+          <InputFieldSentinel
+            min={0}
+            disabled={loading}
+            value={`${db}` || '0'}
+            name={`db-${id}`}
+            isInvalid={isDBInvalid}
+            placeholder="Enter Index"
+            inputType={SentinelInputFieldType.Number}
+            onChangedInput={handleChangedInput}
+          />
+        </div>
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/NumberOfReplicasColumn.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/NumberOfReplicasColumn.ts
new file mode 100644
index 0000000000..dd911758e9
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/NumberOfReplicasColumn.ts
@@ -0,0 +1,12 @@
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const NumberOfReplicasColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: '# of replicas',
+    id: 'numberOfSlaves',
+    accessorKey: 'numberOfSlaves',
+    enableSorting: true,
+    maxSize: 120,
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/PasswordColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/PasswordColumn.tsx
new file mode 100644
index 0000000000..f9901b1af2
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/PasswordColumn.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import {
+  ModifiedSentinelMaster,
+  AddRedisDatabaseStatus,
+} from 'uiSrc/slices/interfaces'
+
+export const PasswordColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+  isInvalid: boolean,
+  errorNotAuth: (
+    error?: string | object | null,
+    status?: AddRedisDatabaseStatus,
+  ) => boolean,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Password',
+    id: 'password',
+    accessorKey: 'password',
+    cell: ({
+      row: {
+        original: { password, id, error, loading = false, status },
+      },
+    }) => {
+      if (
+        errorNotAuth(error, status) ||
+        status === AddRedisDatabaseStatus.Success
+      ) {
+        return password ? '************' : <i>not assigned</i>
+      }
+      return (
+        <div role="presentation" style={{ position: 'relative' }}>
+          <InputFieldSentinel
+            isInvalid={isInvalid}
+            value={password}
+            name={`password-${id}`}
+            placeholder="Enter Password"
+            disabled={loading}
+            inputType={SentinelInputFieldType.Password}
+            onChangedInput={handleChangedInput}
+          />
+        </div>
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/PrimaryGroupColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/PrimaryGroupColumn.tsx
new file mode 100644
index 0000000000..9f24910dd3
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/PrimaryGroupColumn.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CellText } from 'uiSrc/components/auto-discover'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const PrimaryGroupColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Primary Group',
+    id: 'name',
+    accessorKey: 'name',
+    enableSorting: true,
+    maxSize: 200,
+    cell: ({
+      row: {
+        original: { name },
+      },
+    }) => <CellText data-testid={`primary-group_${name}`}>{name}</CellText>,
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/ResultColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/ResultColumn.tsx
new file mode 100644
index 0000000000..5aa6454271
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/ResultColumn.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Loader } from 'uiSrc/components/base/display'
+import {
+  AddRedisDatabaseStatus,
+  ModifiedSentinelMaster,
+} from 'uiSrc/slices/interfaces'
+import { CellText } from 'uiSrc/components/auto-discover'
+import { RiTooltip } from 'uiSrc/components'
+import { ColorText } from 'uiSrc/components/base/text'
+import { Spacer } from 'uiSrc/components/base/layout'
+import { InfoIcon, RiIcon } from 'uiSrc/components/base/icons'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ApiStatusCode } from 'uiSrc/constants'
+import { ApiEncryptionErrors } from 'uiSrc/constants/apiErrors'
+import validationErrors from 'uiSrc/constants/validationErrors'
+import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+
+const addError = (
+  { name, error, alias, loading }: ModifiedSentinelMaster,
+  onAddInstance: (name: string) => void = () => {},
+) => {
+  const isDisabled = !alias
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    'statusCode' in error &&
+    error?.statusCode !== ApiStatusCode.Unauthorized &&
+    !ApiEncryptionErrors.includes(error?.name || '') &&
+    error?.statusCode !== ApiStatusCode.BadRequest
+  ) {
+    return ''
+  }
+  return (
+    <FlexItem padding role="presentation">
+      <RiTooltip
+        position="top"
+        title={isDisabled ? validationErrors.REQUIRED_TITLE(1) : null}
+        content={isDisabled ? <span>Database Alias</span> : null}
+      >
+        <PrimaryButton
+          size="s"
+          disabled={isDisabled}
+          loading={loading}
+          onClick={() => onAddInstance(name)}
+          icon={isDisabled ? InfoIcon : undefined}
+        >
+          Add Primary Group
+        </PrimaryButton>
+      </RiTooltip>
+    </FlexItem>
+  )
+}
+
+export const ResultColumn = (
+  addActions?: boolean,
+  onAddInstance?: (name: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Result',
+    id: 'message',
+    accessorKey: 'message',
+    enableSorting: true,
+    minSize: addActions ? 250 : 110,
+    cell: ({
+      row: {
+        original: { status, message, name, error, alias, loading = false },
+      },
+    }) => {
+      return (
+        <Row
+          data-testid={`status_${name}_${status}`}
+          align="center"
+          justify="between"
+          gap="m"
+        >
+          {loading && <Loader size="L" />}
+          {!loading && status === AddRedisDatabaseStatus.Success && (
+            <CellText>{message}</CellText>
+          )}
+          {!loading && status !== AddRedisDatabaseStatus.Success && (
+            <RiTooltip position="right" title="Error" content={message}>
+              <FlexItem direction="row" grow={false}>
+                <ColorText
+                  size="S"
+                  color="danger"
+                  style={{ cursor: 'pointer' }}
+                >
+                  Error
+                </ColorText>
+                <Spacer size="s" direction="horizontal" />
+                <RiIcon size="M" type="ToastDangerIcon" color="danger600" />
+              </FlexItem>
+            </RiTooltip>
+          )}
+          {addActions &&
+            addError({ name, error, alias, loading }, onAddInstance)}
+        </Row>
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/UsernameColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/UsernameColumn.tsx
new file mode 100644
index 0000000000..f835aa11d2
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/UsernameColumn.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import {
+  ModifiedSentinelMaster,
+  AddRedisDatabaseStatus,
+} from 'uiSrc/slices/interfaces'
+
+export const UsernameColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+  isInvalid: boolean,
+  errorNotAuth: (
+    error?: string | object | null,
+    status?: AddRedisDatabaseStatus,
+  ) => boolean,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Username',
+    id: 'username',
+    accessorKey: 'username',
+    cell: ({
+      row: {
+        original: { username, id, loading = false, error, status },
+      },
+    }) => {
+      if (
+        errorNotAuth(error, status) ||
+        status === AddRedisDatabaseStatus.Success
+      ) {
+        return username || <i>Default</i>
+      }
+      return (
+        <div role="presentation" style={{ position: 'relative' }}>
+          <InputFieldSentinel
+            isText
+            isInvalid={isInvalid}
+            value={username}
+            name={`username-${id}`}
+            placeholder="Enter Username"
+            disabled={loading}
+            inputType={SentinelInputFieldType.Text}
+            onChangedInput={handleChangedInput}
+          />
+        </div>
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/index.ts
new file mode 100644
index 0000000000..eef0057052
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/index.ts
@@ -0,0 +1,8 @@
+export * from './ResultColumn'
+export * from './PrimaryGroupColumn'
+export * from './AliasColumn'
+export * from './AddressColumn'
+export * from './NumberOfReplicasColumn'
+export * from './UsernameColumn'
+export * from './PasswordColumn'
+export * from './DbColumn'
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx
index c5777c5526..a533e7aca4 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/useSentinelDatabasesResultConfig.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
+
 import { ApiStatusCode, Pages } from 'uiSrc/constants'
 import {
   createMastersSentinelAction,
@@ -16,23 +17,17 @@ import {
 } from 'uiSrc/slices/interfaces'
 import { removeEmpty, setTitle } from 'uiSrc/utils'
 import { pick } from 'lodash'
-import { ColumnDefinition } from 'uiSrc/components/base/layout/table'
-import { Loader } from 'uiSrc/components/base/display'
-import { RiTooltip } from 'uiSrc/components/base/tooltip'
-import { ColorText } from 'uiSrc/components/base/text'
-import { InfoIcon, RiIcon } from 'uiSrc/components/base/icons'
-import { InputFieldSentinel } from 'uiSrc/components'
-import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
-import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
-import { ApiEncryptionErrors } from 'uiSrc/constants/apiErrors'
-import validationErrors from 'uiSrc/constants/validationErrors'
-import styles from '../styles.module.scss'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
 import {
-  CellText,
-  CopyBtn,
-  CopyPublicEndpointText,
-  CopyTextContainer,
-} from 'uiSrc/components/auto-discover'
+  AliasColumn,
+  DbColumn,
+  AddressColumn,
+  NumberOfReplicasColumn,
+  PasswordColumn,
+  PrimaryGroupColumn,
+  ResultColumn,
+  UsernameColumn,
+} from './components/column-definitions'
 
 // Define an interface for the error object
 interface ErrorWithStatusCode {
@@ -52,333 +47,121 @@ function errorNotAuth(
   )
 }
 
+export const colFactory = (
+  handleChangedInput: (name: string, value: string) => void,
+  handleAddInstance: (masterName: string) => void,
+  isInvalid: boolean,
+  countSuccessAdded: number,
+  itemsLength: number,
+) => {
+  const cols: ColumnDef<ModifiedSentinelMaster>[] = [
+    ResultColumn(countSuccessAdded !== itemsLength, handleAddInstance),
+    PrimaryGroupColumn(),
+    AliasColumn(handleChangedInput, errorNotAuth),
+    AddressColumn(),
+    NumberOfReplicasColumn(),
+    UsernameColumn(handleChangedInput, isInvalid, errorNotAuth),
+    PasswordColumn(handleChangedInput, isInvalid, errorNotAuth),
+    DbColumn(handleChangedInput),
+  ]
+
+  return cols
+}
+
 export const useSentinelDatabasesResultConfig = () => {
   const [items, setItems] = useState<ModifiedSentinelMaster[]>([])
   const [isInvalid, setIsInvalid] = useState(true)
 
-  const { data: masters } = useSelector(sentinelSelector)
-
-  const countSuccessAdded = masters.filter(
-    ({ status }) => status === AddRedisDatabaseStatus.Success,
-  )?.length
-
   const dispatch = useDispatch()
   const history = useHistory()
 
-  setTitle('Redis Sentinel Primary Groups Added')
-
-  useEffect(() => {
-    if (!masters.length) {
-      history.push(Pages.home)
-    }
-
-    dispatch(resetLoadedSentinel(LoadedSentinel.MastersAdded))
-  }, [])
-
-  useEffect(() => {
-    if (masters.length) {
-      setIsInvalid(true)
-      setItems(masters)
-    }
-  }, [masters])
-
-  const handleBackAdding = () => {
+  const handleBackAdding = useCallback(() => {
     dispatch(resetLoadedSentinel(LoadedSentinel.MastersAdded))
     history.push(Pages.home)
-  }
+  }, [])
 
-  const handleViewDatabases = () => {
+  const handleViewDatabases = useCallback(() => {
     dispatch(resetDataSentinel())
     history.push(Pages.home)
-  }
+  }, [])
 
-  const handleCopy = (text = '') => {
-    navigator.clipboard.writeText(text)
-  }
+  const { data: masters } = useSelector(sentinelSelector)
+  const mastersLength = masters.length
+
+  const countSuccessAdded = masters.filter(
+    ({ status }) => status === AddRedisDatabaseStatus.Success,
+  )?.length
 
-  const handleAddInstance = (masterName: string) => {
-    const instance: ModifiedSentinelMaster = {
-      ...removeEmpty(items.find((item) => item.name === masterName)),
-      loading: true,
+  useEffect(() => {
+    if (!mastersLength) {
+      history.push(Pages.home)
+      return
     }
+    setTitle('Redis Sentinel Primary Groups Added')
 
-    const updatedItems = items.map((item) =>
-      item.name === masterName ? instance : item,
-    )
+    setIsInvalid(true)
+    setItems(masters)
+    dispatch(resetLoadedSentinel(LoadedSentinel.MastersAdded))
+  }, [mastersLength])
 
-    const pikedInstance = [
-      pick(instance, 'alias', 'name', 'username', 'password', 'db'),
-    ]
+  const handleAddInstance = useCallback(
+    (masterName: string) => {
+      const instance: ModifiedSentinelMaster = {
+        ...removeEmpty(items.find((item) => item.name === masterName)),
+        loading: true,
+      }
 
-    dispatch(updateMastersSentinel(updatedItems))
-    dispatch(createMastersSentinelAction(pikedInstance))
-  }
+      const updatedItems = items.map((item) =>
+        item.name === masterName ? instance : item,
+      )
 
-  const handleChangedInput = (name: string, value: string) => {
-    const [field, id] = name.split('-')
+      const pikedInstance = [
+        pick(instance, 'alias', 'name', 'username', 'password', 'db'),
+      ]
 
-    setItems((items) =>
-      items.map((item) => {
-        if (item.id !== id) {
-          return item
-        }
+      dispatch(updateMastersSentinel(updatedItems))
+      dispatch(createMastersSentinelAction(pikedInstance))
+    },
+    [items],
+  )
 
-        return { ...item, [field]: value }
-      }),
-    )
-  }
+  const handleChangedInput = useCallback(
+    (name: string, value: string) => {
+      const [field, id] = name.split('-')
 
-  const columns: ColumnDefinition<ModifiedSentinelMaster>[] = [
-    {
-      header: 'Result',
-      id: 'message',
-      accessorKey: 'message',
-      enableSorting: true,
-      size: 110,
-      cell: ({
-        row: {
-          original: { status, message, name, loading = false },
-        },
-      }) => (
-        <div data-testid={`status_${name}_${status}`}>
-          {loading && <Loader />}
-          {!loading && status === AddRedisDatabaseStatus.Success && (
-            <CellText size="S">{message}</CellText>
-          )}
-          {!loading && status !== AddRedisDatabaseStatus.Success && (
-            <RiTooltip position="right" title="Error" content={message}>
-              <ColorText size="S" color="danger" style={{ cursor: 'pointer' }}>
-                Error&nbsp;
-                <RiIcon type="ToastDangerIcon" color="danger600" />
-              </ColorText>
-            </RiTooltip>
-          )}
-        </div>
-      ),
-    },
-    {
-      header: 'Primary Group',
-      id: 'name',
-      accessorKey: 'name',
-      enableSorting: true,
-      size: 175,
-      cell: ({
-        row: {
-          original: { name },
-        },
-      }) => <CellText data-testid={`primary-group_${name}`}>{name}</CellText>,
-    },
-    {
-      header: 'Database Alias*',
-      id: 'alias',
-      accessorKey: 'alias',
-      enableSorting: true,
-      size: 300,
-      cell: ({
-        row: {
-          original: { id, alias, error, loading = false, status },
-        },
-      }) => {
-        if (errorNotAuth(error, status)) {
-          return alias
-        }
-        return (
-          <InputFieldSentinel
-            name={`alias-${id}`}
-            value={alias}
-            placeholder="Database"
-            disabled={loading}
-            className={styles.input}
-            inputType={SentinelInputFieldType.Text}
-            onChangedInput={handleChangedInput}
-            maxLength={500}
-          />
-        )
-      },
-    },
-    {
-      header: 'Address',
-      id: 'host',
-      accessorKey: 'host',
-      enableSorting: true,
-      size: 190,
-      cell: ({
-        row: {
-          original: { host, port },
-        },
-      }) => {
-        const text = `${host}:${port}`
-        return (
-          <CopyTextContainer>
-            <CopyPublicEndpointText className="copyHostPortText">
-              {text}
-            </CopyPublicEndpointText>
-            <RiTooltip
-              position="right"
-              content="Copy"
-              anchorClassName="copyPublicEndpointTooltip"
-            >
-              <CopyBtn
-                aria-label="Copy address"
-                className="copyPublicEndpointBtn"
-                onClick={() => handleCopy(text)}
-                tabIndex={-1}
-              />
-            </RiTooltip>
-          </CopyTextContainer>
-        )
-      },
-    },
-    {
-      header: '# of replicas',
-      id: 'numberOfSlaves',
-      accessorKey: 'numberOfSlaves',
-      enableSorting: true,
-      size: 135,
-    },
-    {
-      header: 'Username',
-      id: 'username',
-      accessorKey: 'username',
-      size: 285,
-      cell: ({
-        row: {
-          original: { username, id, loading = false, error, status },
-        },
-      }) => {
-        if (errorNotAuth(error, status)) {
-          return username || <i>Default</i>
-        }
-        return (
-          <div role="presentation" style={{ position: 'relative' }}>
-            <InputFieldSentinel
-              isText
-              isInvalid={isInvalid}
-              value={username}
-              name={`username-${id}`}
-              className={styles.input}
-              placeholder="Enter Username"
-              disabled={loading}
-              inputType={SentinelInputFieldType.Text}
-              onChangedInput={handleChangedInput}
-            />
-          </div>
-        )
-      },
-    },
-    {
-      header: 'Password',
-      id: 'password',
-      accessorKey: 'password',
-      size: 285,
-      cell: ({
-        row: {
-          original: { password, id, error, loading = false, status },
-        },
-      }) => {
-        if (errorNotAuth(error, status)) {
-          return password ? '************' : <i>not assigned</i>
-        }
-        return (
-          <div role="presentation" style={{ position: 'relative' }}>
-            <InputFieldSentinel
-              isInvalid={isInvalid}
-              value={password}
-              name={`password-${id}`}
-              className={styles.input}
-              placeholder="Enter Password"
-              disabled={loading}
-              inputType={SentinelInputFieldType.Password}
-              onChangedInput={handleChangedInput}
-            />
-          </div>
-        )
-      },
-    },
-    {
-      header: 'Database Index',
-      id: 'db',
-      accessorKey: 'db',
-      size: 170,
-      cell: ({
-        row: {
-          original: { db, id, loading = false, status, error },
-        },
-      }) => {
-        if (status === AddRedisDatabaseStatus.Success) {
-          return db || <i>not assigned</i>
+      setItems((items) => {
+        const item = items.find((item) => item.id === id)
+        // @ts-ignore
+        if (!item || item[field] === value) {
+          return items
         }
-        const isDBInvalid =
-          typeof error === 'object' &&
-          error !== null &&
-          'statusCode' in error &&
-          error.statusCode === ApiStatusCode.BadRequest
-        return (
-          <div role="presentation" style={{ position: 'relative' }}>
-            <InputFieldSentinel
-              min={0}
-              disabled={loading}
-              className={styles.dbInfo}
-              value={`${db}` || '0'}
-              name={`db-${id}`}
-              isInvalid={isDBInvalid}
-              placeholder="Enter Index"
-              inputType={SentinelInputFieldType.Number}
-              onChangedInput={handleChangedInput}
-            />
-          </div>
-        )
-      },
+        return items.map((item) => {
+          if (item.id !== id) {
+            return item
+          }
+
+          return { ...item, [field]: value }
+        })
+      })
     },
-  ]
-
-  if (countSuccessAdded !== items.length) {
-    const columnActions: ColumnDefinition<ModifiedSentinelMaster> = {
-      header: '',
-      id: 'actions',
-      accessorKey: 'actions',
-      size: 200,
-      cell: ({
-        row: {
-          original: { name, error, alias, loading = false },
-        },
-      }) => {
-        const isDisabled = !alias
-        if (
-          typeof error === 'object' &&
-          error !== null &&
-          'statusCode' in error &&
-          error?.statusCode !== ApiStatusCode.Unauthorized &&
-          !ApiEncryptionErrors.includes(error?.name || '') &&
-          error?.statusCode !== ApiStatusCode.BadRequest
-        ) {
-          return ''
-        }
-        return (
-          <div role="presentation">
-            <RiTooltip
-              position="top"
-              anchorClassName="euiToolTip__btn-disabled"
-              title={isDisabled ? validationErrors.REQUIRED_TITLE(1) : null}
-              content={isDisabled ? <span>Database Alias</span> : null}
-            >
-              <PrimaryButton
-                size="s"
-                disabled={isDisabled}
-                loading={loading}
-                onClick={() => handleAddInstance(name)}
-                icon={isDisabled ? InfoIcon : undefined}
-              >
-                Add Primary Group
-              </PrimaryButton>
-            </RiTooltip>
-          </div>
-        )
-      },
-    }
+    [setItems],
+  )
 
-    columns.splice(1, 0, columnActions)
-  }
+  const columns: ColumnDef<ModifiedSentinelMaster>[] = useMemo(() => {
+    return colFactory(
+      handleChangedInput,
+      handleAddInstance,
+      isInvalid,
+      countSuccessAdded,
+      items.length,
+    )
+  }, [
+    countSuccessAdded,
+    isInvalid,
+    items.length,
+    handleAddInstance,
+    handleChangedInput,
+  ])
 
   return {
     columns,
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.spec.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.spec.tsx
index 1b612ad41c..4cd9683d52 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.spec.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.spec.tsx
@@ -1,10 +1,6 @@
 import React from 'react'
-import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
-
-import { Table } from 'uiSrc/components/base/layout/table'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import SentinelDatabasesPage from './SentinelDatabasesPage'
-import SentinelDatabases from './components'
-import { Props as SentinelDatabasesProps } from './components/SentinelDatabases/SentinelDatabases'
 
 jest.mock('uiSrc/slices/instances/sentinel', () => ({
   sentinelSelector: jest.fn().mockReturnValue({
@@ -25,63 +21,32 @@ jest.mock('uiSrc/slices/instances/sentinel', () => ({
   resetDataSentinel: jest.fn,
 }))
 
-jest.mock('./components', () => ({
-  __esModule: true,
-  namedExport: jest.fn(),
-  default: jest.fn(),
-}))
-
-const mockSentinelDatabases = (props: SentinelDatabasesProps) => (
-  <div>
-    <button
-      type="button"
-      onClick={() => props.onClose()}
-      data-testid="close-btn"
-    >
-      onClose
-    </button>
-    <button type="button" onClick={() => props.onBack()} data-testid="back-btn">
-      onBack
-    </button>
-    <button
-      type="button"
-      onClick={() => props.onSubmit([])}
-      data-testid="submit-btn"
-    >
-      onSubmit
-    </button>
-    <Table columns={props.columns} data={props.masters} />
-  </div>
-)
-
 /**
  * SentinelDatabasesPage tests
  *
  * @group component
  */
 describe('SentinelDatabasesPage', () => {
-  beforeAll(() => {
-    SentinelDatabases.mockImplementation(mockSentinelDatabases)
-  })
   it('should render', () => {
     expect(render(<SentinelDatabasesPage />)).toBeTruthy()
   })
 
-  it('should call onClose', () => {
+  it('should call onClose', async () => {
     const component = render(<SentinelDatabasesPage />)
-    fireEvent.click(screen.getByTestId('close-btn'))
+    fireEvent.click(screen.getByTestId('btn-cancel'))
+    fireEvent.click(screen.getByTestId('btn-cancel-proceed'))
     expect(component).toBeTruthy()
   })
 
   it('should call onBack', () => {
     const component = render(<SentinelDatabasesPage />)
-    fireEvent.click(screen.getByTestId('back-btn'))
+    fireEvent.click(screen.getByTestId('btn-back-adding'))
     expect(component).toBeTruthy()
   })
 
   it('should call onSubmit', () => {
     const component = render(<SentinelDatabasesPage />)
-    fireEvent.click(screen.getByTestId('submit-btn'))
+    fireEvent.click(screen.getByTestId('btn-add-primary-group'))
     expect(component).toBeTruthy()
   })
 
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx
index 556820a980..2bf040830c 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/SentinelDatabasesPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import SentinelDatabases from './components'
 import { useSentinelDatabasesConfig } from './useSentinelDatabasesConfig'
+import SentinelDatabases from './components/SentinelDatabases/SentinelDatabases'
 
 const SentinelDatabasesPage = () => {
   const {
@@ -9,17 +9,20 @@ const SentinelDatabasesPage = () => {
     selection,
     items,
     handleClose,
-    handleBackAdditing,
+    handleBackAdding,
     handleAddInstances,
+    handleSelectionChange,
   } = useSentinelDatabasesConfig()
+
   return (
     <SentinelDatabases
       columns={columns}
       selection={selection}
       masters={items}
       onClose={handleClose}
-      onBack={handleBackAdditing}
+      onBack={handleBackAdding}
       onSubmit={handleAddInstances}
+      onSelectionChange={handleSelectionChange}
     />
   )
 }
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.spec.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.spec.tsx
index 4ea6f37ebe..83254387e6 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.spec.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.spec.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import { cleanup, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
-import { ColumnDefinition } from 'uiSrc/components/base/layout/table'
+import { ColumnDef } from 'uiSrc/components/base/layout/table'
 import SentinelDatabases, { Props } from './SentinelDatabases'
 
 const mockedProps = mock<Props>()
 
 let mastersMock: ModifiedSentinelMaster[]
-let columnsMock: ColumnDefinition<ModifiedSentinelMaster>[]
+let columnsMock: ColumnDef<ModifiedSentinelMaster>[]
 
 beforeEach(() => {
   cleanup()
@@ -26,7 +26,7 @@ beforeEach(() => {
     {
       name: 'mymaster',
       host: 'localhost',
-      port: 6379,
+      port: '6379',
       alias: 'alias',
       numberOfSlaves: 0,
     },
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx
new file mode 100644
index 0000000000..41c79be34e
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx
@@ -0,0 +1,144 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { action } from 'storybook/actions'
+import { expect, fn, screen } from 'storybook/test'
+
+import SentinelDatabases from './SentinelDatabases'
+import {
+  AddRedisDatabaseStatus,
+  ModifiedSentinelMaster,
+} from 'uiSrc/slices/interfaces'
+import { RowSelectionState } from '@redis-ui/table'
+import { colFactory, getRowId } from '../../useSentinelDatabasesConfig'
+
+const meta: Meta<typeof SentinelDatabases> = {
+  component: SentinelDatabases,
+  args: {
+    onBack: fn(),
+    onClose: fn(),
+    onSubmit: fn(),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SentinelDatabases>
+
+let mastersMock: ModifiedSentinelMaster[] = [
+  {
+    name: 'mymaster',
+    status: AddRedisDatabaseStatus.Fail,
+    message: '',
+    host: '192.168.0.19',
+    port: '6379',
+    numberOfSlaves: 0,
+    // nodes: [],
+    id: '1',
+    alias: 'mymaster',
+    username: '',
+    password: '',
+    db: 1,
+  },
+  {
+    name: 'mymaster2',
+    status: AddRedisDatabaseStatus.Success,
+    message: '',
+    host: '192.168.0.18',
+    port: '6380',
+    numberOfSlaves: 0,
+    // nodes: [],
+    id: '2',
+    alias: 'mymaster2',
+    username: '',
+    password: '',
+    db: 1,
+  },
+  {
+    name: 'mymaster3',
+    status: AddRedisDatabaseStatus.Fail,
+    message: '',
+    host: '192.168.0.18',
+    port: '6380',
+    numberOfSlaves: 0,
+    alias: 'mymaster3',
+    username: 'default',
+    password: 'abcde',
+    db: 1,
+  },
+]
+let columnsMock = colFactory(mastersMock, () => {})
+
+const DefaultRender = () => {
+  const [rowSelection, setSelection] = useState<RowSelectionState>({})
+  const selection = Object.keys(rowSelection)
+    .map((key) => mastersMock.find((master) => getRowId(master) === key))
+    .filter((item): item is ModifiedSentinelMaster => Boolean(item))
+  return (
+    <SentinelDatabases
+      selection={selection || []}
+      columns={columnsMock}
+      masters={mastersMock}
+      onClose={meta.args?.onClose!}
+      onBack={meta.args?.onBack!}
+      onSubmit={meta.args?.onSubmit!}
+      onSelectionChange={(sel) => {
+        setSelection(sel)
+      }}
+    />
+  )
+}
+
+export const Default: Story = {
+  render: () => <DefaultRender />,
+  play: async ({ canvas, userEvent, args, step }) => {
+    await step('Ensure render', async () => {
+      await expect(canvas.getByTestId('row-selection')).toBeInTheDocument()
+      await expect(canvas.getByText('mymaster')).toBeInTheDocument()
+      await expect(canvas.getByText('mymaster2')).toBeInTheDocument()
+      await expect(
+        canvas.getByText('Auto-Discover Redis Sentinel Primary Groups'),
+      ).toBeInTheDocument()
+      await expect(canvas.getByText('Add databases')).toBeInTheDocument()
+    })
+    // you can group interactions with `step`
+    await step('Ensure cancel is called', async () => {
+      await userEvent.click(canvas.getByRole('button', { name: 'Cancel' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Proceed' }))
+      await expect(args.onClose).toHaveBeenCalled()
+    })
+    // or you can just call actions sequentially
+    // await userEvent.click(canvas.getByRole('button', { name: 'Cancel' }))
+    // await userEvent.click(screen.getByRole('button', { name: 'Proceed' }))
+    // await expect(args.onClose).toHaveBeenCalled()
+    await step('Back to add databases screen is called', async () => {
+      await userEvent.click(
+        canvas.getByRole('button', { name: 'Add databases' }),
+      )
+      await expect(args.onBack).toHaveBeenCalled()
+    })
+    await step('Primary group selection', async () => {
+      await userEvent.click(canvas.getByTestId('row-selection-1'))
+      await userEvent.click(
+        // name can be exact matching string or regex
+        canvas.getByRole('button', { name: /add primary group/i }),
+      )
+      await expect(args.onSubmit).toHaveBeenCalled()
+    })
+  },
+}
+const emptyColumnsMock = colFactory([], () => {})
+export const Empty: Story = {
+  args: {
+    selection: [],
+    columns: emptyColumnsMock,
+    masters: [],
+    onClose: action('onClose'),
+    onBack: action('onBack'),
+    onSubmit: action('onSubmit'),
+    onSelectionChange: action('on selection change'),
+  },
+  play: async ({ canvas }) => {
+    await expect(
+      canvas.getByText('Your Redis Sentinel has no primary groups available'),
+    ).toBeInTheDocument()
+  },
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx
index 6ae08a8e64..d7e1872b3f 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx
@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react'
-import cx from 'classnames'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
@@ -7,32 +6,37 @@ import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import validationErrors from 'uiSrc/constants/validationErrors'
 import { AutodiscoveryPageTemplate } from 'uiSrc/templates'
 
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import {
   DestructiveButton,
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { InfoIcon } from 'uiSrc/components/base/icons'
-import { SearchInput } from 'uiSrc/components/base/inputs'
+import { RiIcon } from 'uiSrc/components/base/icons'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
-import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table'
 import {
+  ColumnDef,
+  RowSelectionState,
+  Table,
+} from 'uiSrc/components/base/layout/table'
+import {
+  DatabaseContainer,
   DatabaseWrapper,
   Footer,
-  PageSubTitle,
-  PageTitle,
-  SearchContainer,
-  SearchForm,
 } from 'uiSrc/components/auto-discover'
 
+import { Spacer } from 'uiSrc/components/base/layout'
+import { Header } from 'uiSrc/components/auto-discover/Header'
+import { getRowId } from '../../useSentinelDatabasesConfig'
+
 import styles from '../../../styles.module.scss'
 
 export interface Props {
-  columns: ColumnDefinition<ModifiedSentinelMaster>[]
+  columns: ColumnDef<ModifiedSentinelMaster>[]
   masters: ModifiedSentinelMaster[]
   selection: ModifiedSentinelMaster[]
+  onSelectionChange: (state: RowSelectionState) => void
   onClose: () => void
   onBack: () => void
   onSubmit: (databases: ModifiedSentinelMaster[]) => void
@@ -48,6 +52,7 @@ const notFoundMsg = 'Not found.'
 
 const SentinelDatabases = ({
   columns,
+  onSelectionChange,
   onClose,
   onBack,
   onSubmit,
@@ -55,6 +60,7 @@ const SentinelDatabases = ({
   selection,
 }: Props) => {
   const [items, setItems] = useState<ModifiedSentinelMaster[]>(masters)
+
   const [message, setMessage] = useState(loadingMsg)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
@@ -86,7 +92,7 @@ const SentinelDatabases = ({
     if (!masters.length) {
       setMessage(notMastersMsg)
     }
-  }, [masters])
+  }, [masters.length])
 
   const onQueryChange = (term: string) => {
     const value = term?.toLowerCase()
@@ -117,7 +123,6 @@ const SentinelDatabases = ({
       button={
         <SecondaryButton
           onClick={showPopover}
-          color="secondary"
           className="btn-cancel"
           data-testid="btn-cancel"
         >
@@ -143,8 +148,8 @@ const SentinelDatabases = ({
   )
 
   const SubmitButton = ({ onClick }: { onClick: () => void }) => {
-    let title = null
-    let content = null
+    let title: string | null = null
+    let content: string | null = null
     const emptyAliases = selection.filter(({ alias }) => !alias)
 
     if (selection.length < 1) {
@@ -156,58 +161,51 @@ const SentinelDatabases = ({
       title = validationErrors.REQUIRED_TITLE(emptyAliases.length)
       content = 'Database Alias'
     }
+    const TooltipIcon = () => (
+      <RiTooltip position="top" title={title} content={<span>{content}</span>}>
+        <RiIcon type="InfoIcon" />
+      </RiTooltip>
+    )
 
     return (
-      <RiTooltip
-        position="top"
-        anchorClassName="euiToolTip__btn-disabled"
-        title={title}
-        content={isSubmitDisabled() ? <span>{content}</span> : null}
+      <PrimaryButton
+        type="submit"
+        onClick={onClick}
+        disabled={isSubmitDisabled()}
+        loading={loading}
+        icon={isSubmitDisabled() ? TooltipIcon : undefined}
+        data-testid="btn-add-primary-group"
       >
-        <PrimaryButton
-          type="submit"
-          onClick={onClick}
-          disabled={isSubmitDisabled()}
-          loading={loading}
-          icon={isSubmitDisabled() ? InfoIcon : undefined}
-          data-testid="btn-add-primary-group"
-        >
-          Add Primary Group
-        </PrimaryButton>
-      </RiTooltip>
+        Add Primary Group
+      </PrimaryButton>
     )
   }
 
   return (
     <AutodiscoveryPageTemplate>
-      <div className="databaseContainer">
-        <PageTitle data-testid="title">
-          Auto-Discover Redis Sentinel Primary Groups
-        </PageTitle>
-
-        <Row justify="between" align="center">
-          <FlexItem grow>
-            <PageSubTitle>
-              Redis Sentinel instance found. <br />
-              Here is a list of primary groups your Sentinel instance is
-              managing. Select the primary group(s) you want to add:
-            </PageSubTitle>
-          </FlexItem>
-          <SearchContainer>
-            <SearchForm>
-              <SearchInput
-                placeholder="Search..."
-                onChange={onQueryChange}
-                aria-label="Search"
-                data-testid="search"
-              />
-            </SearchForm>
-          </SearchContainer>
-        </Row>
-        <br />
-
+      <DatabaseContainer justify="start">
+        <Header
+          title="Auto-Discover Redis Sentinel Primary Groups"
+          onBack={onBack}
+          onQueryChange={onQueryChange}
+          subTitle={
+            masters.length > 0 && (
+              <>
+                Redis Sentinel instance found. <br />
+                Here is a list of primary groups your Sentinel instance is
+                managing. Select the primary group(s) you want to add:
+              </>
+            )
+          }
+        />
+        <Spacer size="m" />
         <DatabaseWrapper>
           <Table
+            rowSelectionMode="multiple"
+            // rowSelection={rowSelection}
+            onRowSelectionChange={onSelectionChange}
+            getRowCanSelect={(row) => getRowId(row.original) !== ''}
+            getRowId={getRowId}
             columns={columns}
             data={items}
             defaultSorting={[
@@ -216,31 +214,24 @@ const SentinelDatabases = ({
                 desc: false,
               },
             ]}
+            stripedRows
+            emptyState={() => (
+              <Col centered full>
+                <FlexItem padding={13}>
+                  <Text size="L">{message}</Text>
+                </FlexItem>
+              </Col>
+            )}
           />
-          {!items.length && (
-            <Text size="S" color="subdued">
-              {message}
-            </Text>
-          )}
           {!masters.length && (
-            <Text size="S" className={styles.notFoundMsg} color="subdued">
-              {notMastersMsg}
-            </Text>
+            <Col centered full>
+              <Text size="L">{notMastersMsg}</Text>
+            </Col>
           )}
         </DatabaseWrapper>
-      </div>
-      <Footer padding={4} grow>
-        <Row
-          justify="between"
-          className={cx(styles.footer, 'footerAddDatabase')}
-        >
-          <SecondaryButton
-            onClick={onBack}
-            className="btn-cancel btn-back"
-            data-testid="btn-back-to-adding"
-          >
-            Back to adding databases
-          </SecondaryButton>
+      </DatabaseContainer>
+      <Footer>
+        <Row justify="end">
           <Row gap="m" grow={false}>
             <CancelButton isPopoverOpen={isPopoverOpen} />
             <SubmitButton onClick={handleSubmit} />
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/AddressColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/AddressColumn.tsx
new file mode 100644
index 0000000000..40f96aefce
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/AddressColumn.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import {
+  CopyTextContainer,
+  CopyPublicEndpointText,
+  CopyBtn,
+} from 'uiSrc/components/auto-discover'
+import { RiTooltip } from 'uiSrc/components'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+const handleCopy = (text = '') => {
+  return navigator.clipboard.writeText(text)
+}
+
+export const AddressColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Address',
+    id: 'host',
+    accessorKey: 'host',
+    enableSorting: true,
+    cell: ({
+      row: {
+        original: { host, port },
+      },
+    }) => {
+      const text = `${host}:${port}`
+      return (
+        <CopyTextContainer>
+          <CopyPublicEndpointText>{text}</CopyPublicEndpointText>
+          <RiTooltip
+            position="right"
+            content="Copy"
+            anchorClassName="copyPublicEndpointTooltip"
+          >
+            <CopyBtn
+              aria-label="Copy public endpoint"
+              onClick={() => handleCopy(text)}
+              tabIndex={-1}
+            />
+          </RiTooltip>
+        </CopyTextContainer>
+      )
+    },
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/AliasColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/AliasColumn.tsx
new file mode 100644
index 0000000000..d99cfd257e
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/AliasColumn.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const AliasColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Database Alias*',
+    id: 'alias',
+    accessorKey: 'alias',
+    enableSorting: true,
+    size: 200,
+    cell: ({
+      row: {
+        original: { id, alias, name },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          name={`alias-${id}`}
+          value={alias || name}
+          placeholder="Enter Database Alias"
+          inputType={SentinelInputFieldType.Text}
+          onChangedInput={handleChangedInput}
+          maxLength={500}
+        />
+      </div>
+    ),
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/DbIndexColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/DbIndexColumn.tsx
new file mode 100644
index 0000000000..815bc98376
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/DbIndexColumn.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { InputFieldSentinel, RiTooltip } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+import { RiIcon } from 'uiSrc/components/base/icons'
+
+export const DbIndexColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Database Index',
+    id: 'db',
+    accessorKey: 'db',
+    size: 140,
+    cell: ({
+      row: {
+        original: { db = 0, id },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          min={0}
+          value={`${db}` || '0'}
+          name={`db-${id}`}
+          placeholder="Enter Index"
+          inputType={SentinelInputFieldType.Number}
+          onChangedInput={handleChangedInput}
+          append={
+            <RiTooltip
+              anchorClassName="inputAppendIcon"
+              position="left"
+              content="Select the Redis logical database to work with in Browser and Workbench."
+            >
+              <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+            </RiTooltip>
+          }
+        />
+      </div>
+    ),
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/NumberOfReplicasColumn.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/NumberOfReplicasColumn.ts
new file mode 100644
index 0000000000..cab6858056
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/NumberOfReplicasColumn.ts
@@ -0,0 +1,12 @@
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const NumberOfReplicasColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: '# of replicas',
+    id: 'numberOfSlaves',
+    accessorKey: 'numberOfSlaves',
+    enableSorting: true,
+    size: 120,
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/PasswordColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/PasswordColumn.tsx
new file mode 100644
index 0000000000..8c9514c83c
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/PasswordColumn.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const PasswordColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Password',
+    id: 'password',
+    accessorKey: 'password',
+    cell: ({
+      row: {
+        original: { password, id },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          value={password}
+          name={`password-${id}`}
+          placeholder="Enter Password"
+          inputType={SentinelInputFieldType.Password}
+          onChangedInput={handleChangedInput}
+        />
+      </div>
+    ),
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/PrimaryGroupColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/PrimaryGroupColumn.tsx
new file mode 100644
index 0000000000..6a589c8e6e
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/PrimaryGroupColumn.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { CellText } from 'uiSrc/components/auto-discover'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const PrimaryGroupColumn = (): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Primary Group',
+    id: 'name',
+    accessorKey: 'name',
+    enableSorting: true,
+    size: 200,
+    cell: ({
+      row: {
+        original: { name },
+      },
+    }) => <CellText data-testid={`primary-group_${name}`}>{name}</CellText>,
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/SelectionColumn.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/SelectionColumn.ts
new file mode 100644
index 0000000000..8d18cf02f0
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/SelectionColumn.ts
@@ -0,0 +1,6 @@
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+import { getSelectionColumn } from 'uiSrc/pages/autodiscover-cloud/utils'
+
+export const SelectionColumn = () => {
+  return getSelectionColumn<ModifiedSentinelMaster>()
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/UsernameColumn.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/UsernameColumn.tsx
new file mode 100644
index 0000000000..ea00a18d04
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/UsernameColumn.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { InputFieldSentinel } from 'uiSrc/components'
+import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
+import { type ColumnDef } from 'uiSrc/components/base/layout/table'
+import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
+
+export const UsernameColumn = (
+  handleChangedInput: (name: string, value: string) => void,
+): ColumnDef<ModifiedSentinelMaster> => {
+  return {
+    header: 'Username',
+    id: 'username',
+    accessorKey: 'username',
+    cell: ({
+      row: {
+        original: { username, id },
+      },
+    }) => (
+      <div role="presentation">
+        <InputFieldSentinel
+          value={username}
+          name={`username-${id}`}
+          placeholder="Enter Username"
+          inputType={SentinelInputFieldType.Text}
+          onChangedInput={handleChangedInput}
+        />
+      </div>
+    ),
+  }
+}
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts
new file mode 100644
index 0000000000..2268197763
--- /dev/null
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/column-definitions/index.ts
@@ -0,0 +1,8 @@
+export * from './PrimaryGroupColumn'
+export * from './AliasColumn'
+export * from './AddressColumn'
+export * from './NumberOfReplicasColumn'
+export * from './UsernameColumn'
+export * from './PasswordColumn'
+export * from './DbIndexColumn'
+export * from './SelectionColumn'
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/index.ts b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/index.ts
index 7024c6b365..26467902ba 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/index.ts
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/index.ts
@@ -1,3 +1,5 @@
-import SentinelDatabases from './SentinelDatabases/SentinelDatabases'
+import SentinelDatabases from './SentinelDatabases'
+
+export { SentinelDatabases }
 
 export default SentinelDatabases
diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx
index 3a5d69e247..c0be6759e6 100644
--- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx
+++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
 import { map, pick } from 'lodash'
+import { useHistory } from 'react-router-dom'
 
 import { LoadedSentinel, ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import {
@@ -15,285 +15,159 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Pages } from 'uiSrc/constants'
 import { setTitle } from 'uiSrc/utils'
 import { CreateSentinelDatabaseDto } from 'apiSrc/modules/redis-sentinel/dto/create.sentinel.database.dto'
-import { getSelectionColumn } from 'uiSrc/pages/autodiscover-cloud/utils'
-import { InputFieldSentinel, RiTooltip } from 'uiSrc/components'
-import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
 import {
-  CopyBtn,
-  CopyPublicEndpointText,
-  CopyTextContainer,
-} from 'uiSrc/components/auto-discover'
-import { ColumnDefinition } from 'uiSrc/components/base/layout/table'
-import { RiIcon } from 'uiSrc/components/base/icons'
+  ColumnDef,
+  RowSelectionState,
+} from 'uiSrc/components/base/layout/table'
+import {
+  PrimaryGroupColumn,
+  AliasColumn,
+  AddressColumn,
+  NumberOfReplicasColumn,
+  UsernameColumn,
+  PasswordColumn,
+  DbIndexColumn,
+  SelectionColumn,
+} from './components/column-definitions'
+
+const updateSelection = (
+  selected: ModifiedSentinelMaster[],
+  masters: ModifiedSentinelMaster[],
+) => {
+  return selected.map(
+    (select) =>
+      masters.find((master) => getRowId(master) === getRowId(select)) ?? select,
+  )
+}
+
+const sendCancelEvent = () => {
+  sendEventTelemetry({
+    event:
+      TelemetryEvent.CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_CANCELLED,
+  })
+}
+export const colFactory = (
+  items: ModifiedSentinelMaster[],
+  handleChangedInput: (name: string, value: string) => void,
+) => {
+  const cols: ColumnDef<ModifiedSentinelMaster>[] = [
+    PrimaryGroupColumn(),
+    AliasColumn(handleChangedInput),
+    AddressColumn(),
+    NumberOfReplicasColumn(),
+    UsernameColumn(handleChangedInput),
+    PasswordColumn(handleChangedInput),
+    DbIndexColumn(handleChangedInput),
+  ]
+  if (items.length > 0) {
+    cols.unshift(SelectionColumn())
+  }
+  return cols
+}
 
-import styles from '../styles.module.scss'
+export const getRowId = (row: ModifiedSentinelMaster) => row.id || ''
 
 export const useSentinelDatabasesConfig = () => {
   const [items, setItems] = useState<ModifiedSentinelMaster[]>([])
 
   const { data: masters } = useSelector(sentinelSelector)
 
+  const [selection, setSelection] = useState<ModifiedSentinelMaster[]>([])
   const dispatch = useDispatch()
   const history = useHistory()
-  const [selection, setSelection] = useState<ModifiedSentinelMaster[]>([])
-  const updateSelection = (
-    selected: ModifiedSentinelMaster[],
-    masters: ModifiedSentinelMaster[],
-  ) => {
-    return selected.map(
-      (select) => masters.find((master) => master.id === select.id) ?? select,
-    )
-  }
-  const onSelectionChange = (selected: ModifiedSentinelMaster) =>
-    setSelection((previous) => {
-      const isSelected = previous.some((item) => item.id === selected.id)
-      if (isSelected) {
-        return previous.filter((item) => item.id !== selected.id)
-      }
-      return [...previous, selected]
-    })
-
   useEffect(() => {
     if (masters.length) {
       setItems(masters)
       setSelection((prevState) => updateSelection(prevState, masters))
     }
-  }, [masters])
-
-  setTitle('Auto-Discover Redis Sentinel Primary Groups')
-
-  const sendCancelEvent = () => {
-    sendEventTelemetry({
-      event:
-        TelemetryEvent.CONFIG_DATABASES_REDIS_SENTINEL_AUTODISCOVERY_CANCELLED,
-    })
-  }
+  }, [masters.length])
 
-  const handleClose = () => {
+  useEffect(() => setTitle('Auto-Discover Redis Sentinel Primary Groups'), [])
+  const handleClose = useCallback(() => {
     sendCancelEvent()
     dispatch(resetDataSentinel())
     history.push(Pages.home)
-  }
+  }, [dispatch, history])
 
-  const handleBackAdditing = () => {
+  const handleBackAdding = useCallback(() => {
     sendCancelEvent()
     dispatch(resetLoadedSentinel(LoadedSentinel.Masters))
     history.push(Pages.home)
-  }
-
-  const handleAddInstances = (databases: ModifiedSentinelMaster[]) => {
-    const pikedDatabases = map(databases, (i) => {
-      const database: CreateSentinelDatabaseDto = {
-        name: i.name,
-        alias: i.alias || i.name,
-      }
-      if (i.username) {
-        database.username = i.username
-      }
-      if (i.password) {
-        database.password = i.password
-      }
-      if (i.db) {
-        database.db = i.db
-      }
-      return pick(database, 'alias', 'name', 'username', 'password', 'db')
-    })
-
-    dispatch(updateMastersSentinel(databases))
-    dispatch(
-      createMastersSentinelAction(pikedDatabases, () =>
-        history.push(Pages.sentinelDatabasesResult),
-      ),
-    )
-  }
-
-  const handleCopy = (text = '') => {
-    navigator.clipboard.writeText(text)
-  }
-
-  const handleChangedInput = (name: string, value: string) => {
-    const [field, id] = name.split('-')
-
-    setItems((items) =>
-      items.map((item) => {
-        if (item.id !== id) {
-          return item
+  }, [dispatch, history])
+
+  const handleSelectionChange = useCallback(
+    (currentSelected: RowSelectionState) => {
+      const newSelection = items.filter((item) => {
+        const id = getRowId(item)
+        if (!id) {
+          return false
         }
-
-        return { ...item, [field]: value }
-      }),
-    )
-  }
-
-  const columns: ColumnDefinition<ModifiedSentinelMaster>[] = [
-    getSelectionColumn({
-      setSelection,
-      onSelectionChange,
-    }),
-    {
-      header: 'Primary Group',
-      id: 'name',
-      accessorKey: 'name',
-      enableSorting: true,
-      size: 211,
-      cell: ({
-        row: {
-          original: { name },
-        },
-      }) => <span data-testid={`primary-group_${name}`}>{name}</span>,
-    },
-    {
-      header: 'Database Alias*',
-      id: 'alias',
-      accessorKey: 'alias',
-      enableSorting: true,
-      size: 285,
-      cell: function InstanceAliasCell({
-        row: {
-          original: { id, alias, name },
-        },
-      }) {
-        return (
-          <div role="presentation">
-            <InputFieldSentinel
-              name={`alias-${id}`}
-              value={alias || name}
-              className={styles.input}
-              placeholder="Enter Database Alias"
-              inputType={SentinelInputFieldType.Text}
-              onChangedInput={handleChangedInput}
-              maxLength={500}
-            />
-          </div>
-        )
-      },
-    },
-    {
-      header: 'Address',
-      id: 'host',
-      accessorKey: 'host',
-      enableSorting: true,
-      size: 210,
-      cell: ({
-        row: {
-          original: { host, port },
-        },
-      }) => {
-        const text = `${host}:${port}`
-        return (
-          <CopyTextContainer>
-            <CopyPublicEndpointText>{text}</CopyPublicEndpointText>
-            <RiTooltip
-              position="right"
-              content="Copy"
-              anchorClassName="copyPublicEndpointTooltip"
-            >
-              <CopyBtn
-                aria-label="Copy public endpoint"
-                onClick={() => handleCopy(text)}
-                tabIndex={-1}
-              />
-            </RiTooltip>
-          </CopyTextContainer>
-        )
-      },
+        return currentSelected[id]
+      })
+      setSelection(newSelection)
     },
-    {
-      header: '# of replicas',
-      id: 'numberOfSlaves',
-      accessorKey: 'numberOfSlaves',
-      enableSorting: true,
-      size: 130,
-    },
-    {
-      header: 'Username',
-      id: 'username',
-      accessorKey: 'username',
-      size: 285,
-      cell: function UsernameCell({
-        row: {
-          original: { username, id },
-        },
-      }) {
-        return (
-          <div role="presentation">
-            <InputFieldSentinel
-              value={username}
-              name={`username-${id}`}
-              className={styles.input}
-              placeholder="Enter Username"
-              inputType={SentinelInputFieldType.Text}
-              onChangedInput={handleChangedInput}
-            />
-          </div>
-        )
-      },
-    },
-    {
-      header: 'Password',
-      id: 'password',
-      accessorKey: 'password',
-      size: 285,
-      cell: function PasswordCell({
-        row: {
-          original: { password, id },
-        },
-      }) {
-        return (
-          <div role="presentation">
-            <InputFieldSentinel
-              value={password}
-              name={`password-${id}`}
-              className={styles.input}
-              placeholder="Enter Password"
-              inputType={SentinelInputFieldType.Password}
-              onChangedInput={handleChangedInput}
-            />
-          </div>
-        )
-      },
+    [items],
+  )
+
+  const handleAddInstances = useCallback(
+    (databases: ModifiedSentinelMaster[]) => {
+      const pikedDatabases = map(databases, (i) => {
+        const database: CreateSentinelDatabaseDto = {
+          name: i.name,
+          alias: i.alias || i.name,
+        }
+        if (i.username) {
+          database.username = i.username
+        }
+        if (i.password) {
+          database.password = i.password
+        }
+        if (i.db) {
+          database.db = i.db
+        }
+        return pick(database, 'alias', 'name', 'username', 'password', 'db')
+      })
+
+      dispatch(updateMastersSentinel(databases))
+      dispatch(
+        createMastersSentinelAction(pikedDatabases, () =>
+          history.push(Pages.sentinelDatabasesResult),
+        ),
+      )
     },
-    {
-      header: 'Database Index',
-      id: 'db',
-      accessorKey: 'db',
-      size: 200,
-      cell: function IndexCell({
-        row: {
-          original: { db = 0, id },
-        },
-      }) {
-        return (
-          <div role="presentation">
-            <InputFieldSentinel
-              min={0}
-              className={styles.dbInfo}
-              value={`${db}` || '0'}
-              name={`db-${id}`}
-              placeholder="Enter Index"
-              inputType={SentinelInputFieldType.Number}
-              onChangedInput={handleChangedInput}
-              append={
-                <RiTooltip
-                  anchorClassName="inputAppendIcon"
-                  position="left"
-                  content="Select the Redis logical database to work with in Browser and Workbench."
-                >
-                  <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
-                </RiTooltip>
-              }
-            />
-          </div>
-        )
-      },
+    [dispatch, history],
+  )
+
+  const handleChangedInput = useCallback(
+    (name: string, value: string) => {
+      const [field, id] = name.split('-')
+
+      setItems((items) =>
+        items.map((item) => {
+          const itemId = getRowId(item)
+          if (itemId !== id) {
+            return item
+          }
+
+          return { ...item, [field]: value }
+        }),
+      )
     },
-  ]
+    [setItems],
+  )
+
+  const columns: ColumnDef<ModifiedSentinelMaster>[] = useMemo(
+    () => colFactory(items, handleChangedInput),
+    [handleChangedInput, items.length],
+  )
+
   return {
     columns,
     selection,
     items,
     handleClose,
-    handleBackAdditing,
+    handleBackAdding,
     handleAddInstances,
+    handleSelectionChange,
   }
 }
diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteSummaryButton/BulkDeleteSummaryButton.spec.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteSummaryButton/BulkDeleteSummaryButton.spec.tsx
index b62efe4866..6ec0d7ff55 100644
--- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteSummaryButton/BulkDeleteSummaryButton.spec.tsx
+++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteSummaryButton/BulkDeleteSummaryButton.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
 import BulkDeleteSummaryButton from './BulkDeleteSummaryButton'
+import { render, screen } from 'uiSrc/utils/test-utils'
 
 const readBlobContent = async (blob: Blob): Promise<string> => {
   return blob.text()
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx
index 9a60503e4d..fcf69e9769 100644
--- a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx
+++ b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
-import { AxiosError } from 'axios'
 import {
   rdiPipelineSelector,
   setChangedFile,
@@ -25,7 +24,10 @@ import {
   TelemetryEvent,
 } from 'uiSrc/telemetry'
 import { FileChangeType } from 'uiSrc/slices/interfaces'
-import { addErrorNotification } from 'uiSrc/slices/app/notifications'
+import {
+  addErrorNotification,
+  type IAddInstanceErrorPayload,
+} from 'uiSrc/slices/app/notifications'
 import Config from './Config'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -90,7 +92,7 @@ describe('Config', () => {
 
     render(<Config />)
 
-    expect(sendPageViewTelemetry).toBeCalledWith({
+    expect(sendPageViewTelemetry).toHaveBeenCalledWith({
       name: TelemetryPageView.RDI_CONFIG,
       eventData: {
         rdiInstanceId: 'rdiInstanceId',
@@ -215,7 +217,7 @@ describe('Config', () => {
             ),
           },
         },
-      } as AxiosError),
+      } as IAddInstanceErrorPayload),
     ]
 
     expect(store.getActions().slice(0, expectedActions.length)).toEqual(
@@ -248,8 +250,8 @@ describe('Config', () => {
     const { getByTestId } = render(<Config />)
 
     // check is btn has loader
-    const child = getByTestId('rdi-test-connection-btn').children[0].children[0]
-    expect(child.tagName.toLowerCase()).toEqual('svg')
+    const child = getByTestId('rdi-test-connection-btn')
+    expect(child.querySelector('svg')).toBeTruthy()
   })
 
   it('should render loader on btn', () => {
@@ -263,8 +265,8 @@ describe('Config', () => {
     const { getByTestId } = render(<Config />)
 
     // check is btn has loader
-    const child = getByTestId('rdi-test-connection-btn').children[0].children[0]
-    expect(child.tagName.toLowerCase()).toEqual('svg')
+    const child = getByTestId('rdi-test-connection-btn')
+    expect(child.querySelector('svg')).toBeTruthy()
   })
 
   it('should send telemetry event when clicking Test Connection button', async () => {
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx
index e38095a557..12bc243337 100644
--- a/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx
+++ b/redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx
@@ -31,7 +31,10 @@ import {
 import { appContextPipelineManagement } from 'uiSrc/slices/app/context'
 import { createAxiosError, isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
 
-import { addErrorNotification } from 'uiSrc/slices/app/notifications'
+import {
+  addErrorNotification,
+  type IAddInstanceErrorPayload,
+} from 'uiSrc/slices/app/notifications'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Text, Title } from 'uiSrc/components/base/text'
 
@@ -89,7 +92,7 @@ const Config = () => {
         addErrorNotification(
           createAxiosError({
             message: rdiErrorMessages.invalidStructure('config', msg),
-          }),
+          }) as IAddInstanceErrorPayload,
         ),
       )
     })
diff --git a/redisinsight/ui/src/slices/app/notifications.ts b/redisinsight/ui/src/slices/app/notifications.ts
index e7d37457ad..46c0245130 100644
--- a/redisinsight/ui/src/slices/app/notifications.ts
+++ b/redisinsight/ui/src/slices/app/notifications.ts
@@ -39,6 +39,7 @@ export interface IAddInstanceErrorPayload extends AxiosError {
   instanceId?: string
   response?: AxiosError['response'] & {
     data: {
+      message?: string | JSX.Element
       title?: string
       additionalInfo?: Record<string, any>
     }
diff --git a/redisinsight/ui/src/slices/instances/sentinel.ts b/redisinsight/ui/src/slices/instances/sentinel.ts
index 696cdade58..d42fe4f761 100644
--- a/redisinsight/ui/src/slices/instances/sentinel.ts
+++ b/redisinsight/ui/src/slices/instances/sentinel.ts
@@ -25,6 +25,7 @@ import {
 } from '../interfaces'
 import { AppDispatch, RootState } from '../store'
 import { addErrorNotification } from '../app/notifications'
+import type { ActionStatus } from 'src/common/models'
 
 export const initialState: InitialStateSentinel = {
   loading: false,
@@ -39,7 +40,7 @@ export const initialState: InitialStateSentinel = {
 
 export const initialStateSentinelStatus: CreateSentinelDatabaseResponse = {
   name: '',
-  status: AddRedisDatabaseStatus.Success,
+  status: AddRedisDatabaseStatus.Success as unknown as ActionStatus,
   message: '',
 }
 
diff --git a/redisinsight/ui/src/templates/autodiscovery-page-template/AutodiscoveryPageTemplate.tsx b/redisinsight/ui/src/templates/autodiscovery-page-template/AutodiscoveryPageTemplate.tsx
index 425af2dc84..9f2bd78117 100644
--- a/redisinsight/ui/src/templates/autodiscovery-page-template/AutodiscoveryPageTemplate.tsx
+++ b/redisinsight/ui/src/templates/autodiscovery-page-template/AutodiscoveryPageTemplate.tsx
@@ -15,7 +15,7 @@ const AutodiscoveryPageTemplate = (props: Props) => {
   const { children } = props
   return (
     <>
-      <PageHeader title="Redis databases" showInsights />
+      <PageHeader showInsights />
       <Spacer size="s" />
       <ExplorePanelTemplate panelClassName={styles.explorePanel}>
         <Page className={styles.page}>
diff --git a/redisinsight/ui/src/templates/explore-panel/ExplorePanelTemplate.tsx b/redisinsight/ui/src/templates/explore-panel/ExplorePanelTemplate.tsx
index cbaf8d386a..c0da683cfc 100644
--- a/redisinsight/ui/src/templates/explore-panel/ExplorePanelTemplate.tsx
+++ b/redisinsight/ui/src/templates/explore-panel/ExplorePanelTemplate.tsx
@@ -15,7 +15,6 @@ export interface Props {
 const ExplorePanelTemplate = (props: Props) => {
   const { children, panelClassName } = props
   const { openedPanel } = useSelector(sidePanelsSelector)
-
   return (
     <Row full className={styles.mainWrapper}>
       <Col className={cx(styles.mainPanel, { insightsOpen: !!openedPanel })}>
diff --git a/stories/Start.mdx b/stories/Start.mdx
index 5aebb1f32d..b9b43bf73f 100644
--- a/stories/Start.mdx
+++ b/stories/Start.mdx
@@ -8,3 +8,14 @@ import { Meta } from "@storybook/addon-docs/blocks";
 Redis Insight is a visual tool that provides capabilities to design, develop, and optimize your Redis application.
 
 Query, analyse and interact with your Redis data. [Download it here](https://redis.io/insight/#insight-form)!
+
+### Storybook
+
+#### [Play function](https://storybook.js.org/docs/writing-stories/play-function)
+Besides development in isolation, Storybook also provides a way to test interactions and user flows.
+
+#### [Interaction testing](https://storybook.js.org/docs/writing-tests/interaction-testing)
+Every story you write can be render tested. A render test is a simple version of an interaction test that only tests the ability of a component to render successfully in a given state.
+
+#### [Accessibility testing](https://storybook.js.org/docs/writing-tests/accessibility-testing)
+Storybook provides a way to test accessibility of our components.