diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts
new file mode 100644
index 0000000000..cd5295850b
--- /dev/null
+++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts
@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { Col, Row } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+
+export const StyledDiscoverText = styled(Text)`
+  align-self: flex-start;
+`
+
+export const StyledContainer = styled(Col)``
+
+export const StyledCreateDbSection = styled(Row)`
+  width: 100%;
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: ${({ theme }) => theme.core.space.space100};
+  padding-block: ${({ theme }) => theme.core.space.space100};
+  padding-inline: ${({ theme }) => theme.core.space.space200};
+`
+
+export const StyledAgreementContainer = styled.div`
+  margin-top: ${({ theme }) => theme.core.space.space200};
+  width: 50%;
+`
diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx
index 043b82506d..201a789ca2 100644
--- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx
+++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx
@@ -17,14 +17,19 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Pages } from 'uiSrc/constants'
 import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form'
 
-import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
-
 import { OAuthSsoHandlerDialog } from 'uiSrc/components'
-import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
-import styles from './styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { CloudIcon } from 'uiSrc/components/base/icons'
+
+import {
+  StyledDiscoverText,
+  StyledContainer,
+  StyledCreateDbSection,
+  StyledAgreementContainer,
+} from './OAuthAutodiscovery.styles'
 
 export interface Props {
   inline?: boolean
@@ -72,23 +77,24 @@ const OAuthAutodiscovery = (props: Props) => {
     )
 
     return (
-      <div className={styles.container} data-testid="oauth-container-import">
-        <Text className={styles.text} color="subdued">
+      <StyledContainer data-testid="oauth-container-import" gap="xl">
+        <Text>
           Use{' '}
-          <strong>
+          <Text color="primary" variant="semiBold" component="span">
             {currentAccountName?.name} #{currentAccountId}
-          </strong>{' '}
+          </Text>{' '}
           account to auto-discover subscriptions and add your databases.
         </Text>
-        <Spacer size="xl" />
-        <PrimaryButton
-          onClick={handleClickDiscover}
-          disabled={isDiscoverDisabled}
-          data-testid="oauth-discover-btn"
-        >
-          Discover
-        </PrimaryButton>
-      </div>
+        <Row justify="center">
+          <PrimaryButton
+            onClick={handleClickDiscover}
+            disabled={isDiscoverDisabled}
+            data-testid="oauth-discover-btn"
+          >
+            Discover
+          </PrimaryButton>
+        </Row>
+      </StyledContainer>
     )
   }
 
@@ -107,15 +113,14 @@ const OAuthAutodiscovery = (props: Props) => {
   }
 
   const CreateFreeDb = () => (
-    <div className={styles.createDbSection}>
-      <div className={styles.createDbTitle}>
-        <CloudIcon />
-        <span>Start FREE with Redis Cloud</span>
-      </div>
+    <StyledCreateDbSection justify="between" align="center">
+      <Row align="center" gap="m">
+        <CloudIcon size="L" />
+        <Text color="primary">Start FREE with Redis Cloud</Text>
+      </Row>
       <OAuthSsoHandlerDialog>
         {(ssoCloudHandlerClick) => (
           <PrimaryButton
-            size="s"
             // todo: choose either href or on click
             // href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: '' })}
             // target="_blank"
@@ -131,40 +136,43 @@ const OAuthAutodiscovery = (props: Props) => {
           </PrimaryButton>
         )}
       </OAuthSsoHandlerDialog>
-    </div>
+    </StyledCreateDbSection>
   )
 
   return (
-    <div className={styles.container} data-testid="oauth-container-import">
+    <StyledContainer
+      data-testid="oauth-container-import"
+      align="center"
+      gap="xl"
+    >
       <OAuthForm
         inline={inline}
-        className={styles.buttonsContainer}
         onClick={handleClickSso}
         action={OAuthSocialAction.Import}
       >
         {(form: React.ReactNode) => (
           <>
-            <Text className={styles.text} color="subdued">
+            <StyledDiscoverText color="primary">
               Discover subscriptions and add your databases. A new Redis Cloud
               account will be created for you if you don’t have one.
-            </Text>
-            <Spacer size="m" />
+            </StyledDiscoverText>
+
             <CreateFreeDb />
-            <Spacer size="xl" />
-            <Text>Get started with</Text>
-            <Title className={styles.title} size="L">
+
+            <Text color="primary">Get started with</Text>
+            <Title size="L" color="primary">
               Redis Cloud account
             </Title>
-            <Spacer size="xl" />
+
             {form}
-            <Spacer size="xxl" />
-            <div className={styles.containerAgreement}>
+
+            <StyledAgreementContainer>
               <OAuthAgreement size="s" />
-            </div>
+            </StyledAgreementContainer>
           </>
         )}
       </OAuthForm>
-    </div>
+    </StyledContainer>
   )
 }
 
diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss
deleted file mode 100644
index eb51711e35..0000000000
--- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .buttonsContainer {
-    .button {
-      margin: 0 10px;
-
-      padding: 4px 31px !important;
-      width: 100px !important;
-      height: 22px !important;
-      border-radius: 4px !important;
-
-      background-color: var(--comboBoxBadgeBgColor);
-
-      svg {
-        width: 15px !important;
-        height: 14px !important;
-        margin-top: 0 !important;
-        margin-right: 0 !important;
-      }
-
-      &.googleButton {
-        background-color: var(--cloudSsoGoogle);
-      }
-
-      &.githubButton {
-        background-color: var(--cloudSsoGithub);
-      }
-    }
-  }
-
-  .title {
-    font-size: 28px;
-    font-weight: 700 !important;
-  }
-
-  .text {
-    font-style: normal;
-    font-weight: 400 !important;
-    line-height: 150% !important;
-    color: var(--htmlColor) !important;
-    font-size: 13px !important;
-    padding-bottom: 16px;
-    align-self: flex-start;
-  }
-
-  .containerAgreement {
-    margin-top: 16px;
-    text-align: left;
-
-    :global(.euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label) {
-      line-height: 18px !important;
-      font-size: 12px !important;
-    }
-  }
-
-  .createDbSection {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-
-    border: 1px solid var(--controlsBorderColor);
-    border-radius: 8px;
-    padding: 8px 16px;
-
-    .createDbTitle {
-      display: flex;
-      align-items: center;
-
-      > svg {
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.withAdvantagesWrapper {
-  height: 100%;
-  display: flex;
-
-  .advantagesContainer {
-    max-width: 300px;
-    padding-bottom: 24px;
-  }
-
-  .socialContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    padding: 108px 0px 40px 40px;
-
-    .subTitle {
-      font-size: 16px;
-    }
-
-    .title {
-      font-weight: bold;
-    }
-  }
-
-  .socialButtons {
-    margin: 40px 0 60px;
-  }
-}
-
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts
index 120e28aa35..4110ebe0b1 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts
@@ -26,6 +26,7 @@ export const StyledConnectivityLink = styled(Link)`
     color: ${({ theme }) => theme.semantic.color.text.neutral800};
     opacity: 0.8;
     transform: translateY(-1px);
+    transition: transform 0.2s ease-in-out;
     box-shadow: none;
   }
 `
diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx
index ef976d241d..6a7dd5d47d 100644
--- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx
@@ -121,7 +121,6 @@ const CloudConnectionForm = (props: Props) => {
 
   const CancelButton = ({ onClick }: { onClick: () => void }) => (
     <SecondaryButton
-      size="s"
       className="btn-cancel"
       onClick={onClick}
       style={{ marginRight: 12 }}
@@ -148,7 +147,6 @@ const CloudConnectionForm = (props: Props) => {
       }
     >
       <PrimaryButton
-        size="s"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
@@ -167,13 +165,13 @@ const CloudConnectionForm = (props: Props) => {
     const footerEl = document.getElementById('footerDatabaseForm')
     if (footerEl) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m">
           {onClose && <CancelButton onClick={onClose} />}
           <SubmitButton
             onClick={formik.submitForm}
             submitIsDisabled={!submitIsEnable()}
           />
-        </div>,
+        </Row>,
         footerEl,
       )
     }
@@ -188,7 +186,7 @@ const CloudConnectionForm = (props: Props) => {
       <form onSubmit={formik.handleSubmit}>
         <Row responsive>
           <FlexItem grow>
-            <FormField label="API Account Key*">
+            <FormField label="API Account Key" required>
               <TextInput
                 name="accessKey"
                 id="accessKey"
@@ -197,11 +195,8 @@ const CloudConnectionForm = (props: Props) => {
                 placeholder={fieldDisplayNames.accessKey}
                 value={formik.values.accessKey}
                 autoComplete="off"
-                onChange={value => {
-                  formik.setFieldValue(
-                    'accessKey',
-                    validateField(value.trim()),
-                  )
+                onChange={(value) => {
+                  formik.setFieldValue('accessKey', validateField(value.trim()))
                 }}
               />
             </FormField>
@@ -210,7 +205,7 @@ const CloudConnectionForm = (props: Props) => {
         <Spacer size="l" />
         <Row responsive>
           <FlexItem grow>
-            <FormField label="API User Key*">
+            <FormField label="API User Key" required>
               <TextInput
                 name="secretKey"
                 id="secretKey"
@@ -219,11 +214,8 @@ const CloudConnectionForm = (props: Props) => {
                 placeholder={fieldDisplayNames.secretKey}
                 value={formik.values.secretKey}
                 autoComplete="off"
-                onChange={value => {
-                  formik.setFieldValue(
-                    'secretKey',
-                    validateField(value.trim()),
-                  )
+                onChange={(value) => {
+                  formik.setFieldValue('secretKey', validateField(value.trim()))
                 }}
               />
             </FormField>
@@ -237,11 +229,9 @@ const CloudConnectionForm = (props: Props) => {
   return (
     <div className="getStartedForm eui-yScroll">
       <FeatureFlagComponent name={FeatureFlags.cloudSso}>
-        <Col gap="m">
+        <Col gap="l">
           <FlexItem grow>
-            <Text color="subdued" size="s">
-              Connect with:
-            </Text>
+            <Text color="primary">Connect with</Text>
           </FlexItem>
           <FlexItem grow>
             <RiRadioGroup
@@ -253,7 +243,7 @@ const CloudConnectionForm = (props: Props) => {
             />
           </FlexItem>
         </Col>
-        <Spacer size="m" />
+        <Spacer size="l" />
       </FeatureFlagComponent>
       {type === CloudConnectionOptions.Account && (
         <OAuthAutodiscovery
diff --git a/redisinsight/ui/src/pages/home/components/form/Messages.tsx b/redisinsight/ui/src/pages/home/components/form/Messages.tsx
index 564e22eb24..4e4339a9f2 100644
--- a/redisinsight/ui/src/pages/home/components/form/Messages.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/Messages.tsx
@@ -1,74 +1,80 @@
 import React from 'react'
-import cx from 'classnames'
 import { APPLICATION_NAME } from 'uiSrc/constants'
 import { Text } from 'uiSrc/components/base/text'
 
 import { getUtmExternalLink } from 'uiSrc/utils/links'
-import { ExternalLink } from 'uiSrc/components'
-import styles from '../styles.module.scss'
+import { Link } from 'uiSrc/components/base/link/Link'
 
 const MessageCloudApiKeys = () => (
-  <Text data-testid="summary">
+  <Text data-testid="summary" color="primary">
     {
       'Enter Redis Cloud API keys to discover and add databases. API keys can be enabled by following the steps mentioned in the '
     }
-
-    <ExternalLink
-      className={cx(styles.link, styles.external)}
+    <Link
+      external
+      variant="inline"
+      color="subdued"
       href="https://docs.redis.com/latest/rc/api/get-started/enable-the-api/"
     >
-      documentation.
-    </ExternalLink>
+      documentation
+    </Link>
+    {'.'}
   </Text>
 )
 
 const MessageStandalone = () => (
-  <Text data-testid="summary">
+  <Text data-testid="summary" color="primary">
     You can manually add your Redis databases. Enter host and port of your Redis
     database to add it to {APPLICATION_NAME}. &nbsp;
-    <ExternalLink
-      className={cx(styles.link, styles.external)}
+    <Link
+      external
+      variant="inline"
+      color="subdued"
       href={getUtmExternalLink(
         'https://redis.io/docs/latest/develop/connect/insight#connection-management',
         { campaign: 'redisinsight' },
       )}
     >
       Learn more here.
-    </ExternalLink>
+    </Link>
   </Text>
 )
 
 const MessageSentinel = () => (
-  <Text data-testid="summary">
+  <Text data-testid="summary" color="primary">
     You can automatically discover and add primary groups from your Redis
     Sentinel. Enter host and port of your Redis Sentinel to automatically
     discover your primary groups and add them to {APPLICATION_NAME}. &nbsp;
-    <ExternalLink
-      className={cx(styles.link, styles.external)}
+    <Link
+      external
+      variant="inline"
+      color="subdued"
       href={getUtmExternalLink(
         'https://redis.io/docs/latest/operate/oss_and_stack/management/sentinel/',
         { campaign: 'redisinsight' },
       )}
     >
       Learn more here.
-    </ExternalLink>
+    </Link>
   </Text>
 )
 
 const MessageEnterpriceSoftware = () => (
-  <Text data-testid="summary">
+  <Text data-testid="summary" color="primary">
     Your Redis Software databases can be automatically added. Enter the
     connection details of your Redis Software Cluster to automatically discover
     your databases and add them to {APPLICATION_NAME}. &nbsp;
-    <ExternalLink
-      className={cx(styles.link, styles.external)}
+    <Link
+      external
+      variant="inline"
+      color="subdued"
       href={getUtmExternalLink(
         'https://redis.io/redis-enterprise-software/overview/',
         { campaign: 'redisinsight' },
       )}
     >
       Learn more here.
-    </ExternalLink>
+    </Link>
   </Text>
 )