From 6abb9d330d418ac897f8ab4ebb29a606e184b2ba Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Mon, 28 Jul 2025 15:40:17 +0300
Subject: [PATCH 01/10] create loading logo component

---
 .../display/logo-loading/RiLoadingLogo.tsx    | 49 +++++++++++++++++++
 .../ui/src/components/base/layout/index.ts    |  2 +
 2 files changed, 51 insertions(+)
 create mode 100644 redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx

diff --git a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
new file mode 100644
index 0000000000..a5cab510c0
--- /dev/null
+++ b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
@@ -0,0 +1,49 @@
+import React, { HTMLAttributes } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const bounce = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-15px);
+  }
+`
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export interface LogoLoadingProps extends HTMLAttributes<HTMLImageElement> {
+  src: string
+  size?: number
+  bounceSpeed?: number
+  alt?: string
+}
+
+const BouncingLogo = styled.img<
+  Omit<LogoLoadingProps, 'size' | 'bounceSpeed'> & {
+    size?: number
+    bounceSpeed: number
+  }
+>`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+  animation: ${bounce} ${({ bounceSpeed }) => bounceSpeed}s ease-in-out infinite;
+`
+
+const RiLoadingLogo = ({
+  src,
+  size = 30,
+  bounceSpeed = 1,
+  alt = 'Loading logo',
+}: LogoLoadingProps) => (
+  <Wrapper>
+    <BouncingLogo src={src} size={size} bounceSpeed={bounceSpeed} alt={alt} />
+  </Wrapper>
+)
+
+export default RiLoadingLogo
diff --git a/redisinsight/ui/src/components/base/layout/index.ts b/redisinsight/ui/src/components/base/layout/index.ts
index 6b8676cf8c..37eac85078 100644
--- a/redisinsight/ui/src/components/base/layout/index.ts
+++ b/redisinsight/ui/src/components/base/layout/index.ts
@@ -3,6 +3,7 @@ import LoadingContent from './loading-content/LoadingContent'
 import ResizableContainer from './resize/container/ResizableContainer'
 import ResizablePanel from './resize/panel/ResizablePanel'
 import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
+import RiLoadingLogo from '../display/logo-loading/RiLoadingLogo'
 
 
 export * from './card'
@@ -14,4 +15,5 @@ export {
   ResizablePanel,
   ResizableContainer,
   ResizablePanelHandle,
+  RiLoadingLogo
 }

From 51db5fb7a269880da6592d59c5144821b913f363 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Mon, 28 Jul 2025 15:52:06 +0300
Subject: [PATCH 02/10] move import from layout to display

---
 redisinsight/ui/src/components/base/layout/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/redisinsight/ui/src/components/base/layout/index.ts b/redisinsight/ui/src/components/base/layout/index.ts
index 37eac85078..6b8676cf8c 100644
--- a/redisinsight/ui/src/components/base/layout/index.ts
+++ b/redisinsight/ui/src/components/base/layout/index.ts
@@ -3,7 +3,6 @@ import LoadingContent from './loading-content/LoadingContent'
 import ResizableContainer from './resize/container/ResizableContainer'
 import ResizablePanel from './resize/panel/ResizablePanel'
 import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
-import RiLoadingLogo from '../display/logo-loading/RiLoadingLogo'
 
 
 export * from './card'
@@ -15,5 +14,4 @@ export {
   ResizablePanel,
   ResizableContainer,
   ResizablePanelHandle,
-  RiLoadingLogo
 }

From 2ee4009ad58289cb348754eee06be5c3084cc835 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Mon, 28 Jul 2025 15:52:24 +0300
Subject: [PATCH 03/10] add sizing to the component

---
 .../display/logo-loading/RiLoadingLogo.tsx    | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
index a5cab510c0..ae08f7ad02 100644
--- a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
+++ b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled, { css, keyframes } from 'styled-components'
 
 const bounce = keyframes`
   0%, 100% {
@@ -11,33 +11,48 @@ const bounce = keyframes`
   }
 `
 
-const Wrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-`
+export const SIZES = ['m', 'l', 'xl'] as const
+
+const logoSizeStyles = {
+  m: css`
+    width: var(--size-m);
+  `,
+  l: css`
+    width: var(--size-l);
+  `,
+  xl: css`
+    width: var(--size-xl);
+  `,
+}
+
+export type RiLoadingLogoSize = (typeof SIZES)[number]
 
 export interface LogoLoadingProps extends HTMLAttributes<HTMLImageElement> {
   src: string
-  size?: number
+  size?: RiLoadingLogoSize
   bounceSpeed?: number
   alt?: string
 }
 
+const Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`
+
 const BouncingLogo = styled.img<
   Omit<LogoLoadingProps, 'size' | 'bounceSpeed'> & {
-    size?: number
+    size?: RiLoadingLogoSize
     bounceSpeed: number
   }
 >`
-  width: ${({ size }) => size}px;
-  height: ${({ size }) => size}px;
+  ${({ size = 'xl' }) => logoSizeStyles[size]};
   animation: ${bounce} ${({ bounceSpeed }) => bounceSpeed}s ease-in-out infinite;
 `
 
 const RiLoadingLogo = ({
   src,
-  size = 30,
+  size = 'xl',
   bounceSpeed = 1,
   alt = 'Loading logo',
 }: LogoLoadingProps) => (

From ceb187e9492400b51dd608d9522dc599c46cab1c Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 29 Jul 2025 11:28:38 +0300
Subject: [PATCH 04/10] use $ for size and bounceSpeed instead of Omit

---
 .../display/logo-loading/RiLoadingLogo.tsx    | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
index ae08f7ad02..58ddafec40 100644
--- a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
+++ b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
@@ -29,8 +29,8 @@ export type RiLoadingLogoSize = (typeof SIZES)[number]
 
 export interface LogoLoadingProps extends HTMLAttributes<HTMLImageElement> {
   src: string
-  size?: RiLoadingLogoSize
-  bounceSpeed?: number
+  $size?: RiLoadingLogoSize
+  $bounceSpeed?: number
   alt?: string
 }
 
@@ -40,24 +40,25 @@ const Wrapper = styled.div`
   justify-content: center;
 `
 
-const BouncingLogo = styled.img<
-  Omit<LogoLoadingProps, 'size' | 'bounceSpeed'> & {
-    size?: RiLoadingLogoSize
-    bounceSpeed: number
-  }
->`
-  ${({ size = 'xl' }) => logoSizeStyles[size]};
-  animation: ${bounce} ${({ bounceSpeed }) => bounceSpeed}s ease-in-out infinite;
+const BouncingLogo = styled.img<LogoLoadingProps>`
+  ${({ $size = 'xl' }) => logoSizeStyles[$size]};
+  animation: ${bounce} ${({ $bounceSpeed }) => $bounceSpeed}s ease-in-out
+    infinite;
 `
 
 const RiLoadingLogo = ({
   src,
-  size = 'xl',
-  bounceSpeed = 1,
+  $size = 'xl',
+  $bounceSpeed = 1,
   alt = 'Loading logo',
 }: LogoLoadingProps) => (
   <Wrapper>
-    <BouncingLogo src={src} size={size} bounceSpeed={bounceSpeed} alt={alt} />
+    <BouncingLogo
+      src={src}
+      $size={$size}
+      $bounceSpeed={$bounceSpeed}
+      alt={alt}
+    />
   </Wrapper>
 )
 

From 88b966b1222036e2cf3cfbdac53208f8b8aac267 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 29 Jul 2025 22:13:17 +0300
Subject: [PATCH 05/10] implement redis theme sizing

---
 .../display/logo-loading/RiLoadingLogo.tsx    | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
index 58ddafec40..29eb932f73 100644
--- a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
+++ b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import styled, { css, keyframes } from 'styled-components'
+import styled, { keyframes } from 'styled-components'
 
 const bounce = keyframes`
   0%, 100% {
@@ -11,19 +11,7 @@ const bounce = keyframes`
   }
 `
 
-export const SIZES = ['m', 'l', 'xl'] as const
-
-const logoSizeStyles = {
-  m: css`
-    width: var(--size-m);
-  `,
-  l: css`
-    width: var(--size-l);
-  `,
-  xl: css`
-    width: var(--size-xl);
-  `,
-}
+export const SIZES = ['M', 'L', 'XL', 'XXL'] as const
 
 export type RiLoadingLogoSize = (typeof SIZES)[number]
 
@@ -41,14 +29,15 @@ const Wrapper = styled.div`
 `
 
 const BouncingLogo = styled.img<LogoLoadingProps>`
-  ${({ $size = 'xl' }) => logoSizeStyles[$size]};
+  width: ${({ theme, $size = 'XL' }) =>
+    theme.components.iconButton.sizes[$size].width};
   animation: ${bounce} ${({ $bounceSpeed }) => $bounceSpeed}s ease-in-out
     infinite;
 `
 
 const RiLoadingLogo = ({
   src,
-  $size = 'xl',
+  $size = 'XL',
   $bounceSpeed = 1,
   alt = 'Loading logo',
 }: LogoLoadingProps) => (

From 5667ac206214bb144c86d1f4009ed1e14d6b5ab8 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 29 Jul 2025 22:18:11 +0300
Subject: [PATCH 06/10] Rename folder logo-loading -> loading-logo

---
 .../display/logo-loading/RiLoadingLogo.tsx    | 54 -------------------
 1 file changed, 54 deletions(-)
 delete mode 100644 redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx

diff --git a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx b/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
deleted file mode 100644
index 29eb932f73..0000000000
--- a/redisinsight/ui/src/components/base/display/logo-loading/RiLoadingLogo.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { HTMLAttributes } from 'react'
-import styled, { keyframes } from 'styled-components'
-
-const bounce = keyframes`
-  0%, 100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-15px);
-  }
-`
-
-export const SIZES = ['M', 'L', 'XL', 'XXL'] as const
-
-export type RiLoadingLogoSize = (typeof SIZES)[number]
-
-export interface LogoLoadingProps extends HTMLAttributes<HTMLImageElement> {
-  src: string
-  $size?: RiLoadingLogoSize
-  $bounceSpeed?: number
-  alt?: string
-}
-
-const Wrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-`
-
-const BouncingLogo = styled.img<LogoLoadingProps>`
-  width: ${({ theme, $size = 'XL' }) =>
-    theme.components.iconButton.sizes[$size].width};
-  animation: ${bounce} ${({ $bounceSpeed }) => $bounceSpeed}s ease-in-out
-    infinite;
-`
-
-const RiLoadingLogo = ({
-  src,
-  $size = 'XL',
-  $bounceSpeed = 1,
-  alt = 'Loading logo',
-}: LogoLoadingProps) => (
-  <Wrapper>
-    <BouncingLogo
-      src={src}
-      $size={$size}
-      $bounceSpeed={$bounceSpeed}
-      alt={alt}
-    />
-  </Wrapper>
-)
-
-export default RiLoadingLogo

From 366a4725e51c6df01958d570238022d46fbda13d Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 30 Jul 2025 17:58:15 +0300
Subject: [PATCH 07/10] create and export RiEmptyPrompt component

---
 .../layout/empty-prompt/RiEmptyPrompt.tsx     | 39 +++++++++++++++++++
 .../ui/src/components/base/layout/index.ts    |  3 +-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx

diff --git a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
new file mode 100644
index 0000000000..d109f67a19
--- /dev/null
+++ b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
@@ -0,0 +1,39 @@
+import React, { HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+interface RiEmptyPromptProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  body?: React.ReactNode
+  title?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+const StyledEmptyPrompt = styled.div`
+  max-width: 36em;
+  text-align: center;
+  padding: 24px;
+  margin: auto;
+`
+
+const Spacer = styled.div`
+  height: ${({ theme }) => theme.core.space.space100};
+`
+
+const RiEmptyPrompt = ({ body, title, icon }: RiEmptyPromptProps) => (
+  <StyledEmptyPrompt>
+    {icon}
+    {title && (
+      <>
+        <Spacer />
+        {title}
+      </>
+    )}
+    {body && (
+      <>
+        <Spacer />
+        {body}
+      </>
+    )}
+  </StyledEmptyPrompt>
+)
+
+export default RiEmptyPrompt
diff --git a/redisinsight/ui/src/components/base/layout/index.ts b/redisinsight/ui/src/components/base/layout/index.ts
index 6b8676cf8c..2d630f0614 100644
--- a/redisinsight/ui/src/components/base/layout/index.ts
+++ b/redisinsight/ui/src/components/base/layout/index.ts
@@ -3,7 +3,7 @@ import LoadingContent from './loading-content/LoadingContent'
 import ResizableContainer from './resize/container/ResizableContainer'
 import ResizablePanel from './resize/panel/ResizablePanel'
 import ResizablePanelHandle from './resize/handle/ResizablePanelHandle'
-
+import RiEmptyPrompt from './empty-prompt/RiEmptyPrompt'
 
 export * from './card'
 export * from './horizontal-spacer'
@@ -14,4 +14,5 @@ export {
   ResizablePanel,
   ResizableContainer,
   ResizablePanelHandle,
+  RiEmptyPrompt,
 }

From 5ccf68146c15916b1f12ebde003e29a34f4a726b Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 30 Jul 2025 17:59:31 +0300
Subject: [PATCH 08/10] replace the eui component with the new one

---
 .../ui/src/components/page-placeholder/PagePlaceholder.tsx  | 6 +++---
 .../EnablementArea/components/EmptyPrompt/EmptyPrompt.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/redisinsight/ui/src/components/page-placeholder/PagePlaceholder.tsx b/redisinsight/ui/src/components/page-placeholder/PagePlaceholder.tsx
index 2d1a884197..10dd4ae605 100644
--- a/redisinsight/ui/src/components/page-placeholder/PagePlaceholder.tsx
+++ b/redisinsight/ui/src/components/page-placeholder/PagePlaceholder.tsx
@@ -1,18 +1,18 @@
 import React from 'react'
-import { EuiEmptyPrompt } from '@elastic/eui'
+
 import LogoIcon from 'uiSrc/assets/img/logo_small.svg'
 import { getConfig } from 'uiSrc/config'
 import { RiLoadingLogo } from 'uiSrc/components/base/display'
+import { RiEmptyPrompt } from 'uiSrc/components/base/layout'
 
 const riConfig = getConfig()
 
 const PagePlaceholder = () => (
   <>
     {riConfig.app.env !== 'development' && (
-      <EuiEmptyPrompt
+      <RiEmptyPrompt
         data-testid="page-placeholder"
         icon={<RiLoadingLogo src={LogoIcon} $size="XXL" />}
-        titleSize="s"
       />
     )}
   </>
diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/EmptyPrompt/EmptyPrompt.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/EmptyPrompt/EmptyPrompt.tsx
index d054a96fa4..73e8b82fdd 100644
--- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/EmptyPrompt/EmptyPrompt.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/EmptyPrompt/EmptyPrompt.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
-import { EuiEmptyPrompt } from '@elastic/eui'
 
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { Link } from 'uiSrc/components/base/link/Link'
+import { RiEmptyPrompt } from 'uiSrc/components/base/layout'
 import styles from './styles.module.scss'
 
 const EmptyPrompt = () => (
   <div className={styles.container}>
-    <EuiEmptyPrompt
+    <RiEmptyPrompt
       data-testid="enablement-area__empty-prompt"
       icon={<RiIcon type="ToastDangerIcon" color="danger600" size="l" />}
       title={<h2>No information to display</h2>}

From b52a7cbb91753ce88beec94507f323ee0365f1bc Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Thu, 31 Jul 2025 10:22:35 +0300
Subject: [PATCH 09/10] Include the ...rest in the empty prompt component

---
 .../src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
index d109f67a19..0df22c4518 100644
--- a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
+++ b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
@@ -18,8 +18,8 @@ const Spacer = styled.div`
   height: ${({ theme }) => theme.core.space.space100};
 `
 
-const RiEmptyPrompt = ({ body, title, icon }: RiEmptyPromptProps) => (
-  <StyledEmptyPrompt>
+const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => (
+  <StyledEmptyPrompt {...rest}>
     {icon}
     {title && (
       <>

From cc6c1413353bc7d3ab97370d938e9c97f251fe95 Mon Sep 17 00:00:00 2001
From: Kristiyan Ivanov <k.ivanow@gmail.com>
Date: Fri, 1 Aug 2025 12:44:23 +0300
Subject: [PATCH 10/10] Extended spacer to support theme sizes

---
 .../layout/empty-prompt/RiEmptyPrompt.tsx     | 18 ++++++-----
 .../base/layout/spacer/spacer.styles.ts       | 30 +++++++++++++++++--
 .../components/base/layout/spacer/spacer.tsx  | 21 ++++++++-----
 3 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
index 0df22c4518..26205acc6b 100644
--- a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
+++ b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx
@@ -1,5 +1,7 @@
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
+import { useTheme } from '@redis-ui/styles'
+import { Spacer } from '../spacer'
 
 interface RiEmptyPromptProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   body?: React.ReactNode
@@ -14,26 +16,26 @@ const StyledEmptyPrompt = styled.div`
   margin: auto;
 `
 
-const Spacer = styled.div`
-  height: ${({ theme }) => theme.core.space.space100};
-`
+const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => {
+  const theme = useTheme()
 
-const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => (
-  <StyledEmptyPrompt {...rest}>
+  return (<StyledEmptyPrompt {...rest}>
     {icon}
     {title && (
       <>
-        <Spacer />
+        <Spacer size={theme.core.space.space100} />
         {title}
       </>
     )}
     {body && (
       <>
-        <Spacer />
+        <Spacer size={theme.core.space.space100} />
         {body}
       </>
     )}
   </StyledEmptyPrompt>
-)
+  )
+}
+  
 
 export default RiEmptyPrompt
diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts b/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts
index 54d42335b2..a36a1dad61 100644
--- a/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts
+++ b/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts
@@ -1,13 +1,20 @@
 import { HTMLAttributes, ReactNode } from 'react'
 import styled from 'styled-components'
 import { CommonProps } from 'uiSrc/components/base/theme/types'
+import { theme } from 'uiSrc/components/base/theme'
 
 export const SpacerSizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const
 export type SpacerSize = (typeof SpacerSizes)[number]
+
+// Extract only the spaceXXX keys from the theme
+export type ThemeSpacingKey = Extract<keyof typeof theme.semantic.core.space, `space${string}`>
+// Allow direct theme spacing values
+export type ThemeSpacingValue = typeof theme.semantic.core.space[ThemeSpacingKey]
+
 export type SpacerProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     children?: ReactNode
-    size?: SpacerSize
+    size?: SpacerSize | ThemeSpacingKey | ThemeSpacingValue
   }
 
 export const spacerStyles = {
@@ -20,7 +27,26 @@ export const spacerStyles = {
   xxl: 'var(--size-xxl)',
 }
 
+const isThemeSpacingKey = (
+  size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue
+): size is ThemeSpacingKey => typeof size === 'string' && size in theme.semantic.core.space
+
+const getSpacingValue = (
+  size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue, 
+): string => {
+  const themeSpacingValues = Object.values(theme.semantic.core.space)
+  if (typeof size === 'string' && themeSpacingValues.includes(size)) {
+    return size
+  }
+  
+  if (isThemeSpacingKey(size)) {
+    return theme?.semantic?.core?.space?.[size] || '0'
+  }
+
+  return spacerStyles[size as SpacerSize]
+}
+
 export const StyledSpacer = styled.div<SpacerProps>`
   flex-shrink: 0;
-  height: ${({ size = 'l' }) => spacerStyles[size]};
+  height: ${({ size = 'l' }) => getSpacingValue(size)};
 `
diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx b/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx
index b811b91abd..0f820b3039 100644
--- a/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx
+++ b/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
+import { useTheme } from '@redis-ui/styles'
 import {
   SpacerProps,
   StyledSpacer,
@@ -9,17 +10,21 @@ import {
  * A simple spacer component that can be used to add vertical spacing between
  * other components. The size of the spacer can be specified using the `size`
  * prop, which can be one of the following values:
- *   - 'xs' = 4px
- *   - 's' = 8px
- *   - 'm' = 12px
- *   - 'l' = 16px
- *   - 'xl' = 24px
- *   - 'xxl' = 32px.
+ *   - Legacy sizes: 'xs' = 4px, 's' = 8px, 'm' = 12px, 'l' = 16px, 'xl' = 24px, 'xxl' = 32px
+ *   - Theme spacing sizes: Any key from theme.semantic.core.space (e.g., 'space000', 'space010', 
+ *     'space025', 'space050', 'space100', 'space150', 'space200', 'space250', 'space300', 
+ *     'space400', 'space500', 'space550', 'space600', 'space800', etc.)
+ *
+ *   The theme spacing tokens are dynamically extracted from the theme, ensuring consistency
+ *   and automatic updates when the theme changes.
  *
  *   The default value for `size` is 'l'.
  */
-export const Spacer = ({ className, children, ...rest }: SpacerProps) => (
-  <StyledSpacer {...rest} className={cx('RI-spacer', className)}>
+export const Spacer = ({ className, children, ...rest }: SpacerProps) => {
+  const theme = useTheme()
+  return (
+    <StyledSpacer {...rest} className={cx('RI-spacer', className)} theme={theme}>
     {children}
   </StyledSpacer>
 )
+}
\ No newline at end of file