From 01f41ccce078ee80aa5c0073458939fdf8416122 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 28 Oct 2025 13:47:16 +0200
Subject: [PATCH 01/18] edit text casing

---
 .../components/add-database-screen/AddDatabaseScreen.tsx    | 6 +++---
 .../database-panel-dialog/DatabasePanelDialog.tsx           | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
index 8c17dfacb2..da540b3fdb 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
@@ -130,7 +130,7 @@ const AddDatabaseScreen = (props: Props) => {
                 loading={isLoading}
                 data-testid="btn-test-connection"
               >
-                Test Connection
+                Test connection
               </EmptyButton>
             </RiTooltip>
           </FlexItem>
@@ -142,7 +142,7 @@ const AddDatabaseScreen = (props: Props) => {
                   onClick={() => handleProceedForm(AddDbType.manual)}
                   data-testid="btn-connection-settings"
                 >
-                  Connection Settings
+                  Connection settings
                 </SecondaryButton>
               </FlexItem>
               <FlexItem>
@@ -158,7 +158,7 @@ const AddDatabaseScreen = (props: Props) => {
                     icon={isInvalid ? InfoIcon : undefined}
                     data-testid="btn-submit"
                   >
-                    Add Database
+                    Add database
                   </PrimaryButton>
                 </RiTooltip>
               </FlexItem>
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 b83a396a50..b9ce50b822 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
@@ -30,7 +30,6 @@ import CloudConnectionFormWrapper from 'uiSrc/pages/home/components/cloud-connec
 import ImportDatabase from 'uiSrc/pages/home/components/import-database'
 import { FormDialog } from 'uiSrc/components'
 import { ModalHeaderProvider } from 'uiSrc/contexts/ModalTitleProvider'
-import { Title } from 'uiSrc/components/base/text/Title'
 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'
@@ -188,7 +187,7 @@ const DatabasePanelDialog = (props: Props) => {
     <FormDialog
       isOpen
       onClose={onClose}
-      header={modalHeader ?? 'Add Database'}
+      header={modalHeader ?? 'Add database'}
       footer={<FooterDatabaseForm />}
     >
       <div

From e048627fae9588486185083f79525bc1e055c265 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 13:11:43 +0200
Subject: [PATCH 02/18] change modal title from M to L

---
 .../database-panel-dialog/DatabasePanelDialog.tsx           | 3 ++-
 .../manual-connection-form/ManualConnectionForm.tsx         | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

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 b9ce50b822..1709837ca2 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,6 +36,7 @@ import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ArrowLeftIcon } from 'uiSrc/components/base/icons'
 import styles from './styles.module.scss'
 import { FooterDatabaseForm } from 'uiSrc/components/form-dialog/FooterDatabaseForm'
+import { Title } from 'uiSrc/components/base/text'
 
 export interface Props {
   editMode: boolean
@@ -187,7 +188,7 @@ const DatabasePanelDialog = (props: Props) => {
     <FormDialog
       isOpen
       onClose={onClose}
-      header={modalHeader ?? 'Add database'}
+      header={modalHeader ?? <Title size="L">Add database</Title>}
       footer={<FooterDatabaseForm />}
     >
       <div
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 9a3e42fb12..6ba911808b 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
@@ -167,7 +167,7 @@ const ManualConnectionForm = (props: Props) => {
             />
           </FlexItem>
           <FlexItem grow>
-            <Title size="M">Clone Database</Title>
+            <Title size="L">Clone Database</Title>
           </FlexItem>
         </Row>,
       )
@@ -175,11 +175,11 @@ const ManualConnectionForm = (props: Props) => {
     }
 
     if (isEditMode) {
-      setModalHeader(<Title size="M">Edit Database</Title>)
+      setModalHeader(<Title size="L">Edit Database</Title>)
       return
     }
 
-    setModalHeader(<Title size="M">Connection Settings</Title>, true)
+    setModalHeader(<Title size="L">Connection Settings</Title>, true)
   }, [isEditMode, isCloneMode])
 
   useEffect(() => {

From 250c0552683cd05b7b74ea3e497fde812fd94ad0 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 13:22:15 +0200
Subject: [PATCH 03/18] increase button sizes

---
 .../home/components/add-database-screen/AddDatabaseScreen.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
index da540b3fdb..a45ab23716 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
@@ -138,7 +138,7 @@ const AddDatabaseScreen = (props: Props) => {
             <Row responsive gap="l">
               <FlexItem>
                 <SecondaryButton
-                  size="small"
+                  size="medium"
                   onClick={() => handleProceedForm(AddDbType.manual)}
                   data-testid="btn-connection-settings"
                 >
@@ -152,7 +152,7 @@ const AddDatabaseScreen = (props: Props) => {
                   content={isInvalid ? <span>{ConnectionUrlError}</span> : null}
                 >
                   <PrimaryButton
-                    size="small"
+                    size="medium"
                     type="submit"
                     disabled={!!isInvalid}
                     icon={isInvalid ? InfoIcon : undefined}

From 1af9725240fe5ba19b1ec873e9aefeed58070eee Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 13:22:33 +0200
Subject: [PATCH 04/18] remove unused style, add spacing

---
 .../components/add-database-screen/AddDatabaseScreen.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
index a45ab23716..a7ac9d5a4b 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
@@ -103,7 +103,7 @@ const AddDatabaseScreen = (props: Props) => {
   })
 
   return (
-    <div className="eui-yScroll">
+    <div>
       <form onSubmit={formik.handleSubmit} data-testid="form">
         <Row responsive>
           <FlexItem grow>
@@ -113,8 +113,8 @@ const AddDatabaseScreen = (props: Props) => {
             />
           </FlexItem>
         </Row>
-
-        <Row responsive justify="between" style={{ padding: 4 }}>
+        <Spacer size="xxl" />
+        <Row responsive justify="between" align="center">
           <FlexItem>
             <RiTooltip
               position="top"

From b0d4960008c3f0e624660fd56ed5cb3f55458a2a Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 13:22:53 +0200
Subject: [PATCH 05/18] remove unneeded styles and add wrapper styled component
 for scrollable body

---
 .../DatabasePanelDialog.tsx                   | 29 +++++++++----------
 .../database-panel-dialog/styles.module.scss  | 23 ---------------
 2 files changed, 14 insertions(+), 38 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/home/components/database-panel-dialog/styles.module.scss

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 1709837ca2..9ea430284d 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
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
+import styled from 'styled-components'
+
 import { Nullable } from 'uiSrc/utils'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
 import { Instance } from 'uiSrc/slices/interfaces'
@@ -34,10 +35,14 @@ import ClusterConnectionFormWrapper from 'uiSrc/pages/home/components/cluster-co
 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 styles from './styles.module.scss'
 import { FooterDatabaseForm } from 'uiSrc/components/form-dialog/FooterDatabaseForm'
 import { Title } from 'uiSrc/components/base/text'
 
+const ScrollableWrapper = styled.div`
+  height: 100%;
+  overflow: scroll;
+`
+
 export interface Props {
   editMode: boolean
   urlHandlingAction?: Nullable<UrlHandlingActions>
@@ -191,19 +196,13 @@ const DatabasePanelDialog = (props: Props) => {
       header={modalHeader ?? <Title size="L">Add database</Title>}
       footer={<FooterDatabaseForm />}
     >
-      <div
-        className={cx(styles.bodyWrapper, 'container relative', {
-          addDbWrapper: !editMode,
-        })}
-      >
-        <div className={styles.formWrapper}>
-          <ModalHeaderProvider
-            value={{ modalHeader, setModalHeader: handleSetModalHeader }}
-          >
-            {Form()}
-          </ModalHeaderProvider>
-        </div>
-      </div>
+      <ScrollableWrapper>
+        <ModalHeaderProvider
+          value={{ modalHeader, setModalHeader: handleSetModalHeader }}
+        >
+          {Form()}
+        </ModalHeaderProvider>
+      </ScrollableWrapper>
     </FormDialog>
   )
 }
diff --git a/redisinsight/ui/src/pages/home/components/database-panel-dialog/styles.module.scss b/redisinsight/ui/src/pages/home/components/database-panel-dialog/styles.module.scss
deleted file mode 100644
index 8bc8459e86..0000000000
--- a/redisinsight/ui/src/pages/home/components/database-panel-dialog/styles.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.bodyWrapper {
-  height: 100%;
-  overflow: hidden;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.formWrapper {
-  flex-grow: 1;
-  padding: 16px 0;
-  height: 100%;
-
-  .softwareTypes {
-    display: flex;
-    align-items: center;
-
-    :global(.euiRadioGroup__item) {
-      margin-top: 0;
-      margin-right: 12px;
-    }
-  }
-}

From 2fe3da91f73049fef43a7945b9e169f9b0a0b687 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 14:35:04 +0200
Subject: [PATCH 06/18] style the connection url, remove some styles on the way

---
 .../components/connection-url/ConnectionUrl.tsx      | 12 ++++++++----
 .../components/connection-url/styles.module.scss     | 12 +++++-------
 redisinsight/ui/src/pages/home/styles.scss           |  4 ----
 3 files changed, 13 insertions(+), 15 deletions(-)

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 1187042a94..54564fb051 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
@@ -4,6 +4,9 @@ import { FormField } 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 } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -14,11 +17,12 @@ export interface Props {
 const ConnectionUrl = ({ value, onChange }: Props) => (
   <FormField
     label={
-      <div className={styles.connectionUrlInfo}>
-        <div>Connection URL</div>
+      <FlexGroup gap="s">
+        <Text>Connection URL</Text>
         <RiTooltip
           title="The following connection URLs are supported:"
           className="homePage_tooltip"
+          anchorClassName={styles.infoTooltipAnchor}
           position="right"
           content={
             <ul className="homePage_toolTipUl">
@@ -37,9 +41,9 @@ const ConnectionUrl = ({ value, onChange }: Props) => (
             </ul>
           }
         >
-          <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+          <RiIcon type="InfoIcon" />
         </RiTooltip>
-      </div>
+      </FlexGroup>
     }
   >
     <TextArea
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
index 57d39b81ed..0f64c1e752 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
@@ -1,8 +1,6 @@
-.connectionUrlInfo {
-  display: flex;
+.infoTooltipAnchor {
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: flex-start;
   align-items: center;
-
-  > :global(.euiToolTipAnchor) {
-    margin-left: 4px;
-  }
-}
+}
\ No newline at end of file
diff --git a/redisinsight/ui/src/pages/home/styles.scss b/redisinsight/ui/src/pages/home/styles.scss
index 63949f5772..b400b1f63d 100644
--- a/redisinsight/ui/src/pages/home/styles.scss
+++ b/redisinsight/ui/src/pages/home/styles.scss
@@ -110,10 +110,6 @@
   padding-left: 15px !important;
   padding-top: 15px !important;
 
-  .euiToolTip__title {
-    padding: 5px 10px 0 !important;
-  }
-
   p {
     opacity: 0.8 !important;
   }

From 373190dd80f91677421f8025294d09c6bd3df231 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 14:37:38 +0200
Subject: [PATCH 07/18] remove hard coded unneeded textarea height

---
 .../components/connection-url/ConnectionUrl.tsx                  | 1 -
 1 file changed, 1 deletion(-)

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 54564fb051..70461b4517 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
@@ -52,7 +52,6 @@ const ConnectionUrl = ({ value, onChange }: Props) => (
       value={value}
       onChangeCapture={onChange}
       placeholder="redis://default@127.0.0.1:6379"
-      style={{ height: 88 }}
       data-testid="connection-url"
     />
   </FormField>

From da190cc03249ae204cf27d780cb42ed08f89595d Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 14:44:15 +0200
Subject: [PATCH 08/18] add padding on the scrollable wrapper; remove some
 unneded styles

---
 .../components/connection-url/styles.module.scss         | 2 +-
 .../components/add-database-screen/styles.module.scss    | 9 ---------
 .../database-panel-dialog/DatabasePanelDialog.tsx        | 3 +++
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
index 0f64c1e752..5f74cc662d 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
@@ -3,4 +3,4 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-}
\ No newline at end of file
+}
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss
index bf69c0c02a..34cdb5f9df 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss
@@ -23,12 +23,3 @@
     right: 0;
   }
 }
-
-.connectionUrlInfo {
-  display: flex;
-  align-items: center;
-
-  > :global(.euiToolTipAnchor) {
-    margin-left: 4px;
-  }
-}
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 9ea430284d..69235be4c5 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
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
+import { Theme } from '@redis-ui/styles'
+
 
 import { Nullable } from 'uiSrc/utils'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
@@ -41,6 +43,7 @@ import { Title } from 'uiSrc/components/base/text'
 const ScrollableWrapper = styled.div`
   height: 100%;
   overflow: scroll;
+  padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space400};
 `
 
 export interface Props {

From 880f2d9da2db71cb0ffc0c093706ff5517cf2b24 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 14:51:16 +0200
Subject: [PATCH 09/18] Refactor and move horizontal rule

---
 .../add-database-screen/AddDatabaseScreen.tsx | 29 +++++++++++++++++--
 .../add-database-screen/styles.module.scss    | 25 ----------------
 2 files changed, 26 insertions(+), 28 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
index a7ac9d5a4b..828143648e 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
@@ -3,8 +3,10 @@ import { useFormik } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import { toNumber } from 'lodash'
-import { Nullable, parseRedisUrl } from 'uiSrc/utils'
+import styled from 'styled-components'
+import { Theme } from '@redis-ui/styles'
 
+import { Nullable, parseRedisUrl } from 'uiSrc/utils'
 import { AddDbType, DEFAULT_TIMEOUT } from 'uiSrc/pages/home/constants'
 import { Instance } from 'uiSrc/slices/interfaces'
 import {
@@ -26,7 +28,28 @@ import ConnectivityOptions from './components/connectivity-options'
 import ConnectionUrl from './components/connection-url'
 import { Values } from './constants'
 
-import styles from './styles.module.scss'
+const CustomHorizontalRule = styled.div`
+  margin: 12px 0;
+  width: 100%;
+  text-align: center;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    width: 47%;
+    height: 1px;
+    background: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.neutral500};
+    position: absolute;
+    top: 50%;
+  }
+
+  &:after {
+    right: 0;
+  }
+`
 
 export interface Props {
   onSelectOption: (type: AddDbType, db: Nullable<Record<string, any>>) => void
@@ -167,7 +190,7 @@ const AddDatabaseScreen = (props: Props) => {
         </Row>
       </form>
       <Spacer />
-      <div className={styles.hr}>Or</div>
+      <CustomHorizontalRule>Or</CustomHorizontalRule>
       <Spacer />
       <ConnectivityOptions
         onClickOption={handleProceedForm}
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss
deleted file mode 100644
index 34cdb5f9df..0000000000
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/styles.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.hr {
-  margin: 12px 0;
-  width: 100%;
-  text-align: center;
-  position: relative;
-  color: var(--euiTextSubduedColor);
-
-  &:before, &:after {
-    content: '';
-    display: block;
-    width: 45%;
-    height: 1px;
-    background: var(--controlsBorderColor);
-    position: absolute;
-    top: 50%;
-  }
-
-  &:before {
-    left: 0;
-  }
-
-  &:after {
-    right: 0;
-  }
-}

From 3564e031c91347876daca9712f5200753cc01512 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 15:27:40 +0200
Subject: [PATCH 10/18] remove rocket svg and its usages

---
 .../ui/src/assets/img/icons/rocket.svg        | 37 -------------------
 .../ui/src/assets/img/oauth/rocket.svg        | 10 -----
 redisinsight/ui/src/assets/img/rdi/rocket.svg |  6 ---
 .../components/base/icons/iconRegistry.tsx    |  2 -
 .../components/InternalPage/InternalPage.tsx  |  3 +-
 .../ConnectivityOptions.tsx                   |  6 +--
 .../DeployPipelineButton.tsx                  |  4 +-
 7 files changed, 5 insertions(+), 63 deletions(-)
 delete mode 100644 redisinsight/ui/src/assets/img/icons/rocket.svg
 delete mode 100644 redisinsight/ui/src/assets/img/oauth/rocket.svg
 delete mode 100644 redisinsight/ui/src/assets/img/rdi/rocket.svg

diff --git a/redisinsight/ui/src/assets/img/icons/rocket.svg b/redisinsight/ui/src/assets/img/icons/rocket.svg
deleted file mode 100644
index cf31c6b529..0000000000
--- a/redisinsight/ui/src/assets/img/icons/rocket.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<svg width="34" height="40" viewBox="0 0 34 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5657 19.3195C15.4497 17.4354 18.3193 17.2771 19.9916 18.9494C21.6639 20.6217 21.5392 23.4576 19.6215 25.3753C16.5557 28.4412 11.5047 28.3609 11.0424 27.8986C10.5801 27.4363 10.4998 22.3853 13.5657 19.3195Z" fill="#4766C4"/>
-<path d="M24.4696 25.0393C22.5855 23.1553 22.4272 20.2857 24.0995 18.6134C25.7718 16.9411 28.6078 17.0658 30.5255 18.9835C33.5913 22.0493 33.511 27.1003 33.0487 27.5626C32.5864 28.0249 27.5354 28.1052 24.4696 25.0393Z" fill="#4766C4"/>
-<path d="M21.6441 39.9998C21.6441 39.9998 17.9917 36.0129 18.1084 33.1419C18.2251 30.2708 22.2835 26.7764 22.2835 26.7764C22.2835 26.7764 25.842 30.6966 25.726 33.5477C25.6101 36.3988 21.6441 39.9998 21.6441 39.9998Z" fill="#FFAF2B"/>
-<path d="M21.7811 36.4539C23.4175 36.5328 24.808 35.2702 24.887 33.6338C24.9659 31.9975 23.7034 30.6069 22.067 30.528C20.4306 30.449 19.04 31.7116 18.9611 33.348C18.8821 34.9844 20.1447 36.3749 21.7811 36.4539Z" fill="#FFC76B"/>
-<ellipse cx="8.46131" cy="15.5124" rx="8.46131" ry="15.5124" transform="matrix(-1 -7.29593e-08 1.45871e-06 -1 30.4468 31.248)" fill="#7B90E0"/>
-<path d="M18.6996 14.8126C17.0055 13.0576 17.0552 10.2513 18.8088 8.55719C20.5638 6.86313 23.3702 6.91287 25.0643 8.66645C26.7583 10.4214 26.7086 13.2278 24.955 14.9219C23.2 16.6159 20.3937 16.5662 18.6996 14.8126Z" fill="#E8EFFF"/>
-<g filter="url(#filter0_d_74_2441)">
-<path d="M5.50189 5.25197C4.85922 3.87699 5.45519 2.23533 6.82937 1.59237C8.20437 0.949696 9.84602 1.54567 10.489 2.91984C11.1317 4.29483 10.5357 5.93648 9.16151 6.57945C7.78651 7.22212 6.14486 6.62615 5.50189 5.25197Z" fill="#7547DE"/>
-</g>
-<ellipse cx="4.69609" cy="0.615757" rx="4.69609" ry="0.615757" transform="matrix(0.945876 0.324526 -0.324529 0.945876 3.61084 1.77637)" fill="#9E7EE8"/>
-<g filter="url(#filter1_d_74_2441)">
-<path d="M2.84497 16.1665C2.01091 15.6103 1.78489 14.4791 2.34051 13.6451C2.8967 12.8111 4.02792 12.585 4.86187 13.1407C5.69594 13.6969 5.92196 14.8281 5.36633 15.662C4.81014 16.4961 3.67893 16.7221 2.84497 16.1665Z" fill="#F74B57"/>
-</g>
-<ellipse cx="2.90796" cy="0.46104" rx="2.90796" ry="0.46104" transform="matrix(0.976991 -0.21328 0.213281 0.976991 0.653809 14.4365)" fill="#F98189"/>
-<defs>
-<filter id="filter0_d_74_2441" x="5.24316" y="1.3335" width="5.50439" height="5.64789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="0.143255"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.917647 0 0 0 0 0.929412 0 0 0 0 0.94902 0 0 0 1 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_74_2441"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_74_2441" result="shape"/>
-</filter>
-<filter id="filter1_d_74_2441" x="1.52212" y="12.2194" width="4.8684" height="4.8684" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="0.102803"/>
-<feGaussianBlur stdDeviation="0.308409"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_74_2441"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_74_2441" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/redisinsight/ui/src/assets/img/oauth/rocket.svg b/redisinsight/ui/src/assets/img/oauth/rocket.svg
deleted file mode 100644
index 50919c6d0d..0000000000
--- a/redisinsight/ui/src/assets/img/oauth/rocket.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Rocket">
-<g id="Vector">
-<path d="M8.46489 1.44882L7.9999 2.0998L7.53491 1.44882C7.81307 1.25013 8.18673 1.25013 8.46489 1.44882Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.9999 2.0998C8.46489 1.44882 8.46565 1.44936 8.46565 1.44936L8.46654 1.45L8.46871 1.45156L8.47457 1.4558L8.49224 1.46879C8.5066 1.47944 8.52608 1.49407 8.55018 1.51265C8.59837 1.54979 8.66518 1.60277 8.7468 1.67123C8.90985 1.80798 9.13312 2.00743 9.38557 2.26671C9.88842 2.78315 10.519 3.54917 11.0154 4.54203C11.5012 5.51366 11.8479 6.68443 11.8402 8.02014C11.8489 8.03183 11.8574 8.0438 11.8655 8.05605L13.4655 10.456C13.5906 10.6436 13.6307 10.8752 13.576 11.0938L12.776 14.2938C12.7129 14.5462 12.531 14.7522 12.2884 14.846C12.0457 14.9398 11.7726 14.9098 11.5561 14.7654L9.35769 13.2998H6.64213L4.44367 14.7654C4.2272 14.9098 3.95408 14.9398 3.71143 14.846C3.46877 14.7522 3.28689 14.5462 3.22379 14.2938L2.42379 11.0938C2.36913 10.8752 2.40924 10.6436 2.53427 10.456L4.13427 8.05605C4.14241 8.04382 4.15086 8.03187 4.1596 8.0202C4.15189 6.68446 4.49852 5.51367 4.98434 4.54203C5.48078 3.54916 6.11137 2.78315 6.61422 2.26671C6.86667 2.00743 7.08995 1.80797 7.253 1.67122C7.33462 1.60277 7.40143 1.54979 7.44962 1.51265C7.47372 1.49407 7.4932 1.47944 7.50756 1.46879L7.52523 1.4558L7.53109 1.45156L7.53326 1.45L7.53415 1.44936C7.53415 1.44936 7.53491 1.44882 7.9999 2.0998C7.9999 2.0998 5.1004 4.17086 4.96437 7.71688C4.94696 8.17075 4.97487 8.64878 5.05987 9.14972C5.2337 10.1742 5.64649 11.2943 6.39991 12.4998H9.59994C13.5999 6.0998 7.9999 2.0998 7.9999 2.0998ZM10.2655 12.9436C10.2699 12.9371 10.2741 12.9305 10.2783 12.9238C11.0874 11.6293 11.5361 10.4129 11.7275 9.29118L12.7999 10.8998L11.9999 14.0998L10.2655 12.9436ZM4.27229 9.29123C4.4637 10.413 4.9124 11.6293 5.72148 12.9238C5.72565 12.9305 5.7299 12.9371 5.73425 12.9436L3.99991 14.0998L3.19991 10.8998L4.27229 9.29123Z"/>
-<path d="M7.19991 14.4998C6.97899 14.4998 6.79991 14.6789 6.79991 14.8998C6.79991 15.1207 6.97899 15.2998 7.19991 15.2998H8.79991C9.02082 15.2998 9.19991 15.1207 9.19991 14.8998C9.19991 14.6789 9.02082 14.4998 8.79991 14.4998H7.19991Z"/>
-<path d="M8.7999 6.8998C8.7999 7.34163 8.44173 7.6998 7.9999 7.6998C7.55807 7.6998 7.1999 7.34163 7.1999 6.8998C7.1999 6.45798 7.55807 6.0998 7.9999 6.0998C8.44173 6.0998 8.7999 6.45798 8.7999 6.8998Z"/>
-</g>
-</g>
-</svg>
diff --git a/redisinsight/ui/src/assets/img/rdi/rocket.svg b/redisinsight/ui/src/assets/img/rdi/rocket.svg
deleted file mode 100644
index 7599de57bc..0000000000
--- a/redisinsight/ui/src/assets/img/rdi/rocket.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.58123 0.686267L6.99999 1.5L6.41876 0.686265C6.76646 0.437911 7.23354 0.437912 7.58123 0.686267Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99999 1.5C7.58123 0.686267 7.58218 0.686948 7.58218 0.686948L7.5833 0.687745L7.58601 0.689694L7.59333 0.694999L7.61542 0.71123C7.63338 0.724541 7.65772 0.742836 7.68785 0.766057C7.74808 0.812482 7.8316 0.87871 7.93362 0.964278C8.13743 1.13521 8.41652 1.38454 8.73209 1.70863C9.36065 2.35418 10.1489 3.3117 10.7694 4.55279C11.3767 5.76731 11.81 7.23078 11.8003 8.90042C11.8113 8.91503 11.8219 8.92999 11.8321 8.9453L13.8321 11.9453C13.9883 12.1797 14.0385 12.4692 13.9701 12.7425L12.9701 16.7425C12.8913 17.058 12.6639 17.3155 12.3606 17.4327C12.0573 17.55 11.7159 17.5124 11.4453 17.3321L8.69723 15.5H5.30278L2.5547 17.3321C2.28412 17.5124 1.94273 17.55 1.63941 17.4327C1.33609 17.3155 1.10873 17.058 1.02986 16.7425L0.0298623 12.7425C-0.0384709 12.4692 0.0116705 12.1797 0.167954 11.9453L2.16795 8.9453C2.17814 8.93002 2.1887 8.91508 2.19963 8.9005C2.18999 7.23082 2.62327 5.76733 3.23055 4.55278C3.8511 3.3117 4.63933 2.35418 5.26789 1.70863C5.58347 1.38453 5.86256 1.13521 6.06637 0.964275C6.16839 0.878707 6.25191 0.812479 6.31215 0.766055C6.34228 0.742833 6.36662 0.724538 6.38457 0.711227L6.40666 0.694996L6.41399 0.689691L6.41669 0.687743L6.41781 0.686945C6.41781 0.686945 6.41876 0.686265 6.99999 1.5C6.99999 1.5 3.37562 4.08882 3.20559 8.52135C3.18383 9.08868 3.2187 9.68622 3.32496 10.3124C3.54224 11.593 4.05823 12.9932 5 14.5H9.00004C14 6.5 6.99999 1.5 6.99999 1.5ZM9.83205 15.0547C9.83747 15.0466 9.84279 15.0383 9.84799 15.03C10.8594 13.4118 11.4202 11.8914 11.6595 10.4892L13 12.5L12 16.5L9.83205 15.0547ZM2.34048 10.4893C2.57975 11.8914 3.14062 13.4118 4.15198 15.03C4.15718 15.0383 4.1625 15.0466 4.16793 15.0547L2 16.5L1 12.5L2.34048 10.4893Z" fill="currentColor"/>
-<path d="M6 17C5.72386 17 5.5 17.2239 5.5 17.5C5.5 17.7761 5.72386 18 6 18H8C8.27615 18 8.5 17.7761 8.5 17.5C8.5 17.2239 8.27615 17 8 17H6Z" fill="currentColor"/>
-<path d="M8 7.5C8 8.05228 7.55228 8.5 7 8.5C6.44772 8.5 6 8.05228 6 7.5C6 6.94772 6.44772 6.5 7 6.5C7.55228 6.5 8 6.94772 8 7.5Z" fill="currentColor"/>
-</svg>
diff --git a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx
index 4001665dc7..2fb1baa1f6 100644
--- a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx
+++ b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx
@@ -36,7 +36,6 @@ import RedisDbBlueSvg from 'uiSrc/assets/img/icons/redis_db_blue.svg?react'
 import RedisLogoFullSvg from 'uiSrc/assets/img/logo.svg?react'
 import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react'
 import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react'
-import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react'
 import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react'
 import SilentModeSvg from 'uiSrc/assets/img/icons/silent_mode.svg?react'
 import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react'
@@ -208,7 +207,6 @@ export const RedisDbBlueIcon = createIconComponent(RedisDbBlueSvg)
 export const RedisLogo = createIconComponent(RedisLogoSvg)
 export const RedisLogoFullIcon = createIconComponent(RedisLogoFullSvg)
 export const RiResetIcon = createIconComponent(ResetSvg)
-export const RiRocketIcon = createIconComponent(RocketSvg)
 export const RiStarsIcon = createIconComponent(StarsSvg)
 export const RiStopIcon = createIconComponent(StopIconSvg)
 export const RiUserIcon = createIconComponent(UserSvg)
diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx
index 14adab33e1..5dc389fb79 100644
--- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx
@@ -5,7 +5,7 @@ import { debounce } from 'lodash'
 import { useLocation, useParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
-import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
+import { ChevronLeftIcon, RocketIcon } from 'uiSrc/components/base/icons'
 import { ExternalLink, HorizontalRule, LoadingContent } from 'uiSrc/components'
 import { RiPopover } from 'uiSrc/components/base'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
@@ -16,7 +16,6 @@ import {
 } from 'uiSrc/telemetry'
 import { getTutorialCapability, Nullable } from 'uiSrc/utils'
 
-import RocketIcon from 'uiSrc/assets/img/icons/rocket.svg?react'
 import { appContextCapability } from 'uiSrc/slices/app/context'
 import {
   isShowCapabilityTutorialPopover,
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
index e7ad4c6b54..21a8557a54 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
@@ -1,16 +1,14 @@
 import React from 'react'
 import cx from 'classnames'
-
 import styled from 'styled-components'
+
 import { AddDbType } from 'uiSrc/pages/home/constants'
 import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
 import { FeatureFlags } from 'uiSrc/constants'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
-
-import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
-import RocketIcon from 'uiSrc/assets/img/oauth/rocket.svg?react'
+import { CloudIcon, RocketIcon } from 'uiSrc/components/base/icons'
 
 import { Col, FlexItem, Grid } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx
index 31a7b20ab4..0e727d63ad 100644
--- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx
+++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx
@@ -19,7 +19,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
-import { RiRocketIcon } from 'uiSrc/components/base/icons'
+import { RocketIcon } from 'uiSrc/components/base/icons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -119,7 +119,7 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => {
           <PrimaryButton
             size="s"
             onClick={handleClickDeploy}
-            icon={RiRocketIcon}
+            icon={RocketIcon}
             disabled={disabled}
             loading={loading}
             data-testid="deploy-rdi-pipeline"

From 853dd1076a97e12f93f7825053b5f886deb70b9c Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 15:53:51 +0200
Subject: [PATCH 11/18] use different redis cloud icon

---
 .../components/connectivity-options/ConnectivityOptions.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
index 21a8557a54..a7170ecf7e 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
@@ -8,7 +8,10 @@ import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
 import { FeatureFlags } from 'uiSrc/constants'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
-import { CloudIcon, RocketIcon } from 'uiSrc/components/base/icons'
+
+// to be replaced with cloud icon from @redis-ui/icons once redis-ui bumped
+import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
+import { RocketIcon } from 'uiSrc/components/base/icons'
 
 import { Col, FlexItem, Grid } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'

From 6818019b27c891c239bdb53504f2ef7ad67181c0 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 16:23:18 +0200
Subject: [PATCH 12/18] move shield and redis software to icon registry and
 refactor connectivity options

---
 .../components/base/icons/iconRegistry.tsx    | 19 +++++----------
 .../ConnectivityOptions.tsx                   | 15 ++++++------
 .../add-database-screen/constants.tsx         | 23 ++++++++-----------
 3 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx
index 2fb1baa1f6..e35089f66d 100644
--- a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx
+++ b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx
@@ -129,12 +129,9 @@ import PipelineStatisticsSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics.
 import PubSubSvg from 'uiSrc/assets/img/sidebar/pubsub.svg?react'
 import SlowLogSvg from 'uiSrc/assets/img/sidebar/slowlog.svg?react'
 import WorkbenchSvg from 'uiSrc/assets/img/sidebar/workbench.svg?react'
-// Missing SVGs and not used/legacy:
-// import BrowserActiveSvg from 'uiSrc/assets/img/sidebar/browser_active.svg?react'
-// import PipelineStatisticsActiveSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics_active.svg?react'
-// import PubSubActiveSvg from 'uiSrc/assets/img/sidebar/pubsub_active.svg?react'
-// import SlowLogActiveSvg from 'uiSrc/assets/img/sidebar/slowlog_active.svg?react'
-// import WorkbenchActiveSvg from 'uiSrc/assets/img/sidebar/workbench_active.svg?react'
+
+import ShieldSvg from 'uiSrc/assets/img/shield.svg?react'
+import RedisSoftwareSvg from 'uiSrc/assets/img/redis-software.svg?react'
 
 import { Icon, IconProps } from './Icon'
 
@@ -306,10 +303,6 @@ export const PipelineStatisticsIcon = createIconComponent(PipelineStatisticsSvg)
 export const PubSubIcon = createIconComponent(PubSubSvg)
 export const SlowLogIcon = createIconComponent(SlowLogSvg)
 export const WorkbenchIcon = createIconComponent(WorkbenchSvg)
-// export const BrowserActiveIcon = createIconComponent(BrowserActiveSvg)
-// export const PipelineStatisticsActiveIcon = createIconComponent(
-//   PipelineStatisticsActiveSvg,
-// )
-// export const PubSubActiveIcon = createIconComponent(PubSubActiveSvg)
-// export const SlowLogActiveIcon = createIconComponent(SlowLogActiveSvg)
-// export const WorkbenchActiveIcon = createIconComponent(WorkbenchActiveSvg)
+
+export const ShieldIcon = createIconComponent(ShieldSvg)
+export const RedisSoftwareIcon = createIconComponent(RedisSoftwareSvg)
\ No newline at end of file
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
index a7170ecf7e..b784a98d60 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
@@ -18,7 +18,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
-
+import { Text } from 'uiSrc/components/base/text/Text'
 import { Link } from 'uiSrc/components/base/link/Link'
 import { CONNECTIVITY_OPTIONS } from '../../constants'
 
@@ -72,9 +72,9 @@ const ConnectivityOptions = (props: Props) => {
   return (
     <>
       <section className={styles.cloudSection}>
-        <Title size="XS" className={styles.sectionTitle}>
+        <Text color="primary">
           Get started with Redis Cloud account
-        </Title>
+        </Text>
         <Spacer />
         <Grid gap="l" columns={3} responsive>
           <FlexItem>
@@ -123,20 +123,19 @@ const ConnectivityOptions = (props: Props) => {
       </section>
       <Spacer size="xxl" />
       <section>
-        <Title size="XS" className={styles.sectionTitle}>
+        <Text color="primary">
           More connectivity options
-        </Title>
+        </Text>
         <Spacer />
         <Grid gap="l" responsive columns={3}>
           {CONNECTIVITY_OPTIONS.map(({ id, type, title, icon }) => (
             <FlexItem key={id}>
               <SecondaryButton
-                color="secondary"
-                className={cx(styles.typeBtn, styles.small)}
+                icon={icon}
                 onClick={() => onClickOption(type)}
                 data-testid={`option-btn-${id}`}
+                size="large"
               >
-                {icon?.({ className: styles.btnIcon })}
                 {title}
               </SecondaryButton>
             </FlexItem>
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx
index 9d78cd56c5..388b7c6434 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx
@@ -1,33 +1,30 @@
-import React from 'react'
-
 import { AddDbType } from 'uiSrc/pages/home/constants'
-import ShieldIcon from 'uiSrc/assets/img/shield.svg?react'
-import RedisSoftwareIcon from 'uiSrc/assets/img/redis-software.svg?react'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { DownloadIcon, IconType, RedisSoftwareIcon, ShieldIcon } from 'uiSrc/components/base/icons'
 
-export interface Values {
-  connectionURL: string
+export interface ConnectivityOption {
+  id: string
+  title: string
+  type: AddDbType
+  icon: IconType
 }
 
-export const CONNECTIVITY_OPTIONS = [
+export const CONNECTIVITY_OPTIONS: ConnectivityOption[] = [
   {
     id: 'sentinel',
     title: 'Redis Sentinel',
     type: AddDbType.sentinel,
-    icon: (props: Record<string, any> = {}) => <ShieldIcon {...props} />,
+    icon: ShieldIcon,
   },
   {
     id: 'software',
     title: 'Redis Software',
     type: AddDbType.software,
-    icon: (props: Record<string, any> = {}) => <RedisSoftwareIcon {...props} />,
+    icon: RedisSoftwareIcon,
   },
   {
     id: 'import',
     title: 'Import from file',
     type: AddDbType.import,
-    icon: (props: Record<string, any> = {}) => (
-      <RiIcon type="DownloadIcon" {...props} />
-    ),
+    icon: DownloadIcon,
   },
 ]

From 9fd77d63e773befcbf1c0e56939efd7881b52080 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 29 Oct 2025 16:43:16 +0200
Subject: [PATCH 13/18] removing the size from the icon button as it follows
 the one set to the button anyway

---
 redisinsight/ui/src/components/base/forms/buttons/Button.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx
index 42acbe0ff7..c8a0592ce4 100644
--- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx
+++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx
@@ -35,7 +35,6 @@ export const BaseButton = ({
         icon={icon}
         iconSide={iconSide}
         loading={loading}
-        size={btnSize}
       />
       {children}
       <ButtonIcon
@@ -43,7 +42,6 @@ export const BaseButton = ({
         icon={icon}
         iconSide={iconSide}
         loading={loading}
-        size={btnSize}
       />
     </Button>
   )

From 296200f3a45fa9f28104cca14e70b9ec02c2a843 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 30 Oct 2025 13:10:36 +0200
Subject: [PATCH 14/18] make title one liner - change badge color

---
 .../connectivity-options/ConnectivityOptions.tsx       | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
index b784a98d60..ff51e3195a 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
@@ -72,9 +72,7 @@ const ConnectivityOptions = (props: Props) => {
   return (
     <>
       <section className={styles.cloudSection}>
-        <Text color="primary">
-          Get started with Redis Cloud account
-        </Text>
+        <Text color="primary">Get started with Redis Cloud account</Text>
         <Spacer />
         <Grid gap="l" columns={3} responsive>
           <FlexItem>
@@ -108,7 +106,7 @@ const ConnectivityOptions = (props: Props) => {
                     })}
                     target="_blank"
                   >
-                    <RiBadge className="freeBadge" label="Free" />
+                    <RiBadge className="freeBadge" label="Free" variant="notice" />
                     <Col align="center">
                       <RocketIcon className="btnIcon" />
                       New database
@@ -123,9 +121,7 @@ const ConnectivityOptions = (props: Props) => {
       </section>
       <Spacer size="xxl" />
       <section>
-        <Text color="primary">
-          More connectivity options
-        </Text>
+        <Text color="primary">More connectivity options</Text>
         <Spacer />
         <Grid gap="l" responsive columns={3}>
           {CONNECTIVITY_OPTIONS.map(({ id, type, title, icon }) => (

From c9d4b4da6640660400717ff15f2298e1f4460f59 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 30 Oct 2025 13:11:11 +0200
Subject: [PATCH 15/18] remove bunch of unused styles

---
 .../ConnectivityOptions.tsx                   | 21 +++------
 .../connectivity-options/styles.module.scss   | 44 -------------------
 2 files changed, 7 insertions(+), 58 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
index ff51e3195a..6dbbe1cad6 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import cx from 'classnames'
 import styled from 'styled-components'
 
 import { AddDbType } from 'uiSrc/pages/home/constants'
@@ -16,7 +15,6 @@ import { RocketIcon } from 'uiSrc/components/base/icons'
 import { Col, FlexItem, Grid } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
-import { Title } from 'uiSrc/components/base/text/Title'
 import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 import { Text } from 'uiSrc/components/base/text/Text'
 import { Link } from 'uiSrc/components/base/link/Link'
@@ -42,27 +40,22 @@ const NewCloudLink = styled(Link)`
   width: 100%;
   height: 84px !important;
   padding: 0 12px;
-  color: var(--buttonSecondaryTextColor) !important;
   border: 1px solid ${({ theme }) => theme.semantic.color.border.primary500};
   border-radius: 5px;
+
   & .freeBadge {
     position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
+    top: 10px;
+    left: 10px;
 
     text-transform: uppercase;
-    background-color: var(--euiColorLightestShade);
-    border: 1px solid var(--euiColorPrimary);
-    border-radius: 2px !important;
+    border-radius: 3px;
   }
 
   & .btnIcon {
     margin-bottom: 8px;
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
+    width: 30px;
+    height: 30px;
   }
 `
 
@@ -82,7 +75,7 @@ const ConnectivityOptions = (props: Props) => {
               data-testid="discover-cloud-btn"
             >
               <Col align="center">
-                <CloudIcon className={styles.btnIcon} />
+                <CloudIcon />
                 Add databases
               </Col>
             </SecondaryButton>
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss
index 0011c5665f..2fcfac70f8 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/styles.module.scss
@@ -1,9 +1,3 @@
-.sectionTitle {
-  font-weight: 400 !important;
-  display: flex;
-  align-items: center;
-}
-
 .cloudSection {
   .typeBtn {
     min-width: 160px !important;
@@ -18,33 +12,11 @@
 
   border-color: var(--separatorColorLight) !important;
   color: var(--buttonSecondaryTextColor) !important;
-  //box-shadow: none !important;
-
-  &.small {
-    padding: 0 8px;
-    height: 52px !important;
-
-    :global(.euiButton__text) {
-      flex-direction: row;
-    }
-
-    .btnIcon {
-      margin-right: 8px;
-    }
-  }
 
   &:hover {
     background-color: transparent !important;
   }
 
-  :global(.euiButton__text) {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-weight: 400 !important;
-  }
-
-  &:not(.small) {
     .btnIcon {
       margin-bottom: 8px;
 
@@ -54,20 +26,4 @@
         width: 24px;
       }
     }
-  }
-
-
-
-  .freeBadge {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-
-    text-transform: uppercase;
-    background-color: var(--euiColorLightestShade);
-    border: 1px solid var(--euiColorPrimary);
-    border-radius: 2px !important;
-  }
 }

From cd2d074f647d1a627b50e1a1df44c92057b6c849 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 30 Oct 2025 14:26:45 +0200
Subject: [PATCH 16/18] remove unneeded styles for the tooltip anchor and
 replace with flex item

---
 .../components/connection-url/ConnectionUrl.tsx    | 14 +++++++++-----
 .../components/connection-url/styles.module.scss   |  6 ------
 2 files changed, 9 insertions(+), 11 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss

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 70461b4517..870e458749 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,13 +1,16 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import { FormField } 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 } from 'uiSrc/components/base/layout/flex'
+import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
 
-import styles from './styles.module.scss'
+const PointerIcon = styled(RiIcon)`
+  cursor: pointer;
+`
 
 export interface Props {
   value: string
@@ -17,12 +20,11 @@ export interface Props {
 const ConnectionUrl = ({ value, onChange }: Props) => (
   <FormField
     label={
-      <FlexGroup gap="s">
+      <FlexGroup gap="s" align="center">
         <Text>Connection URL</Text>
         <RiTooltip
           title="The following connection URLs are supported:"
           className="homePage_tooltip"
-          anchorClassName={styles.infoTooltipAnchor}
           position="right"
           content={
             <ul className="homePage_toolTipUl">
@@ -41,7 +43,9 @@ const ConnectionUrl = ({ value, onChange }: Props) => (
             </ul>
           }
         >
-          <RiIcon type="InfoIcon" />
+          <FlexItem>
+            <PointerIcon type="InfoIcon" />
+          </FlexItem>
         </RiTooltip>
       </FlexGroup>
     }
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
deleted file mode 100644
index 5f74cc662d..0000000000
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/styles.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.infoTooltipAnchor {
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-}

From a1c37d710e3946dc30ef27db682e68041cf8e834 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 30 Oct 2025 14:31:08 +0200
Subject: [PATCH 17/18] revert values interface :)

---
 .../pages/home/components/add-database-screen/constants.tsx   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx
index 388b7c6434..3f971d7788 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/constants.tsx
@@ -1,6 +1,10 @@
 import { AddDbType } from 'uiSrc/pages/home/constants'
 import { DownloadIcon, IconType, RedisSoftwareIcon, ShieldIcon } from 'uiSrc/components/base/icons'
 
+export interface Values {
+  connectionURL: string
+}
+
 export interface ConnectivityOption {
   id: string
   title: string

From f1fda9cd38ac41ea53a89f3c38ab2638cc011029 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Fri, 31 Oct 2025 17:16:41 +0200
Subject: [PATCH 18/18] move the custom horizontal rule to styles.ts file

---
 .../AddDatabaseScreen.styles.ts               | 24 +++++++++++++++++
 .../add-database-screen/AddDatabaseScreen.tsx | 26 +------------------
 2 files changed, 25 insertions(+), 25 deletions(-)
 create mode 100644 redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.styles.ts

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.styles.ts b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.styles.ts
new file mode 100644
index 0000000000..599b2b57c5
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.styles.ts
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const CustomHorizontalRule = styled.div`
+  margin: 12px 0;
+  width: 100%;
+  text-align: center;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    width: 47%;
+    height: 1px;
+    background: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.neutral500};
+    position: absolute;
+    top: 50%;
+  }
+
+  &:after {
+    right: 0;
+  }
+`
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
index 828143648e..62e609e6b0 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
@@ -3,8 +3,6 @@ import { useFormik } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import { toNumber } from 'lodash'
-import styled from 'styled-components'
-import { Theme } from '@redis-ui/styles'
 
 import { Nullable, parseRedisUrl } from 'uiSrc/utils'
 import { AddDbType, DEFAULT_TIMEOUT } from 'uiSrc/pages/home/constants'
@@ -27,29 +25,7 @@ import { RiTooltip } from 'uiSrc/components'
 import ConnectivityOptions from './components/connectivity-options'
 import ConnectionUrl from './components/connection-url'
 import { Values } from './constants'
-
-const CustomHorizontalRule = styled.div`
-  margin: 12px 0;
-  width: 100%;
-  text-align: center;
-  position: relative;
-
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    width: 47%;
-    height: 1px;
-    background: ${({ theme }: { theme: Theme }) =>
-    theme.semantic.color.background.neutral500};
-    position: absolute;
-    top: 50%;
-  }
-
-  &:after {
-    right: 0;
-  }
-`
+import { CustomHorizontalRule } from './AddDatabaseScreen.styles'
 
 export interface Props {
   onSelectOption: (type: AddDbType, db: Nullable<Record<string, any>>) => void