diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts b/redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts
new file mode 100644
index 0000000000..c5faa1ebae
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.styles.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+import { Group } from 'uiSrc/components/base/layout/list'
+
+export const DbInfoGroup = styled(Group)`
+  background-color: ${({ theme }) =>
+    theme.semantic.color.background.neutral200};
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral400};
+  padding: ${({ theme }) => theme.core.space.space100};
+  border-radius: 5px;
+`
diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
index a576bbc269..8108da3262 100644
--- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
@@ -2,21 +2,21 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import { capitalize } from 'lodash'
 
-import { ColorText, Text } from 'uiSrc/components/base/text'
+import { Text } from 'uiSrc/components/base/text'
 import { DatabaseListModules, RiTooltip } from 'uiSrc/components'
 import { BuildType } from 'uiSrc/constants/env'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { Nullable } from 'uiSrc/utils'
-import {
-  Group as ListGroup,
-  Item as ListGroupItem,
-} from 'uiSrc/components/base/layout/list'
+import { Item as ListGroupItem } from 'uiSrc/components/base/layout/list'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { Endpoint } from 'apiSrc/common/models'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import styles from '../styles.module.scss'
+import { DbInfoGroup } from './DbInfo.styles'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { DbInfoLabelValue } from './types'
 
 export interface Props {
   connectionType?: ConnectionType
@@ -29,6 +29,59 @@ export interface Props {
   isFromCloud: boolean
 }
 
+export const ListGroupItemLabelValue = ({
+  label,
+  value,
+  dataTestId,
+  additionalContent,
+}: {
+  label: string
+  value: string | React.ReactNode
+  dataTestId?: string
+  additionalContent?: React.ReactNode
+}) => (
+  <ListGroupItem
+    label={
+      <Row align="center" gap="m">
+        <Text color="secondary">{label}</Text>
+        <Text color="primary" data-testid={dataTestId}>
+          {value}
+        </Text>
+        {additionalContent}
+      </Row>
+    }
+  />
+)
+
+const AppendEndpoints = ({
+  nodes,
+  host,
+  port,
+}: {
+  nodes: Endpoint[]
+  host: string
+  port: string
+}) => (
+  <RiTooltip
+    title="Host:port"
+    position="left"
+    anchorClassName={styles.anchorEndpoints}
+    content={
+      <ul className={styles.endpointsList}>
+        {nodes?.map(({ host: eHost, port: ePort }) => (
+          <li key={host + port}>
+            <Text>
+              {eHost}:{ePort};
+            </Text>
+          </li>
+        ))}
+      </ul>
+    }
+  >
+    <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+  </RiTooltip>
+)
+
 const DbInfo = (props: Props) => {
   const {
     connectionType,
@@ -43,121 +96,61 @@ const DbInfo = (props: Props) => {
 
   const { server } = useSelector(appInfoSelector)
 
-  const AppendEndpoints = () => (
-    <RiTooltip
-      title="Host:port"
-      position="left"
-      anchorClassName={styles.anchorEndpoints}
-      content={
-        <ul className={styles.endpointsList}>
-          {nodes?.map(({ host: eHost, port: ePort }) => (
-            <li key={host + port}>
-              <Text>
-                {eHost}:{ePort};
-              </Text>
-            </li>
-          ))}
-        </ul>
-      }
-    >
-      <RiIcon
-        type="InfoIcon"
-        color="informative400"
-        title=""
-        style={{ cursor: 'pointer' }}
-      />
-    </RiTooltip>
-  )
+  const dbInfo: DbInfoLabelValue[] = [
+    {
+      label: 'Connection Type:',
+      value: capitalize(connectionType),
+      dataTestId: 'connection-type',
+      hide: isFromCloud,
+    },
+    {
+      label: 'Database Name from Provider:',
+      value: nameFromProvider,
+      dataTestId: 'db-name-from-provider',
+      hide: !nameFromProvider,
+    },
+    {
+      label: 'Host:',
+      value: host,
+      dataTestId: 'db-info-host',
+      additionalContent: !!nodes?.length && (
+        <AppendEndpoints nodes={nodes} host={host} port={port} />
+      ),
+    },
+    {
+      label: 'Port:',
+      value: port,
+      dataTestId: 'db-info-port',
+      hide: (server?.buildType !== BuildType.RedisStack) && !isFromCloud,
+    },
+    {
+      label: 'Database Index:',
+      value: db?.toString(),
+      dataTestId: 'db-index',
+      hide: !db,
+    },
+    {
+      label: 'Capabilities:',
+      value: <DatabaseListModules modules={modules} />,
+      dataTestId: 'capabilities',
+      hide: !modules?.length,
+    },
+  ]
 
   return (
-    <ListGroup className={styles.dbInfoGroup} flush>
-      {!isFromCloud && (
-        <ListGroupItem
-          label={
-            <Text color="default" size="s">
-              Connection Type:
-              <ColorText
-                color="default"
-                className={styles.dbInfoListValue}
-                data-testid="connection-type"
-              >
-                {capitalize(connectionType)}
-              </ColorText>
-            </Text>
-          }
-        />
-      )}
-
-      {nameFromProvider && (
-        <ListGroupItem
-          label={
-            <Text color="default" size="s">
-              Database Name from Provider:
-              <ColorText color="default" className={styles.dbInfoListValue}>
-                {nameFromProvider}
-              </ColorText>
-            </Text>
-          }
-        />
-      )}
-      <ListGroupItem
-        label={
-          <>
-            {!!nodes?.length && <AppendEndpoints />}
-            <Text color="default" size="s">
-              Host:
-              <ColorText
-                color="default"
-                className={styles.dbInfoListValue}
-                data-testid="db-info-host"
-              >
-                {host}
-              </ColorText>
-            </Text>
-          </>
-        }
-      />
-      {(server?.buildType === BuildType.RedisStack || isFromCloud) && (
-        <ListGroupItem
-          label={
-            <Text color="default" size="s">
-              Port:
-              <ColorText
-                color="default"
-                className={styles.dbInfoListValue}
-                data-testid="db-info-port"
-              >
-                {port}
-              </ColorText>
-            </Text>
-          }
-        />
-      )}
-
-      {!!db && (
-        <ListGroupItem
-          label={
-            <Text color="default" size="s">
-              Database Index:
-              <ColorText color="default" className={styles.dbInfoListValue}>
-                {db}
-              </ColorText>
-            </Text>
-          }
-        />
-      )}
-
-      {!!modules?.length && (
-        <ListGroupItem
-          label={
-            <Text color="default" size="s">
-              Capabilities:
-              <DatabaseListModules modules={modules} />
-            </Text>
-          }
-        />
-      )}
-    </ListGroup>
+    <DbInfoGroup flush maxWidth={false}>
+      {dbInfo
+        .filter((item) => !item.hide)
+        .map((item) => (
+          <ListGroupItemLabelValue
+            key={item.label}
+            label={item.label}
+            value={item.value}
+            dataTestId={item.dataTestId}
+            additionalContent={item.additionalContent}
+          />
+        ))}
+    </DbInfoGroup>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts
new file mode 100644
index 0000000000..81808f2459
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+
+export const StyledCopyButton = styled(IconButton)`
+  margin-bottom: 3px;
+  opacity: 0;
+
+  :hover {
+    opacity: 1;
+  }
+`
diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx
index 1d24ae8c2b..38ca470179 100644
--- a/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/sentinel/DbInfoSentinel.tsx
@@ -3,15 +3,15 @@ import { capitalize } from 'lodash'
 
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { Nullable } from 'uiSrc/utils'
-import { ColorText, Text } from 'uiSrc/components/base/text'
-import {
-  Group as ListGroup,
-  Item as ListGroupItem,
-} from 'uiSrc/components/base/layout/list'
 import { SentinelMaster } from 'apiSrc/modules/redis-sentinel/models/sentinel-master'
-import SentinelHostPort from './SentinelHostPort'
 
-import styles from '../../styles.module.scss'
+import { RiTooltip } from 'uiSrc/components/base/tooltip'
+import { CopyIcon } from 'uiSrc/components/base/icons'
+
+import { DbInfoGroup } from '../DbInfo.styles'
+import { ListGroupItemLabelValue } from '../DbInfo'
+import { StyledCopyButton } from './DbInfoSentinel.styles'
+import { DbInfoLabelValue } from '../types'
 
 export interface Props {
   host?: string
@@ -21,49 +21,70 @@ export interface Props {
   sentinelMaster?: SentinelMaster
 }
 
+const handleCopy = (text = '') => {
+  navigator.clipboard.writeText(text)
+}
+
+const CopyButtonTooltip = ({
+  host,
+  port,
+}: {
+  host?: string
+  port?: string
+}) => (
+  <RiTooltip position="right" content="Copy">
+    <StyledCopyButton
+      icon={CopyIcon}
+      aria-label="Copy host:port"
+      onClick={() => handleCopy(`${host}:${port}`)}
+    />
+  </RiTooltip>
+)
+
 const DbInfoSentinel = (props: Props) => {
   const { connectionType, nameFromProvider, sentinelMaster, host, port } = props
-  return (
-    <ListGroup className={styles.dbInfoGroup} flush>
-      <ListGroupItem
-        label={
-          <Text color="subdued" size="s">
-            Connection Type:
-            <ColorText color="default" className={styles.dbInfoListValue}>
-              {capitalize(connectionType)}
-            </ColorText>
-          </Text>
-        }
-      />
 
-      {sentinelMaster?.name && (
-        <ListGroupItem
-          label={
-            <Text color="subdued" size="s">
-              Primary Group Name:
-              <ColorText color="default" className={styles.dbInfoListValue}>
-                {sentinelMaster?.name}
-              </ColorText>
-            </Text>
-          }
-        />
-      )}
+  const dbInfo: DbInfoLabelValue[] = [
+    {
+      label: 'Connection Type:',
+      value: capitalize(connectionType),
+      dataTestId: 'connection-type',
+    },
+    {
+      label: 'Primary Group Name:',
+      value: sentinelMaster?.name,
+      dataTestId: 'primary-group-name',
+      hide: !sentinelMaster?.name,
+    },
+    {
+      label: 'Database Name from Provider:',
+      value: nameFromProvider,
+      dataTestId: 'db-name-from-provider',
+      hide: !nameFromProvider,
+    },
+    {
+      label: 'Sentinel Host & Port:',
+      value: `${host}:${port}`,
+      dataTestId: 'host-and-port',
+      additionalContent: <CopyButtonTooltip host={host} port={port} />,
+      hide: !host || !port,
+    },
+  ]
 
-      {nameFromProvider && (
-        <ListGroupItem
-          label={
-            <Text color="subdued" size="s">
-              Database Name from Provider:
-              <ColorText color="default" className={styles.dbInfoListValue}>
-                {nameFromProvider}
-              </ColorText>
-            </Text>
-          }
-        />
-      )}
-
-      {host && port && <SentinelHostPort host={host} port={port} />}
-    </ListGroup>
+  return (
+    <DbInfoGroup flush maxWidth={false}>
+      {dbInfo
+        .filter((item) => !item.hide)
+        .map((item) => (
+          <ListGroupItemLabelValue
+            key={item.label}
+            label={item.label}
+            value={item.value}
+            dataTestId={item.dataTestId}
+            additionalContent={item.additionalContent}
+          />
+        ))}
+    </DbInfoGroup>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx
deleted file mode 100644
index 436fc5b086..0000000000
--- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelHostPort.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-
-import { RiTooltip } from 'uiSrc/components'
-import { ColorText, Text } from 'uiSrc/components/base/text'
-import { IconButton } from 'uiSrc/components/base/forms/buttons'
-import { CopyIcon } from 'uiSrc/components/base/icons'
-import styles from '../../styles.module.scss'
-
-export interface Props {
-  host: string
-  port: string
-}
-
-const SentinelHostPort = (props: Props) => {
-  const { host, port } = props
-
-  const handleCopy = (text = '') => {
-    navigator.clipboard.writeText(text)
-  }
-
-  return (
-    <Text color="subdued" className={styles.sentinelCollapsedField}>
-      Sentinel Host & Port:
-      <div className={styles.hostPort}>
-        <ColorText>{`${host}:${port}`}</ColorText>
-        <RiTooltip
-          position="right"
-          content="Copy"
-          anchorClassName="copyHostPortTooltip"
-        >
-          <IconButton
-            icon={CopyIcon}
-            aria-label="Copy host:port"
-            className={styles.copyHostPortBtn}
-            onClick={() => handleCopy(`${host}:${port}`)}
-          />
-        </RiTooltip>
-      </div>
-    </Text>
-  )
-}
-
-export default SentinelHostPort
diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts b/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts
index c8557bafd5..9598b57ada 100644
--- a/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts
+++ b/redisinsight/ui/src/pages/home/components/form/sentinel/index.ts
@@ -1,11 +1,5 @@
 import DbInfoSentinel from './DbInfoSentinel'
 import PrimaryGroupSentinel from './PrimaryGroupSentinel'
 import SentinelMasterDatabase from './SentinelMasterDatabase'
-import SentinelHostPort from './SentinelHostPort'
 
-export {
-  DbInfoSentinel,
-  PrimaryGroupSentinel,
-  SentinelMasterDatabase,
-  SentinelHostPort,
-}
+export { DbInfoSentinel, PrimaryGroupSentinel, SentinelMasterDatabase }
diff --git a/redisinsight/ui/src/pages/home/components/form/types.ts b/redisinsight/ui/src/pages/home/components/form/types.ts
new file mode 100644
index 0000000000..b6cb891c33
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/form/types.ts
@@ -0,0 +1,7 @@
+export interface DbInfoLabelValue {
+  label: string
+  value: string | React.ReactNode
+  dataTestId?: string
+  additionalContent?: React.ReactNode
+  hide?: boolean
+}
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx
index 8dde9309fb..096c09ddd4 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx
@@ -3,7 +3,6 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
-import { CopyIcon } from 'uiSrc/components/base/icons'
 
 export interface Props {
   id?: string
@@ -28,8 +27,7 @@ const CloneConnection = (props: Props) => {
       <Row gap="m" justify="end" style={{ flexGrow: 0 }}>
         <FlexItem>
           <SecondaryButton
-            size="small"
-            icon={CopyIcon}
+            size="medium"
             aria-label="Clone database"
             data-testid="clone-db-btn"
             onClick={handleClickClone}
diff --git a/redisinsight/ui/src/pages/home/components/styles.module.scss b/redisinsight/ui/src/pages/home/components/styles.module.scss
index 7c701c1fc5..7d184ca064 100644
--- a/redisinsight/ui/src/pages/home/components/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/styles.module.scss
@@ -22,31 +22,6 @@
   display: inline-block;
 }
 
-.dbInfoGroup {
-  max-width: 100% !important;
-  background-color: var(--euiColorLightestShade) !important;
-  border: 1px solid var(--separatorColor) !important;
-  padding: 10px 18px !important;
-  border-radius: 4px;
-
-  :global {
-    .euiListGroupItem__label {
-      pointer-events: none;
-      word-break: break-word;
-      white-space: initial;
-    }
-
-    .euiListGroupItem {
-      padding: 4px 0;
-      margin-top: 0 !important;
-    }
-  }
-}
-
-.dbInfoListValue {
-  margin-left: 10px;
-}
-
 .anchorEndpoints {
   position: absolute;
   right: 12px;