diff --git a/redisinsight/ui/src/components/base/forms/FormField.tsx b/redisinsight/ui/src/components/base/forms/FormField.tsx
index 5c21b84509..265fd21cd4 100644
--- a/redisinsight/ui/src/components/base/forms/FormField.tsx
+++ b/redisinsight/ui/src/components/base/forms/FormField.tsx
@@ -1,16 +1,24 @@
 import React, { ComponentProps } from 'react'
-import { FormField as RedisFormField, TooltipProvider } from '@redis-ui/components'
+import {
+  FormField as RedisFormField,
+  TooltipProvider,
+  LabelProps,
+} from '@redis-ui/components'
+
+export type RiInfoIconProps = LabelProps['infoIconProps']
 
 export type RedisFormFieldProps = ComponentProps<typeof RedisFormField> & {
-  infoIconProps?: any
+  infoIconProps?: RiInfoIconProps
 }
 
 export function FormField(props: RedisFormFieldProps) {
   // eslint-disable-next-line react/destructuring-assignment
   if (props.infoIconProps) {
-    return <TooltipProvider>
-      <RedisFormField {...props} />
-    </TooltipProvider>
+    return (
+      <TooltipProvider>
+        <RedisFormField {...props} />
+      </TooltipProvider>
+    )
   }
   return <RedisFormField {...props} />
 }
diff --git a/redisinsight/ui/src/components/divider/Divider.spec.tsx b/redisinsight/ui/src/components/divider/Divider.spec.tsx
index 1db4931603..9893551e5e 100644
--- a/redisinsight/ui/src/components/divider/Divider.spec.tsx
+++ b/redisinsight/ui/src/components/divider/Divider.spec.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
-import Divider, { Props } from './Divider'
+import Divider, { DividerProps } from './Divider'
 
-const mockedProps = mock<Props>()
+const mockedProps = mock<DividerProps>()
 
 describe('Divider', () => {
   it('should render', () => {
diff --git a/redisinsight/ui/src/components/divider/Divider.styles.ts b/redisinsight/ui/src/components/divider/Divider.styles.ts
new file mode 100644
index 0000000000..bd905a9e56
--- /dev/null
+++ b/redisinsight/ui/src/components/divider/Divider.styles.ts
@@ -0,0 +1,57 @@
+import { HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+
+export type DividerVariant = 'fullWidth' | 'half'
+export type DividerOrientation = 'horizontal' | 'vertical'
+
+const dividerStyles = {
+  orientation: {
+    horizontal: css`
+      width: 100%;
+      height: 1px;
+    `,
+    vertical: css`
+      width: 1px;
+      height: 100%;
+    `,
+  },
+  variant: {
+    fullWidth: {
+      horizontal: css``,
+      vertical: css``,
+    },
+    half: {
+      horizontal: css`
+        width: 50%;
+      `,
+      vertical: css`
+        height: 50%;
+      `,
+    },
+  },
+}
+
+export interface StyledDividerProps extends HTMLAttributes<HTMLHRElement> {
+  $color?: string
+  $orientation?: DividerOrientation
+  $variant?: DividerVariant
+}
+
+export const StyledDividerWrapper = styled.div<HTMLAttributes<HTMLDivElement>>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const StyledDivider = styled.hr<StyledDividerProps>`
+  border: none;
+  background-color: ${({
+    theme,
+    $color = theme.semantic.color.background.neutral500,
+  }) => $color};
+
+  ${({ $orientation = 'horizontal' }) =>
+    dividerStyles.orientation[$orientation]}
+  ${({ $variant = 'fullWidth', $orientation = 'horizontal' }) =>
+    dividerStyles.variant[$variant][$orientation]}
+`
diff --git a/redisinsight/ui/src/components/divider/Divider.tsx b/redisinsight/ui/src/components/divider/Divider.tsx
index 68129953cd..4c2bc0c67f 100644
--- a/redisinsight/ui/src/components/divider/Divider.tsx
+++ b/redisinsight/ui/src/components/divider/Divider.tsx
@@ -1,42 +1,33 @@
 import React from 'react'
-import cx from 'classnames'
 
-import styles from './styles.module.scss'
+import {
+  StyledDividerWrapper,
+  StyledDivider,
+  DividerVariant,
+  DividerOrientation,
+} from './Divider.styles'
 
-export interface Props {
+export interface DividerProps {
+  orientation?: DividerOrientation
+  variant?: DividerVariant
   color?: string
-  colorVariable?: string
-  orientation?: 'horizontal' | 'vertical'
-  variant?: 'fullWidth' | 'middle' | 'half'
   className?: string
-  style?: any
 }
 
 const Divider = ({
   orientation,
   variant,
-  className,
   color,
-  colorVariable,
+  className,
   ...props
-}: Props) => (
-  <div
-    className={cx(
-      styles.divider,
-      styles[`divider-${variant || 'fullWidth'}`],
-      styles[`divider-${orientation || 'horizontal'}`],
-      className,
-    )}
-    {...props}
-  >
-    <hr
-      style={
-        color || colorVariable
-          ? { backgroundColor: color ?? `var(--${colorVariable})` }
-          : {}
-      }
+}: DividerProps) => (
+  <StyledDividerWrapper {...props}>
+    <StyledDivider
+      $variant={variant}
+      $orientation={orientation}
+      $color={color}
     />
-  </div>
+  </StyledDividerWrapper>
 )
 
 export default Divider
diff --git a/redisinsight/ui/src/components/divider/styles.module.scss b/redisinsight/ui/src/components/divider/styles.module.scss
deleted file mode 100644
index 43e89af5ca..0000000000
--- a/redisinsight/ui/src/components/divider/styles.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  hr {
-    border: none;
-    height: 1px;
-    width: 100%;
-    background-color: var(--tableLightestBorderColor)
-  }
-  &-vertical {
-    height: auto;
-    hr {
-      height: 100%;
-      width: 1px;
-    }
-  }
-
-  &-middle {
-    margin: 6px 12px;
-    &.divider-vertical {
-      margin: 12px 6px;
-    }
-  }
-
-  &-half {
-    hr {
-      width: 50%;
-    }
-    &.divider-vertical {
-      margin: 0 8px;
-      hr {
-        width: 1px;
-        height: 50%;
-      }
-    }
-  }
-}
-
diff --git a/redisinsight/ui/src/components/form-dialog/FormDialog.styles.ts b/redisinsight/ui/src/components/form-dialog/FormDialog.styles.ts
new file mode 100644
index 0000000000..0d1d2f65e2
--- /dev/null
+++ b/redisinsight/ui/src/components/form-dialog/FormDialog.styles.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { Modal } from 'uiSrc/components/base/display/modal'
+
+export const StyledFormDialogContent = styled(Modal.Content.Compose)`
+  width: 900px;
+  height: 700px;
+
+  max-width: calc(100vw - 120px);
+  max-height: calc(100vh - 120px);
+`
+
+export const StyledFormDialogContentBody = styled(Modal.Content.Body)`
+  flex: 1;
+  min-height: 0;
+`
diff --git a/redisinsight/ui/src/components/form-dialog/FormDialog.tsx b/redisinsight/ui/src/components/form-dialog/FormDialog.tsx
index b35fa38eb6..186d9c74f6 100644
--- a/redisinsight/ui/src/components/form-dialog/FormDialog.tsx
+++ b/redisinsight/ui/src/components/form-dialog/FormDialog.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
-import cx from 'classnames'
 
 import { Nullable } from 'uiSrc/utils'
 import { CancelIcon } from 'uiSrc/components/base/icons'
 import { Modal } from 'uiSrc/components/base/display'
-import styles from './styles.module.scss'
+import {
+  StyledFormDialogContent,
+  StyledFormDialogContentBody,
+} from './FormDialog.styles'
 
 export interface Props {
   isOpen: boolean
@@ -22,16 +24,16 @@ const FormDialog = (props: Props) => {
 
   return (
     <Modal.Compose open={isOpen}>
-      <Modal.Content.Compose
+      <StyledFormDialogContent
         persistent
-        className={cx(styles.modal, className)}
+        className={className}
         onCancel={onClose}
       >
         <Modal.Content.Close icon={CancelIcon} onClick={onClose} />
         <Modal.Content.Header.Title>{header}</Modal.Content.Header.Title>
-        <Modal.Content.Body content={children} />
+        <StyledFormDialogContentBody content={children} />
         <Modal.Content.Footer.Compose>{footer}</Modal.Content.Footer.Compose>
-      </Modal.Content.Compose>
+      </StyledFormDialogContent>
     </Modal.Compose>
   )
 }
diff --git a/redisinsight/ui/src/components/form-dialog/styles.module.scss b/redisinsight/ui/src/components/form-dialog/styles.module.scss
deleted file mode 100644
index e537de63cc..0000000000
--- a/redisinsight/ui/src/components/form-dialog/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.modal {
-  width: 900px !important;
-  height: 700px !important;
-
-  max-width: calc(100vw - 120px) !important;
-  max-height: calc(100vh - 120px) !important;
-}
diff --git a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx
index f64d5dd810..59ac8bb944 100644
--- a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx
+++ b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx
@@ -124,7 +124,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
           {!!details && (
             <>
               <Spacer size="m" />
-              <Divider variant="fullWidth" />
+              <Divider />
               <Spacer size="m" />
               <Row className={styles.detailsRow} justify="between">
                 <FlexItem>
diff --git a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx
index 6c3ade5519..89b71b963f 100644
--- a/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx
+++ b/redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx
@@ -75,7 +75,7 @@ const BulkActionsInfo = (props: Props) => {
           )}
         </Row>
       </Col>
-      <Divider colorVariable="separatorColor" />
+      <Divider />
       {loading && (
         <BulkActionsProgressLine data-testid="progress-line">
           <div style={{ width: `${(total ? scanned / total : 0) * 100}%` }} />
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx
index 62ed972341..cefa537688 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx
@@ -83,7 +83,6 @@ const HashDetails = (props: Props) => {
           />
           <Divider
             className={styles.divider}
-            colorVariable="separatorColor"
             orientation="vertical"
           />
         </>
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx
index 4751db41d6..1a365c65d5 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx
@@ -26,7 +26,6 @@ export const KeyDetailsSubheader = ({ keyType, Actions }: Props) => (
                 </FlexItem>
                 <Divider
                   className={styles.divider}
-                  colorVariable="separatorColor"
                   orientation="vertical"
                 />
               </>
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx
index 870e458749..6b2b6d1fb3 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx
@@ -1,54 +1,28 @@
 import React from 'react'
-import styled from 'styled-components'
 
-import { FormField } from 'uiSrc/components/base/forms/FormField'
+import {
+  FormField,
+  RiInfoIconProps,
+} from 'uiSrc/components/base/forms/FormField'
 import { TextArea } from 'uiSrc/components/base/inputs'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { RiTooltip } from 'uiSrc/components'
-import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
-
-const PointerIcon = styled(RiIcon)`
-  cursor: pointer;
-`
+import { HostInfoTooltipContent } from '../../../host-info-tooltip-content/HostInfoTooltipContent'
 
 export interface Props {
   value: string
   onChange: (e: React.ChangeEvent<any>) => void
 }
 
+const connectionUrlInfo: RiInfoIconProps = {
+  content: HostInfoTooltipContent({ includeAutofillInfo: false }),
+  placement: 'right',
+  maxWidth: '100%',
+}
+
 const ConnectionUrl = ({ value, onChange }: Props) => (
   <FormField
-    label={
-      <FlexGroup gap="s" align="center">
-        <Text>Connection URL</Text>
-        <RiTooltip
-          title="The following connection URLs are supported:"
-          className="homePage_tooltip"
-          position="right"
-          content={
-            <ul className="homePage_toolTipUl">
-              <li>
-                <span className="dot" />
-                redis://[[username]:[password]]@host:port
-              </li>
-              <li>
-                <span className="dot" />
-                rediss://[[username]:[password]]@host:port
-              </li>
-              <li>
-                <span className="dot" />
-                host:port
-              </li>
-            </ul>
-          }
-        >
-          <FlexItem>
-            <PointerIcon type="InfoIcon" />
-          </FlexItem>
-        </RiTooltip>
-      </FlexGroup>
-    }
+    label={<Text>Connection URL</Text>}
+    infoIconProps={connectionUrlInfo}
   >
     <TextArea
       name="connectionURL"
diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx
index 3fea46099c..96e6d8eade 100644
--- a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx
@@ -17,10 +17,17 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
-import { FormField } from 'uiSrc/components/base/forms/FormField'
-import { NumericInput, PasswordInput, TextInput } from 'uiSrc/components/base/inputs'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import {
+  FormField,
+  RiInfoIconProps,
+} from 'uiSrc/components/base/forms/FormField'
+import {
+  NumericInput,
+  PasswordInput,
+  TextInput,
+} from 'uiSrc/components/base/inputs'
 import { RiTooltip } from 'uiSrc/components'
+import { HostInfoTooltipContent } from '../../host-info-tooltip-content/HostInfoTooltipContent'
 
 export interface Props {
   host: string
@@ -54,6 +61,12 @@ const fieldDisplayNames: Values = {
   password: 'Admin Password',
 }
 
+const hostInfo: RiInfoIconProps = {
+  content: HostInfoTooltipContent({ includeAutofillInfo: true }),
+  placement: 'right',
+  maxWidth: '100%',
+}
+
 const ClusterConnectionForm = (props: Props) => {
   const {
     host,
@@ -120,42 +133,6 @@ const ClusterConnectionForm = (props: Props) => {
     }
   }
 
-  const AppendHostName = () => (
-    <RiTooltip
-      title={
-        <div>
-          <p>
-            <b>Pasting a connection URL auto fills the database details.</b>
-          </p>
-          <p style={{ margin: 0, paddingTop: '10px' }}>
-            The following connection URLs are supported:
-          </p>
-        </div>
-      }
-      className="homePage_tooltip"
-      anchorClassName="inputAppendIcon"
-      position="right"
-      content={
-        <ul className="homePage_toolTipUl">
-          <li>
-            <span className="dot" />
-            redis://[[username]:[password]]@host:port
-          </li>
-          <li>
-            <span className="dot" />
-            rediss://[[username]:[password]]@host:port
-          </li>
-          <li>
-            <span className="dot" />
-            host:port
-          </li>
-        </ul>
-      }
-    >
-      <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
-    </RiTooltip>
-  )
-
   const CancelButton = ({ onClick }: { onClick: () => void }) => (
     <SecondaryButton
       size="s"
@@ -224,10 +201,7 @@ const ClusterConnectionForm = (props: Props) => {
         <WindowEvent event="keydown" handler={onKeyDown} />
         <Row responsive>
           <FlexItem grow={4}>
-            <FormField
-              label="Cluster Host*"
-              additionalText={<AppendHostName />}
-            >
+            <FormField label="Cluster Host" required infoIconProps={hostInfo}>
               <TextInput
                 name="host"
                 id="host"
diff --git a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
index 69235be4c5..04c963a93d 100644
--- a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
+++ b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
@@ -36,7 +36,7 @@ import { ModalHeaderProvider } from 'uiSrc/contexts/ModalTitleProvider'
 import ClusterConnectionFormWrapper from 'uiSrc/pages/home/components/cluster-connection'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
-import { ArrowLeftIcon } from 'uiSrc/components/base/icons'
+import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
 import { FooterDatabaseForm } from 'uiSrc/components/form-dialog/FooterDatabaseForm'
 import { Title } from 'uiSrc/components/base/text'
 
@@ -178,7 +178,7 @@ const DatabasePanelDialog = (props: Props) => {
           <FlexItem>
             <IconButton
               onClick={handleClickBack}
-              icon={ArrowLeftIcon}
+              icon={ChevronLeftIcon}
               aria-label="back"
               data-testid="back-btn"
             />
diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.spec.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.spec.tsx
index 866c8b6388..f1a40824d4 100644
--- a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.spec.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.spec.tsx
@@ -191,9 +191,9 @@ describe('DatabaseForm', () => {
   it('should render with correct field labels', () => {
     renderComponent()
 
-    expect(screen.getByText('Database Alias*')).toBeInTheDocument()
-    expect(screen.getByText('Host*')).toBeInTheDocument()
-    expect(screen.getByText('Port*')).toBeInTheDocument()
+    expect(screen.getByText('Database alias')).toBeInTheDocument()
+    expect(screen.getByText('Host')).toBeInTheDocument()
+    expect(screen.getByText('Port')).toBeInTheDocument()
     expect(screen.getByText('Username')).toBeInTheDocument()
     expect(screen.getByText('Password')).toBeInTheDocument()
     expect(screen.getByText('Timeout (s)')).toBeInTheDocument()
diff --git a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx
index fba512f38f..c175efea5d 100644
--- a/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx
@@ -12,12 +12,18 @@ import {
   selectOnFocus,
   validateField,
 } from 'uiSrc/utils'
-import { RiTooltip } from 'uiSrc/components'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { FormField } from 'uiSrc/components/base/forms/FormField'
-import { NumericInput, PasswordInput, TextInput } from 'uiSrc/components/base/inputs'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import {
+  FormField,
+  RiInfoIconProps,
+} from 'uiSrc/components/base/forms/FormField'
+import {
+  NumericInput,
+  PasswordInput,
+  TextInput,
+} from 'uiSrc/components/base/inputs'
+import { HostInfoTooltipContent } from '../host-info-tooltip-content/HostInfoTooltipContent'
 
 interface IShowFields {
   alias: boolean
@@ -26,6 +32,12 @@ interface IShowFields {
   timeout: boolean
 }
 
+const hostInfo: RiInfoIconProps = {
+  content: HostInfoTooltipContent({ includeAutofillInfo: true }),
+  placement: 'right',
+  maxWidth: '100%',
+}
+
 export interface Props {
   formik: FormikProps<DbConnectionInfo>
   onHostNamePaste: (content: string) => boolean
@@ -45,52 +57,16 @@ const DatabaseForm = (props: Props) => {
 
   const { server } = useSelector(appInfoSelector)
 
-  const AppendHostName = () => (
-    <RiTooltip
-      title={
-        <div>
-          <p>
-            <b>Pasting a connection URL auto fills the database details.</b>
-          </p>
-          <p style={{ margin: 0, paddingTop: '10px' }}>
-            The following connection URLs are supported:
-          </p>
-        </div>
-      }
-      className="homePage_tooltip"
-      anchorClassName="inputAppendIcon"
-      position="right"
-      content={
-        <ul className="homePage_toolTipUl">
-          <li>
-            <span className="dot" />
-            redis://[[username]:[password]]@host:port
-          </li>
-          <li>
-            <span className="dot" />
-            rediss://[[username]:[password]]@host:port
-          </li>
-          <li>
-            <span className="dot" />
-            host:port
-          </li>
-        </ul>
-      }
-    >
-      <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
-    </RiTooltip>
-  )
-
   const isShowPort =
     server?.buildType !== BuildType.RedisStack && showFields.port
   const isFieldDisabled = (name: string) => readyOnlyFields.includes(name)
 
   return (
-    <>
+    <Col gap="l">
       {showFields.alias && (
         <Row gap="m">
           <FlexItem grow>
-            <FormField label="Database Alias*">
+            <FormField label="Database alias" required>
               <TextInput
                 name="name"
                 id="name"
@@ -106,15 +82,11 @@ const DatabaseForm = (props: Props) => {
           </FlexItem>
         </Row>
       )}
-
       {(showFields.host || isShowPort) && (
         <Row gap="m">
           {showFields.host && (
             <FlexItem grow={4}>
-              <FormField
-                label="Host*"
-                additionalText={<AppendHostName />}
-              >
+              <FormField label="Host" required infoIconProps={hostInfo}>
                 <TextInput
                   autoFocus={autoFocus}
                   name="ip"
@@ -124,11 +96,8 @@ const DatabaseForm = (props: Props) => {
                   maxLength={200}
                   placeholder="Enter Hostname / IP address / Connection URL"
                   value={formik.values.host ?? ''}
-                  onChange={value => {
-                    formik.setFieldValue(
-                      'host',
-                      validateField(value.trim()),
-                    )
+                  onChange={(value) => {
+                    formik.setFieldValue('host', validateField(value.trim()))
                   }}
                   onPaste={(event: React.ClipboardEvent<HTMLInputElement>) =>
                     handlePasteHostName(onHostNamePaste, event)
@@ -141,10 +110,7 @@ const DatabaseForm = (props: Props) => {
           )}
           {isShowPort && (
             <FlexItem grow={2}>
-              <FormField
-                label="Port*"
-                additionalText={`Should not exceed ${MAX_PORT_NUMBER}.`}
-              >
+              <FormField label="Port" required>
                 <NumericInput
                   autoValidate
                   name="port"
@@ -228,7 +194,7 @@ const DatabaseForm = (props: Props) => {
           <FlexItem grow />
         </Row>
       )}
-    </>
+    </Col>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx b/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx
index 1062fe8b06..ff4cde5d06 100644
--- a/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DbCompressor.tsx
@@ -5,12 +5,11 @@ import { KeyValueCompressor } from 'uiSrc/constants'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
 import { NONE } from 'uiSrc/pages/home/constants'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
+import { Text } from 'uiSrc/components/base/text/Text'
 import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
-
 export interface Props {
   formik: FormikProps<DbConnectionInfo>
 }
@@ -69,7 +68,7 @@ const DbCompressor = (props: Props) => {
             <Checkbox
               id={id}
               name="showCompressor"
-              label="Enable Automatic Data Decompression"
+              label={<Text>Enable Automatic Data Decompression</Text>}
               checked={!!formik.values.showCompressor}
               onChange={handleChangeDbCompressorCheckbox}
               data-testid="showCompressor"
@@ -79,26 +78,23 @@ const DbCompressor = (props: Props) => {
       </Row>
 
       {formik.values.showCompressor && (
-        <>
-          <Spacer />
-          <Row gap="m">
-            <FlexItem grow>
-              <FormField label="Decompression format">
-                <RiSelect
-                  name="compressor"
-                  placeholder="Decompression format"
-                  value={formik.values.compressor ?? NONE}
-                  options={optionsCompressor}
-                  onChange={(value) => {
-                    formik.setFieldValue('compressor', value || NONE)
-                  }}
-                  data-testid="select-compressor"
-                />
-              </FormField>
-            </FlexItem>
-            <FlexItem grow />
-          </Row>
-        </>
+        <Row gap="m">
+          <FlexItem grow>
+            <FormField label="Decompression format">
+              <RiSelect
+                name="compressor"
+                placeholder="Decompression format"
+                value={formik.values.compressor ?? NONE}
+                options={optionsCompressor}
+                onChange={(value) => {
+                  formik.setFieldValue('compressor', value || NONE)
+                }}
+                data-testid="select-compressor"
+              />
+            </FormField>
+          </FlexItem>
+          <FlexItem grow />
+        </Row>
       )}
     </>
   )
diff --git a/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx b/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx
index 6f577dcf41..4b2904c794 100644
--- a/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx
@@ -38,6 +38,7 @@ const DbIndex = (props: Props) => {
             <Checkbox
               id={id}
               name="showDb"
+              labelSize="M"
               label="Select Logical Database"
               checked={!!formik.values.showDb}
               onChange={handleChangeDbIndexCheckbox}
diff --git a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
index 31a13fc6d4..a576bbc269 100644
--- a/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DbInfo.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { capitalize } from 'lodash'
-import cx from 'classnames'
 
 import { ColorText, Text } from 'uiSrc/components/base/text'
 import { DatabaseListModules, RiTooltip } from 'uiSrc/components'
diff --git a/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx b/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx
index 371673d206..daa0ba22f9 100644
--- a/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/ForceStandalone.tsx
@@ -8,33 +8,29 @@ import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiTooltip } from 'uiSrc/components'
 import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
+import { Text } from 'uiSrc/components/base/text/Text'
 
 export interface Props {
   formik: FormikProps<DbConnectionInfo>
 }
 
 const ForceStandaloneLabel = () => (
-  <>
-    <span>Force Standalone Connection</span>
+  <Row align="center" gap="s">
+    <Text>Force Standalone Connection</Text>
     <RiTooltip
-      className="homePage_tooltip"
       position="right"
       content={
-        <p>
+        <Text>
           Override the default connection logic and connect to the specified
           endpoint as a standalone database.
-        </p>
+        </Text>
       }
     >
-      <RiIcon
-        type="InfoIcon"
-        style={{
-          cursor: 'pointer',
-          marginLeft: '5px',
-        }}
-      />
+      <FlexItem>
+        <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+      </FlexItem>
     </RiTooltip>
-  </>
+  </Row>
 )
 const ForceStandalone = (props: Props) => {
   const { formik } = props
diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
index 3c75278920..94b8910871 100644
--- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
@@ -17,6 +17,8 @@ import {
 } from 'uiSrc/components/base/inputs'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiRadioGroup } from 'uiSrc/components/base/forms/radio-group/RadioGroup'
+import { Spacer } from 'uiSrc/components/base/layout'
+import { Text } from 'uiSrc/components/base/text/Text'
 import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
 
 export interface Props {
@@ -51,168 +53,114 @@ const SSHDetails = (props: Props) => {
         align={!flexGroupClassName ? 'end' : undefined}
       >
         <FlexItem style={{ width: '230px' }} className={flexItemClassName}>
-          <Checkbox
-            id={id}
-            name="ssh"
-            label="Use SSH Tunnel"
-            checked={!!formik.values.ssh}
-            onChange={formik.handleChange}
-            data-testid="use-ssh"
-          />
+          <FormField>
+            <Checkbox
+              id={id}
+              name="ssh"
+              label={<Text>Use SSH Tunnel</Text>}
+              checked={!!formik.values.ssh}
+              onChange={formik.handleChange}
+              data-testid="use-ssh"
+            />
+          </FormField>
         </FlexItem>
       </Row>
 
       {formik.values.ssh && (
-        <Col gap="l">
-          <Row gap="m" responsive className={flexGroupClassName}>
-            <FlexItem grow className={flexItemClassName}>
-              <FormField label="Host*">
-                <TextInput
-                  name="sshHost"
-                  id="sshHost"
-                  data-testid="sshHost"
-                  color="secondary"
-                  maxLength={200}
-                  placeholder="Enter SSH Host"
-                  value={formik.values.sshHost ?? ''}
-                  onChange={value => {
-                    formik.setFieldValue(
-                      'sshHost',
-                      validateField(value.trim()),
-                    )
-                  }}
-                />
-              </FormField>
-            </FlexItem>
-            <FlexItem grow className={flexItemClassName}>
-              <FormField
-                label="Port*"
-                additionalText="Should not exceed 65535."
-              >
-                <NumericInput
-                  autoValidate
-                  min={0}
-                  max={MAX_PORT_NUMBER}
-                  name="sshPort"
-                  id="sshPort"
-                  data-testid="sshPort"
-                  placeholder="Enter SSH Port"
-                  value={Number(formik.values.sshPort)}
-                  onChange={(value) => formik.setFieldValue('sshPort', value)}
-                  onFocus={selectOnFocus}
-                />
-              </FormField>
-            </FlexItem>
-          </Row>
-          <Row responsive className={flexGroupClassName}>
-            <FlexItem grow className={flexItemClassName}>
-              <FormField label="Username*">
-                <TextInput
-                  name="sshUsername"
-                  id="sshUsername"
-                  data-testid="sshUsername"
-                  color="secondary"
-                  maxLength={200}
-                  placeholder="Enter SSH Username"
-                  value={formik.values.sshUsername ?? ''}
-                  onChange={value => {
-                    formik.setFieldValue(
-                      'sshUsername',
-                      validateField(value.trim()),
-                    )
-                  }}
-                />
-              </FormField>
-            </FlexItem>
-          </Row>
-          <Row responsive className={flexGroupClassName}>
-            <FlexItem grow className={flexItemClassName}>
-              <RiRadioGroup
-                id="sshPassType"
-                items={sshPassTypeOptions}
-                layout="horizontal"
-                value={formik.values.sshPassType}
-                onChange={(id) => formik.setFieldValue('sshPassType', id)}
-                data-testid="ssh-pass-type"
-              />
-            </FlexItem>
-          </Row>
-
-          {formik.values.sshPassType === SshPassType.Password && (
+        <>
+          <Spacer size="xs" />
+          <Col gap="m">
+            <Row gap="m" responsive className={flexGroupClassName}>
+              <FlexItem grow className={flexItemClassName}>
+                <FormField label="Host" required>
+                  <TextInput
+                    name="sshHost"
+                    id="sshHost"
+                    data-testid="sshHost"
+                    color="secondary"
+                    maxLength={200}
+                    placeholder="Enter SSH Host"
+                    value={formik.values.sshHost ?? ''}
+                    onChange={(value) => {
+                      formik.setFieldValue(
+                        'sshHost',
+                        validateField(value.trim()),
+                      )
+                    }}
+                  />
+                </FormField>
+              </FlexItem>
+              <FlexItem grow className={flexItemClassName}>
+                <FormField label="Port" required>
+                  <NumericInput
+                    autoValidate
+                    min={0}
+                    max={MAX_PORT_NUMBER}
+                    name="sshPort"
+                    id="sshPort"
+                    data-testid="sshPort"
+                    placeholder="Enter SSH Port"
+                    value={Number(formik.values.sshPort)}
+                    onChange={(value) => formik.setFieldValue('sshPort', value)}
+                    onFocus={selectOnFocus}
+                  />
+                </FormField>
+              </FlexItem>
+            </Row>
             <Row responsive className={flexGroupClassName}>
               <FlexItem grow className={flexItemClassName}>
-                <FormField label="Password">
-                  <PasswordInput
-                    name="sshPassword"
-                    id="sshPassword"
-                    data-testid="sshPassword"
-                    maxLength={10_000}
-                    placeholder="Enter SSH Password"
-                    value={
-                      formik.values.sshPassword === true
-                        ? SECURITY_FIELD
-                        : (formik.values.sshPassword ?? '')
-                    }
-                    onChangeCapture={formik.handleChange}
-                    onFocus={() => {
-                      if (formik.values.sshPassword === true) {
-                        formik.setFieldValue('sshPassword', '')
-                      }
+                <FormField label="Username" required>
+                  <TextInput
+                    name="sshUsername"
+                    id="sshUsername"
+                    data-testid="sshUsername"
+                    color="secondary"
+                    maxLength={200}
+                    placeholder="Enter SSH Username"
+                    value={formik.values.sshUsername ?? ''}
+                    onChange={(value) => {
+                      formik.setFieldValue(
+                        'sshUsername',
+                        validateField(value.trim()),
+                      )
                     }}
-                    autoComplete="new-password"
                   />
                 </FormField>
               </FlexItem>
             </Row>
-          )}
-
-          {formik.values.sshPassType === SshPassType.PrivateKey && (
-            <Col gap="m">
-              <Row responsive className={flexGroupClassName}>
-                <FlexItem grow className={flexItemClassName}>
-                  <FormField label="Private Key*">
-                    <TextArea
-                      name="sshPrivateKey"
-                      id="sshPrivateKey"
-                      data-testid="sshPrivateKey"
-                      maxLength={50_000}
-                      placeholder="Enter SSH Private Key in PEM format"
-                      value={
-                        formik.values.sshPrivateKey === true
-                          ? SECURITY_FIELD
-                          : (formik?.values?.sshPrivateKey?.replace(
-                              /./g,
-                              '•',
-                            ) ?? '')
-                      }
-                      onChangeCapture={formik.handleChange}
-                      onFocus={() => {
-                        if (formik.values.sshPrivateKey === true) {
-                          formik.setFieldValue('sshPrivateKey', '')
-                        }
-                      }}
-                    />
-                  </FormField>
-                </FlexItem>
-              </Row>
+            <Row responsive className={flexGroupClassName}>
+              <FlexItem grow className={flexItemClassName}>
+                <Spacer size="m" />
+                <RiRadioGroup
+                  id="sshPassType"
+                  items={sshPassTypeOptions}
+                  layout="horizontal"
+                  value={formik.values.sshPassType}
+                  onChange={(id) => formik.setFieldValue('sshPassType', id)}
+                  data-testid="ssh-pass-type"
+                />
+                <Spacer size="s" />
+              </FlexItem>
+            </Row>
+            {formik.values.sshPassType === SshPassType.Password && (
               <Row responsive className={flexGroupClassName}>
                 <FlexItem grow className={flexItemClassName}>
-                  <FormField label="Passphrase">
+                  <FormField label="Password">
                     <PasswordInput
-                      name="sshPassphrase"
-                      id="sshPassphrase"
-                      data-testid="sshPassphrase"
-                      maxLength={50_000}
-                      placeholder="Enter Passphrase for Private Key"
+                      name="sshPassword"
+                      id="sshPassword"
+                      data-testid="sshPassword"
+                      maxLength={10_000}
+                      placeholder="Enter SSH Password"
                       value={
-                        formik.values.sshPassphrase === true
+                        formik.values.sshPassword === true
                           ? SECURITY_FIELD
-                          : (formik.values.sshPassphrase ?? '')
+                          : (formik.values.sshPassword ?? '')
                       }
                       onChangeCapture={formik.handleChange}
                       onFocus={() => {
-                        if (formik.values.sshPassphrase === true) {
-                          formik.setFieldValue('sshPassphrase', '')
+                        if (formik.values.sshPassword === true) {
+                          formik.setFieldValue('sshPassword', '')
                         }
                       }}
                       autoComplete="new-password"
@@ -220,9 +168,66 @@ const SSHDetails = (props: Props) => {
                   </FormField>
                 </FlexItem>
               </Row>
-            </Col>
-          )}
-        </Col>
+            )}
+
+            {formik.values.sshPassType === SshPassType.PrivateKey && (
+              <Col gap="l">
+                <Row responsive className={flexGroupClassName}>
+                  <FlexItem grow className={flexItemClassName}>
+                    <FormField label="Private Key" required>
+                      <TextArea
+                        name="sshPrivateKey"
+                        id="sshPrivateKey"
+                        data-testid="sshPrivateKey"
+                        maxLength={50_000}
+                        placeholder="Enter SSH Private Key in PEM format"
+                        value={
+                          formik.values.sshPrivateKey === true
+                            ? SECURITY_FIELD
+                            : (formik?.values?.sshPrivateKey?.replace(
+                                /./g,
+                                '•',
+                              ) ?? '')
+                        }
+                        onChangeCapture={formik.handleChange}
+                        onFocus={() => {
+                          if (formik.values.sshPrivateKey === true) {
+                            formik.setFieldValue('sshPrivateKey', '')
+                          }
+                        }}
+                      />
+                    </FormField>
+                  </FlexItem>
+                </Row>
+                <Row responsive className={flexGroupClassName}>
+                  <FlexItem grow className={flexItemClassName}>
+                    <FormField label="Passphrase">
+                      <PasswordInput
+                        name="sshPassphrase"
+                        id="sshPassphrase"
+                        data-testid="sshPassphrase"
+                        maxLength={50_000}
+                        placeholder="Enter Passphrase for Private Key"
+                        value={
+                          formik.values.sshPassphrase === true
+                            ? SECURITY_FIELD
+                            : (formik.values.sshPassphrase ?? '')
+                        }
+                        onChangeCapture={formik.handleChange}
+                        onFocus={() => {
+                          if (formik.values.sshPassphrase === true) {
+                            formik.setFieldValue('sshPassphrase', '')
+                          }
+                        }}
+                        autoComplete="new-password"
+                      />
+                    </FormField>
+                  </FlexItem>
+                </Row>
+              </Col>
+            )}
+          </Col>
+        </>
       )}
     </Col>
   )
diff --git a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx
index e5cd5e06b6..6296f046a9 100644
--- a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx
@@ -31,6 +31,7 @@ import {
   RiSelectOption,
 } from 'uiSrc/components/base/forms/select/RiSelect'
 import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
+import { Text } from 'uiSrc/components/base/text/Text'
 import styles from '../styles.module.scss'
 
 const suffix = '_tls_details'
@@ -186,15 +187,17 @@ const TlsDetails = (props: Props) => {
   return (
     <>
       <Row gap="m">
-        <FlexItem grow={1}>
-          <Checkbox
-            id={sslId}
-            name="tls"
-            label="Use TLS"
-            checked={!!formik.values.tls}
-            onChange={formik.handleChange}
-            data-testid="tls"
-          />
+        <FlexItem>
+          <FormField>
+            <Checkbox
+              id={sslId}
+              name="tls"
+              label={<Text>Use TLS</Text>}
+              checked={!!formik.values.tls}
+              onChange={formik.handleChange}
+              data-testid="tls"
+            />
+          </FormField>
         </FlexItem>
       </Row>
 
@@ -224,14 +227,14 @@ const TlsDetails = (props: Props) => {
               <Spacer />
               <Row gap="m">
                 <FlexItem grow>
-                  <FormField label="Server Name*">
+                  <FormField label="Server Name" required>
                     <TextInput
                       name="servername"
                       id="servername"
                       maxLength={200}
                       placeholder="Enter Server Name"
                       value={formik.values.servername ?? ''}
-                      onChange={value =>
+                      onChange={(value) =>
                         formik.setFieldValue(
                           'servername',
                           validateField(value.trim()),
@@ -268,9 +271,8 @@ const TlsDetails = (props: Props) => {
           <Row gap="m" responsive>
             <FlexItem>
               <FormField
-                label={`CA Certificate${
-                  formik.values.verifyServerTlsCert ? '*' : ''
-                }`}
+                label="CA Certificate"
+                required={formik.values.verifyServerTlsCert}
               >
                 <RiSelect
                   name="selectedCaCertName"
@@ -292,14 +294,14 @@ const TlsDetails = (props: Props) => {
             {formik.values.tls &&
               formik.values.selectedCaCertName === ADD_NEW_CA_CERT && (
                 <FlexItem grow>
-                  <FormField label="Name*">
+                  <FormField label="Name" required>
                     <TextInput
                       name="newCaCertName"
                       id="newCaCertName"
                       maxLength={200}
                       placeholder="Enter CA Certificate Name"
                       value={formik.values.newCaCertName ?? ''}
-                      onChange={value =>
+                      onChange={(value) =>
                         formik.setFieldValue(
                           'newCaCertName',
                           validateCertName(value),
@@ -314,38 +316,47 @@ const TlsDetails = (props: Props) => {
 
           {formik.values.tls &&
             formik.values.selectedCaCertName === ADD_NEW_CA_CERT && (
-              <Row gap="m" responsive>
-                <FlexItem grow>
-                  <FormField label="Certificate*">
-                    <TextArea
-                      name="newCaCert"
-                      id="newCaCert"
-                      value={formik.values.newCaCert ?? ''}
-                      onChangeCapture={formik.handleChange}
-                      placeholder="Enter CA Certificate"
-                      data-testid="new-ca-cert"
-                    />
-                  </FormField>
-                </FlexItem>
-              </Row>
+              <>
+                <Spacer />
+                <Row gap="m" responsive>
+                  <FlexItem grow>
+                    <FormField label="Certificate" required>
+                      <TextArea
+                        name="newCaCert"
+                        id="newCaCert"
+                        value={formik.values.newCaCert ?? ''}
+                        onChangeCapture={formik.handleChange}
+                        placeholder="Enter CA Certificate"
+                        data-testid="new-ca-cert"
+                      />
+                    </FormField>
+                  </FlexItem>
+                </Row>
+              </>
             )}
         </div>
       )}
       {formik.values.tls && (
-        <Row responsive style={{ margin: '20px 0 20px' }}>
-          <FlexItem grow>
-            <Checkbox
-              id={isTlsAuthId}
-              name="tlsClientAuthRequired"
-              label="Requires TLS Client Authentication"
-              checked={!!formik.values.tlsClientAuthRequired}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                formik.setFieldValue('tlsClientAuthRequired', e.target.checked)
-              }
-              data-testid="tls-required-checkbox"
-            />
-          </FlexItem>
-        </Row>
+        <>
+          <Spacer />
+          <Row responsive>
+            <FlexItem grow>
+              <Checkbox
+                id={isTlsAuthId}
+                name="tlsClientAuthRequired"
+                label="Requires TLS Client Authentication"
+                checked={!!formik.values.tlsClientAuthRequired}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  formik.setFieldValue(
+                    'tlsClientAuthRequired',
+                    e.target.checked,
+                  )
+                }
+                data-testid="tls-required-checkbox"
+              />
+            </FlexItem>
+          </Row>
+        </>
       )}
       {formik.values.tls && formik.values.tlsClientAuthRequired && (
         <div
@@ -354,7 +365,7 @@ const TlsDetails = (props: Props) => {
         >
           <Row gap="m" responsive>
             <FlexItem grow>
-              <FormField label="Client Certificate*">
+              <FormField label="Client Certificate" required>
                 <RiSelect
                   placeholder="Select certificate"
                   value={formik.values.selectedTlsClientCertId}
@@ -372,14 +383,14 @@ const TlsDetails = (props: Props) => {
               formik.values.tlsClientAuthRequired &&
               formik.values.selectedTlsClientCertId === 'ADD_NEW' && (
                 <FlexItem grow>
-                  <FormField label="Name*">
+                  <FormField label="Name" required>
                     <TextInput
                       name="newTlsCertPairName"
                       id="newTlsCertPairName"
                       maxLength={200}
                       placeholder="Enter Client Certificate Name"
                       value={formik.values.newTlsCertPairName ?? ''}
-                      onChange={value =>
+                      onChange={(value) =>
                         formik.setFieldValue(
                           'newTlsCertPairName', // same as the name prop passed a few lines above
                           validateCertName(value),
@@ -396,9 +407,10 @@ const TlsDetails = (props: Props) => {
             formik.values.tlsClientAuthRequired &&
             formik.values.selectedTlsClientCertId === 'ADD_NEW' && (
               <>
+                <Spacer />
                 <Row gap="m" responsive>
                   <FlexItem grow>
-                    <FormField label="Certificate*">
+                    <FormField label="Certificate" required>
                       <TextArea
                         name="newTlsClientCert"
                         id="newTlsClientCert"
@@ -411,10 +423,10 @@ const TlsDetails = (props: Props) => {
                     </FormField>
                   </FlexItem>
                 </Row>
-
+                <Spacer />
                 <Row gap="m" responsive>
                   <FlexItem grow>
-                    <FormField label="Private Key*">
+                    <FormField label="Private Key" required>
                       <TextArea
                         placeholder="Enter Private Key"
                         name="newTlsClientKey"
diff --git a/redisinsight/ui/src/pages/home/components/host-info-tooltip-content/HostInfoTooltipContent.styles.ts b/redisinsight/ui/src/pages/home/components/host-info-tooltip-content/HostInfoTooltipContent.styles.ts
new file mode 100644
index 0000000000..22cec89b6f
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/host-info-tooltip-content/HostInfoTooltipContent.styles.ts
@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+export const StyledUrlList = styled.ul<HTMLAttributes<HTMLUListElement>>`
+  margin-top: ${({ theme }) => theme.core.space.space050};
+  padding-left: ${({ theme }) => theme.core.space.space400};
+`
+
+export const StyledUrlItem = styled.li<HTMLAttributes<HTMLLIElement>>`
+  font-weight: 300;
+  opacity: 0.85;
+  list-style: disc;
+`
diff --git a/redisinsight/ui/src/pages/home/components/host-info-tooltip-content/HostInfoTooltipContent.tsx b/redisinsight/ui/src/pages/home/components/host-info-tooltip-content/HostInfoTooltipContent.tsx
new file mode 100644
index 0000000000..deaa6314fe
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/host-info-tooltip-content/HostInfoTooltipContent.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Text } from 'uiSrc/components/base/text'
+import { StyledUrlItem, StyledUrlList } from './HostInfoTooltipContent.styles'
+
+const supportedUrls = [
+  'redis://[[username]:[password]]@host:port',
+  'rediss://[[username]:[password]]@host:port',
+  'host:port',
+]
+
+export const HostInfoTooltipContent = ({
+  includeAutofillInfo,
+}: {
+  includeAutofillInfo: boolean
+}) => (
+  <>
+    {includeAutofillInfo && (
+      <Text variant="semiBold">
+        Pasting a connection URL auto fills the database details.
+      </Text>
+    )}
+    <Text variant="semiBold">The following connection URLs are supported:</Text>
+    <StyledUrlList>
+      {supportedUrls.map((url) => (
+        <StyledUrlItem key={url}>{url}</StyledUrlItem>
+      ))}
+    </StyledUrlList>
+  </>
+)
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx
index 6ba911808b..700bb76303 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx
@@ -25,7 +25,7 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
-import { ArrowLeftIcon } from 'uiSrc/components/base/icons'
+import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import TabsComponent from 'uiSrc/components/base/layout/tabs'
 import { Title } from 'uiSrc/components/base/text/Title'
@@ -161,7 +161,7 @@ const ManualConnectionForm = (props: Props) => {
           <FlexItem>
             <IconButton
               onClick={handleClickBackClone}
-              icon={ArrowLeftIcon}
+              icon={ChevronLeftIcon}
               aria-label="back"
               data-testid="back-btn"
             />
@@ -179,7 +179,7 @@ const ManualConnectionForm = (props: Props) => {
       return
     }
 
-    setModalHeader(<Title size="L">Connection Settings</Title>, true)
+    setModalHeader(<Title size="L">Connection settings</Title>, true)
   }, [isEditMode, isCloneMode])
 
   useEffect(() => {
@@ -236,7 +236,6 @@ const ManualConnectionForm = (props: Props) => {
     <div
       className={styles.container}
       data-testid="add-db_manual"
-      style={{ height: '100%' }}
     >
       {isEditMode &&
         !isCloneMode &&
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx
index f48ce470f5..8f00b68052 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx
@@ -50,7 +50,7 @@ const FooterActions = (props: Props) => {
       content={getSubmitButtonContent(errors, submitIsDisabled)}
     >
       <PrimaryButton
-        size="small"
+        size="medium"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
@@ -77,7 +77,7 @@ const FooterActions = (props: Props) => {
           content={getSubmitButtonContent(errors, submitIsDisable())}
         >
           <EmptyButton
-            size="small"
+            size="medium"
             className="empty-btn"
             disabled={submitIsDisable()}
             icon={submitIsDisable() ? InfoIcon : undefined}
@@ -94,7 +94,7 @@ const FooterActions = (props: Props) => {
         <Row>
           {onClose && (
             <SecondaryButton
-              size="small"
+              size="medium"
               onClick={onClose}
               className="btn-cancel"
               data-testid="btn-cancel"
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/AddConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/AddConnection.tsx
index 79abfa8212..f18c699f0c 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/AddConnection.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/AddConnection.tsx
@@ -10,8 +10,8 @@ import {
 import Divider from 'uiSrc/components/divider/Divider'
 import { BuildType } from 'uiSrc/constants/env'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
+import { Spacer } from 'uiSrc/components/base/layout'
 import DecompressionAndFormatters from './DecompressionAndFormatters'
-
 import { ManualFormTab } from '../constants'
 
 export interface Props {
@@ -49,17 +49,13 @@ const AddConnection = (props: Props) => {
             onHostNamePaste={onHostNamePaste}
             showFields={{ host: true, alias: true, port: true, timeout: true }}
           />
-          <Divider
-            colorVariable="separatorColor"
-            variant="fullWidth"
-            className="form__divider"
-          />
+          <Spacer size="l" />
+          <Divider />
+          <Spacer size="m" />
           <DbIndex formik={formik} />
-          <Divider
-            colorVariable="separatorColor"
-            variant="fullWidth"
-            className="form__divider"
-          />
+          <Spacer size="m" />
+          <Divider />
+          <Spacer size="m" />
           <ForceStandalone formik={formik} />
         </>
       )}
@@ -72,11 +68,9 @@ const AddConnection = (props: Props) => {
           />
           {buildType !== BuildType.RedisStack && (
             <>
-              <Divider
-                colorVariable="separatorColor"
-                variant="fullWidth"
-                className="form__divider"
-              />
+              <Spacer size="m" />
+              <Divider />
+              <Spacer size="m" />
               <SSHDetails formik={formik} />
             </>
           )}
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/DecompressionAndFormatters.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/DecompressionAndFormatters.tsx
index 008547d623..a6925bbc61 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/DecompressionAndFormatters.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/DecompressionAndFormatters.tsx
@@ -7,6 +7,7 @@ import {
   DbCompressor,
   KeyFormatSelector,
 } from 'uiSrc/pages/home/components/form'
+import { Spacer } from 'uiSrc/components/base/layout'
 
 const DecompressionAndFormatters = ({
   formik,
@@ -15,13 +16,9 @@ const DecompressionAndFormatters = ({
 }) => (
   <>
     <DbCompressor formik={formik} />
-
-    <Divider
-      colorVariable="separatorColor"
-      variant="fullWidth"
-      className="form__divider"
-    />
-
+    <Spacer size="m" />
+    <Divider />
+    <Spacer size="m" />
     <KeyFormatSelector formik={formik} />
   </>
 )
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditConnection.tsx
index 7be1439bdb..7014d90d4d 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditConnection.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditConnection.tsx
@@ -7,6 +7,7 @@ import {
   SSHDetails,
   TlsDetails,
 } from 'uiSrc/pages/home/components/form'
+import { Spacer } from 'uiSrc/components/base/layout'
 import Divider from 'uiSrc/components/divider/Divider'
 import { BuildType } from 'uiSrc/constants/env'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
@@ -61,19 +62,15 @@ const EditConnection = (props: Props) => {
             autoFocus={!isCloneMode && isEditMode}
             onHostNamePaste={onHostNamePaste}
           />
-          <Divider
-            colorVariable="separatorColor"
-            variant="fullWidth"
-            className="form__divider"
-          />
+          <Spacer size="l" />
+          <Divider />
+          <Spacer size="m" />
           <ForceStandalone formik={formik} />
           {isCloneMode && (
             <>
-              <Divider
-                colorVariable="separatorColor"
-                variant="fullWidth"
-                className="form__divider"
-              />
+              <Spacer size="m" />
+              <Divider />
+              <Spacer size="m" />
               <DbIndex formik={formik} />
             </>
           )}
@@ -88,11 +85,9 @@ const EditConnection = (props: Props) => {
           />
           {buildType !== BuildType.RedisStack && (
             <>
-              <Divider
-                colorVariable="separatorColor"
-                variant="fullWidth"
-                className="form__divider"
-              />
+              <Spacer size="m" />
+              <Divider />
+              <Spacer size="m" />
               <SSHDetails formik={formik} />
             </>
           )}
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
index 5f2f9d0422..1de2518cb4 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx
@@ -47,11 +47,7 @@ const EditSentinelConnection = (props: Props) => {
   const GeneralFormClodeMode = (
     <>
       <PrimaryGroupSentinel formik={formik} />
-      <Divider
-        colorVariable="separatorColor"
-        variant="fullWidth"
-        className="form__divider"
-      />
+      <Divider />
       <Title size="XS">Database</Title>
       <Spacer size="s" />
       <SentinelMasterDatabase
@@ -59,11 +55,7 @@ const EditSentinelConnection = (props: Props) => {
         db={db}
         isCloneMode={isCloneMode}
       />
-      <Divider
-        colorVariable="separatorColor"
-        variant="fullWidth"
-        className="form__divider"
-      />
+      <Divider />
       <Title size="XS">Sentinel</Title>
       <Spacer size="s" />
       <DatabaseForm
@@ -71,12 +63,12 @@ const EditSentinelConnection = (props: Props) => {
         showFields={{ host: true, port: true, alias: false, timeout: false }}
         onHostNamePaste={onHostNamePaste}
       />
-      <Divider
-        colorVariable="separatorColor"
-        variant="fullWidth"
-        className="form__divider"
-      />
+      <Spacer size="m" />
+      <Divider />
+      <Spacer size="m" />
       <DbIndex formik={formik} />
+      <Spacer size="m" />
+      <Divider />
     </>
   )
 
@@ -99,11 +91,7 @@ const EditSentinelConnection = (props: Props) => {
         </FlexItem>
       </Row>
       <Spacer size="s" />
-      <Divider
-        colorVariable="separatorColor"
-        variant="fullWidth"
-        className="form__divider"
-      />
+      <Divider />
       <Title size="XS">Database</Title>
       <Spacer size="s" />
       <SentinelMasterDatabase
@@ -111,11 +99,7 @@ const EditSentinelConnection = (props: Props) => {
         db={db}
         isCloneMode={isCloneMode}
       />
-      <Divider
-        colorVariable="separatorColor"
-        variant="fullWidth"
-        className="form__divider"
-      />
+      <Divider />
       <Title size="XS">Sentinel</Title>
       <Spacer size="s" />
       <DatabaseForm
diff --git a/redisinsight/ui/src/pages/home/styles.scss b/redisinsight/ui/src/pages/home/styles.scss
index b400b1f63d..c508dad1cc 100644
--- a/redisinsight/ui/src/pages/home/styles.scss
+++ b/redisinsight/ui/src/pages/home/styles.scss
@@ -102,40 +102,6 @@
   }
 }
 
-.homePage_tooltip {
-  width: 470px !important;
-  max-width: 470px !important;
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  padding-left: 15px !important;
-  padding-top: 15px !important;
-
-  p {
-    opacity: 0.8 !important;
-  }
-}
-
-.homePage_toolTipUl {
-  font-weight: 300 !important;
-  opacity: 0.85;
-  padding-bottom: 10px;
-
-  li {
-    line-height: 20px;
-  }
-
-  .dot {
-    margin-left: 10px;
-  }
-
-  .dot::before {
-    font-size: 8px;
-    padding: 0 14px;
-    content: " \25CF";
-    vertical-align: middle;
-  }
-}
-
 .theme_DARK {
   .homePage {
     .databaseList {
diff --git a/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx b/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx
index 8b4dd36368..977b29d2c1 100644
--- a/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx
+++ b/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx
@@ -7,7 +7,6 @@ import styles from './styles.module.scss'
 const VerticalDivider = (props: any) => (
   <Divider
     className={styles.divider}
-    colorVariable="separatorColor"
     orientation="vertical"
     {...props}
   />
diff --git a/redisinsight/ui/src/pages/settings/SettingsPage.tsx b/redisinsight/ui/src/pages/settings/SettingsPage.tsx
index 7765fd67b9..8c48b4e85b 100644
--- a/redisinsight/ui/src/pages/settings/SettingsPage.tsx
+++ b/redisinsight/ui/src/pages/settings/SettingsPage.tsx
@@ -67,7 +67,7 @@ const SettingsPage = () => {
     <>
       <ThemeSettings />
       <ConsentsNotifications />
-      <Divider colorVariable="separatorColor" />
+      <Divider />
       <Spacer />
       <DateTimeFormatter />
     </>