diff --git a/redisinsight/ui/src/components/charts/donut-chart/DonutChart.spec.tsx b/redisinsight/ui/src/components/charts/donut-chart/DonutChart.spec.tsx
index a574e157ef..36d39b6c9e 100644
--- a/redisinsight/ui/src/components/charts/donut-chart/DonutChart.spec.tsx
+++ b/redisinsight/ui/src/components/charts/donut-chart/DonutChart.spec.tsx
@@ -1,4 +1,6 @@
+import { sumBy } from 'lodash'
 import React from 'react'
+import { getPercentage } from 'uiSrc/utils/numbers'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
 import DonutChart, { ChartData } from './DonutChart'
@@ -12,6 +14,8 @@ const mockData: ChartData[] = [
   { value: 15, name: 'F', color: [50, 50, 50] },
 ]
 
+const sum = sumBy(mockData, 'value')
+
 describe('DonutChart', () => {
   it('should render with empty data', () => {
     expect(render(<DonutChart data={[]} />)).toBeTruthy()
@@ -71,11 +75,27 @@ describe('DonutChart', () => {
   it('should call render tooltip and label methods', () => {
     const renderLabel = jest.fn()
     const renderTooltip = jest.fn()
-    render(<DonutChart data={mockData} renderLabel={renderLabel} renderTooltip={renderTooltip} />)
-    expect(renderLabel).toBeCalled()
+    render(
+      <DonutChart
+        data={mockData}
+        renderLabel={renderLabel}
+        renderTooltip={renderTooltip}
+        config={{ percentToShowLabel: 0 }}
+      />
+    )
+    expect(renderLabel).toBeCalledTimes(mockData.length)
+
+    fireEvent.mouseEnter(screen.getByTestId('arc-A-1'))
+    expect(renderTooltip).toBeCalledWith(mockData[0])
+  })
+
+  it('should render provided tooltip', () => {
+    const renderTooltip = () => (<span data-testid="label" />)
+
+    render(<DonutChart data={mockData} renderTooltip={renderTooltip} />)
 
     fireEvent.mouseEnter(screen.getByTestId('arc-A-1'))
-    expect(renderTooltip).toBeCalled()
+    expect(screen.getByTestId('label')).toBeInTheDocument()
   })
 
   it('should set tooltip as visible on hover and hidden on leave', () => {
@@ -87,4 +107,12 @@ describe('DonutChart', () => {
     fireEvent.mouseLeave(screen.getByTestId('arc-A-1'))
     expect(screen.getByTestId('chart-value-tooltip')).not.toBeVisible()
   })
+
+  it('should display values with percentage', () => {
+    render(<DonutChart data={mockData} labelAs="percentage" config={{ percentToShowLabel: 0 }} />)
+
+    mockData.forEach(({ value, name }) => {
+      expect(screen.getByTestId(`label-${name}-${value}`)).toHaveTextContent(`: ${getPercentage(value, sum)}%`)
+    })
+  })
 })
diff --git a/redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx b/redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx
index aed642d73a..aadfcade78 100644
--- a/redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx
+++ b/redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import * as d3 from 'd3'
-import { sumBy } from 'lodash'
+import { isString, sumBy } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { Nullable, truncateNumberToRange } from 'uiSrc/utils'
@@ -12,7 +12,7 @@ import styles from './styles.module.scss'
 export interface ChartData {
   value: number
   name: string
-  color: RGBColor
+  color: RGBColor | string
   meta?: {
     [key: string]: any
   }
@@ -61,7 +61,7 @@ const DonutChart = (props: IProps) => {
   const margin = config?.margin || 98
   const radius = config?.radius || (width / 2 - margin)
   const arcWidth = config?.arcWidth || 8
-  const percentToShowLabel = config?.percentToShowLabel || 5
+  const percentToShowLabel = config?.percentToShowLabel ?? 5
 
   const [hoveredData, setHoveredData] = useState<Nullable<ChartData>>(null)
   const svgRef = useRef<SVGSVGElement>(null)
@@ -113,12 +113,12 @@ const DonutChart = (props: IProps) => {
   }
 
   const isShowLabel = (d: d3.PieArcDatum<ChartData>) =>
-    d.endAngle - d.startAngle > (Math.PI * 2) / (100 / percentToShowLabel)
+    (percentToShowLabel > 0 ? d.endAngle - d.startAngle > (Math.PI * 2) / (100 / percentToShowLabel) : true)
 
   const getLabelPosition = (d: d3.PieArcDatum<ChartData>) => {
     const [x, y] = arc.centroid(d)
     const h = Math.sqrt(x * x + y * y)
-    return `translate(${(x / h) * (radius + 16)}, ${((y + 4) / h) * (radius + 16)})`
+    return `translate(${(x / h) * (radius + 12)}, ${((y + 4) / h) * (radius + 12)})`
   }
 
   useEffect(() => {
@@ -147,7 +147,7 @@ const DonutChart = (props: IProps) => {
       .append('path')
       .attr('data-testid', (d) => `arc-${d.data.name}-${d.data.value}`)
       .attr('d', arc)
-      .attr('fill', (d) => rgb(d.data.color))
+      .attr('fill', (d) => (isString(d.data.color) ? d.data.color : rgb(d.data.color)))
       .attr('class', cx(styles.arc, classNames?.arc))
       .on('mouseenter mousemove', onMouseEnterSlice)
       .on('mouseleave', onMouseLeaveSlice)
diff --git a/redisinsight/ui/src/components/charts/donut-chart/styles.module.scss b/redisinsight/ui/src/components/charts/donut-chart/styles.module.scss
index ed34a35b87..ca201fc111 100644
--- a/redisinsight/ui/src/components/charts/donut-chart/styles.module.scss
+++ b/redisinsight/ui/src/components/charts/donut-chart/styles.module.scss
@@ -23,6 +23,7 @@
   fill: var(--euiTextSubduedColor);
   font-size: 12px;
   font-weight: bold;
+  letter-spacing: -0.12px !important;
 
   .chartLabelValue {
     font-weight: normal;
diff --git a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx
index f6a9ad1a8c..f613c716eb 100644
--- a/redisinsight/ui/src/components/group-badge/GroupBadge.tsx
+++ b/redisinsight/ui/src/components/group-badge/GroupBadge.tsx
@@ -15,7 +15,7 @@ export interface Props {
 
 const GroupBadge = ({ type, name = '', className = '', onDelete, compressed }: Props) => (
   <EuiBadge
-    style={{ backgroundColor: GROUP_TYPES_COLORS[type] ?? '#14708D' }}
+    style={{ backgroundColor: GROUP_TYPES_COLORS[type] ?? 'var(--defaultTypeColor)' }}
     className={cx(
       styles.badgeWrapper,
       className,
diff --git a/redisinsight/ui/src/constants/keys.ts b/redisinsight/ui/src/constants/keys.ts
index 12aaaa8d66..51266504ba 100644
--- a/redisinsight/ui/src/constants/keys.ts
+++ b/redisinsight/ui/src/constants/keys.ts
@@ -47,6 +47,8 @@ export const GROUP_TYPES_DISPLAY = Object.freeze({
   [CommandGroup.CuckooFilter]: 'Cuckoo Filter',
 })
 
+export type GroupTypesDisplay = keyof (typeof GROUP_TYPES_DISPLAY)
+
 // Enums don't allow to use dynamic key
 export const GROUP_TYPES_COLORS = Object.freeze({
   [KeyTypes.Hash]: 'var(--typeHashColor)',
@@ -72,6 +74,8 @@ export const GROUP_TYPES_COLORS = Object.freeze({
   [CommandGroup.HyperLogLog]: 'var(--groupHyperLolLogColor)',
 })
 
+export type GroupTypesColors = keyof (typeof GROUP_TYPES_COLORS)
+
 export type KeyTypesActions = {
   [key: string]: {
     addItems?: {
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.tsx
index cb4d1b68c4..29e479db16 100644
--- a/redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.tsx
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/analysis-data-view/AnalysisDataView.tsx
@@ -6,6 +6,7 @@ import { emptyMessageContent } from 'uiSrc/constants'
 
 import EmptyAnalysisMessage from '../empty-analysis-message'
 import TopNamespaceView from '../top-namespace-view'
+import SummaryPerData from '../summary-per-data'
 import styles from '../../styles.module.scss'
 
 export interface Props {
@@ -34,7 +35,10 @@ const AnalysisDataView = (props: Props) => {
         />
       )}
       <div className={cx(styles.grid, styles.content)}>
-        <TopNamespaceView data={data} loading={loading} />
+        <div>
+          <SummaryPerData data={data} loading={loading} />
+          <TopNamespaceView data={data} loading={loading} />
+        </div>
       </div>
     </>
   )
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.spec.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.spec.tsx
new file mode 100644
index 0000000000..861e0f7af9
--- /dev/null
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.spec.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import { DatabaseAnalysis, SimpleTypeSummary } from 'apiSrc/modules/database-analysis/models'
+
+import SummaryPerData from './SummaryPerData'
+
+const mockData = {
+  totalMemory: {
+    total: 75,
+    types: [
+      {
+        type: 'hash',
+        total: 18
+      },
+      {
+        type: 'TSDB-TYPE',
+        total: 11
+      },
+      {
+        type: 'string',
+        total: 10
+      },
+      {
+        type: 'list',
+        total: 9
+      },
+      {
+        type: 'stream',
+        total: 8
+      },
+      {
+        type: 'zset',
+        total: 8
+      },
+      {
+        type: 'set',
+        total: 7
+      },
+      {
+        type: 'graphdata',
+        total: 2
+      },
+      {
+        type: 'ReJSON-RL',
+        total: 1
+      },
+      {
+        type: 'MBbloom--',
+        total: 1
+      }
+    ]
+  },
+  totalKeys: {
+    total: 1168424,
+    types: [
+      {
+        type: 'hash',
+        total: 572813
+      },
+      {
+        type: 'zset',
+        total: 233571
+      },
+      {
+        type: 'set',
+        total: 138184
+      },
+      {
+        type: 'list',
+        total: 95886
+      },
+      {
+        type: 'stream',
+        total: 79532
+      },
+      {
+        type: 'TSDB-TYPE',
+        total: 47143
+      },
+      {
+        type: 'string',
+        total: 891
+      },
+      {
+        type: 'MBbloom--',
+        total: 272
+      },
+      {
+        type: 'graphdata',
+        total: 72
+      },
+      {
+        type: 'ReJSON-RL',
+        total: 60
+      }
+    ]
+  }
+} as DatabaseAnalysis
+
+const getName = (t: SimpleTypeSummary) =>
+  (t.type in GROUP_TYPES_DISPLAY ? (GROUP_TYPES_DISPLAY as any)[t.type] : t.type)
+
+describe('SummaryPerData', () => {
+  it('should render', () => {
+    expect(render(<SummaryPerData data={mockData} loading={false} />)).toBeTruthy()
+  })
+
+  it('should render nothing without data', () => {
+    render(<SummaryPerData data={null} loading={false} />)
+
+    expect(screen.queryByTestId('summary-per-data-loading')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('summary-per-data')).not.toBeInTheDocument()
+  })
+
+  it('should render loading', () => {
+    render(<SummaryPerData data={null} loading />)
+
+    expect(screen.getByTestId('summary-per-data-loading')).toBeInTheDocument()
+  })
+
+  it('should render charts', () => {
+    render(<SummaryPerData data={mockData} loading={false} />)
+    expect(screen.getByTestId('donut-memory')).toBeInTheDocument()
+    expect(screen.queryByTestId('donut-keys')).toBeInTheDocument()
+  })
+
+  it('should render chart arcs', () => {
+    render(<SummaryPerData data={mockData} loading={false} />)
+
+    mockData.totalKeys.types.forEach((t) => {
+      expect(screen.getByTestId(`arc-${getName(t)}-${t.total}`)).toBeInTheDocument()
+    })
+
+    mockData.totalMemory.types.forEach((t) => {
+      expect(screen.getByTestId(`arc-${getName(t)}-${t.total}`)).toBeInTheDocument()
+    })
+  })
+
+  it('should render chart labels', () => {
+    render(<SummaryPerData data={mockData} loading={false} />)
+
+    mockData.totalKeys.types.forEach((t) => {
+      expect(screen.getByTestId(`label-${getName(t)}-${t.total}`)).toBeInTheDocument()
+    })
+
+    mockData.totalMemory.types.forEach((t) => {
+      expect(screen.getByTestId(`label-${getName(t)}-${t.total}`)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx
new file mode 100644
index 0000000000..59ba4af422
--- /dev/null
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx
@@ -0,0 +1,128 @@
+import { EuiIcon, EuiTitle } from '@elastic/eui'
+import cx from 'classnames'
+import React, { useEffect, useState } from 'react'
+
+import { DonutChart } from 'uiSrc/components/charts'
+import { ChartData } from 'uiSrc/components/charts/donut-chart/DonutChart'
+import { KeyIconSvg, MemoryIconSvg } from 'uiSrc/components/database-overview/components/icons'
+import { GROUP_TYPES_COLORS, GROUP_TYPES_DISPLAY, GroupTypesColors, GroupTypesDisplay } from 'uiSrc/constants'
+import { formatBytes, Nullable } from 'uiSrc/utils'
+import { getPercentage, numberWithSpaces } from 'uiSrc/utils/numbers'
+
+import { DatabaseAnalysis, SimpleTypeSummary } from 'apiSrc/modules/database-analysis/models'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  data: Nullable<DatabaseAnalysis>
+  loading: boolean
+}
+
+const SummaryPerData = ({ data, loading }: Props) => {
+  const { totalMemory, totalKeys } = data || {}
+  const [memoryData, setMemoryData] = useState<ChartData[]>([])
+  const [keysData, setKeysData] = useState<ChartData[]>([])
+
+  const getChartData = (t: SimpleTypeSummary) => ({
+    value: t.total,
+    name: t.type in GROUP_TYPES_DISPLAY ? GROUP_TYPES_DISPLAY[t.type as GroupTypesDisplay] : t.type,
+    color: t.type in GROUP_TYPES_COLORS ? GROUP_TYPES_COLORS[t.type as GroupTypesColors] : 'var(--defaultTypeColor)',
+    meta: { ...t }
+  })
+
+  useEffect(() => {
+    if (data) {
+      setMemoryData(totalMemory?.types?.map(getChartData) as ChartData[])
+      setKeysData(totalKeys?.types?.map(getChartData) as ChartData[])
+    }
+  }, [data])
+
+  if (loading && !totalMemory && !totalKeys) {
+    return (
+      <div className={cx(styles.chartsWrapper, styles.loadingWrapper)} data-testid="summary-per-data-loading">
+        <div className={styles.preloaderCircle} />
+        <div className={styles.preloaderCircle} />
+      </div>
+    )
+  }
+
+  if ((!totalMemory || memoryData.length === 0) && (!totalKeys || keysData.length === 0)) {
+    return null
+  }
+
+  const renderMemoryTooltip = (data: ChartData) => (
+    <div className={styles.labelTooltip} data-testid="tooltip-memory">
+      <b>
+        <span className={styles.tooltipKeyType} data-testid="tooltip-key-type">{data.name}: </span>
+        <span className={styles.tooltipPercentage} data-testid="tooltip-key-percent">
+          {getPercentage(data.value, totalMemory?.total)}%
+        </span>
+        <span data-testid="tooltip-total-memory">(&thinsp;{formatBytes(data.value, 3, false)}&thinsp;)</span>
+      </b>
+    </div>
+  )
+
+  const renderKeysTooltip = (data: ChartData) => (
+    <div className={styles.labelTooltip} data-testid="tooltip-keys">
+      <b>
+        <span className={styles.tooltipKeyType} data-testid="tooltip-key-type">{data.name}: </span>
+        <span className={styles.tooltipPercentage} data-testid="tooltip-key-percent">
+          {getPercentage(data.value, totalKeys?.total)}%
+        </span>
+        <span data-testid="tooltip-total-keys">(&thinsp;{numberWithSpaces(data.value)}&thinsp;)</span>
+      </b>
+    </div>
+  )
+
+  return (
+    <div className={styles.wrapper} data-testid="summary-per-data">
+      <EuiTitle className="section-title">
+        <h4>SUMMARY PER DATA TYPE</h4>
+      </EuiTitle>
+      <div className={styles.chartsWrapper} data-testid="summary-per-data-charts">
+        <DonutChart
+          name="memory"
+          data={memoryData}
+          labelAs="percentage"
+          width={432}
+          config={{ radius: 94 }}
+          renderTooltip={renderMemoryTooltip}
+          title={(
+            <div className={styles.chartCenter}>
+              <div className={styles.chartTitle} data-testid="donut-title-memory">
+                <EuiIcon type={MemoryIconSvg} className={styles.icon} size="m" />
+                <EuiTitle size="xs">
+                  <span>Memory</span>
+                </EuiTitle>
+              </div>
+              <hr className={styles.titleSeparator} />
+              <div className={styles.centerCount}>{formatBytes(totalMemory?.total || 0, 3)}</div>
+            </div>
+          )}
+        />
+        <DonutChart
+          name="keys"
+          data={keysData}
+          labelAs="percentage"
+          width={432}
+          config={{ radius: 94 }}
+          renderTooltip={renderKeysTooltip}
+          title={(
+            <div className={styles.chartCenter}>
+              <div className={styles.chartTitle} data-testid="donut-title-keys">
+                <EuiIcon type={KeyIconSvg} className={styles.icon} size="m" />
+                <EuiTitle size="xs">
+                  <span>Keys</span>
+                </EuiTitle>
+              </div>
+              <hr className={styles.titleSeparator} />
+              <div className={styles.centerCount}>{numberWithSpaces(totalKeys?.total || 0)}</div>
+            </div>
+          )}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SummaryPerData
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/index.ts b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/index.ts
new file mode 100644
index 0000000000..997d27b633
--- /dev/null
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/index.ts
@@ -0,0 +1,3 @@
+import SummaryPerData from './SummaryPerData'
+
+export default SummaryPerData
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/styles.module.scss b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/styles.module.scss
new file mode 100644
index 0000000000..dc1833368e
--- /dev/null
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/styles.module.scss
@@ -0,0 +1,59 @@
+.chartsWrapper {
+  background-color: var(--euiColorLightestShade);
+  border-radius: 16px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 24px;
+  margin-top: 16px;
+  overflow: hidden;
+
+  &.loadingWrapper {
+    margin-top: 36px;
+  }
+
+  .preloaderCircle {
+    width: 180px;
+    height: 180px;
+    margin: 60px 0;
+    border-radius: 100%;
+    background-color: var(--separatorColor);
+  }
+
+  .chartCenter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .chartTitle {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      margin-right: 10px;
+    }
+  }
+
+  .titleSeparator {
+    height: 1px;
+    border: 0;
+    background-color: var(--separatorColorLight);
+    margin: 6px 0;
+    width: 60px;
+  }
+
+  .centerCount {
+    margin-top: 2px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .labelTooltip {
+    font-size: 12px;
+    .tooltipPercentage {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace-view/TopNamespaceView.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace-view/TopNamespaceView.tsx
index 8db74f98da..f4e99b5d96 100644
--- a/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace-view/TopNamespaceView.tsx
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace-view/TopNamespaceView.tsx
@@ -23,7 +23,7 @@ const TopNamespaceView = (props: Props) => {
 
   return (
     <div className={styles.topNamespaceView}>
-      <EuiTitle className={styles.sectionTitle}>
+      <EuiTitle className="section-title">
         <h4>TOP NAMESPACES</h4>
       </EuiTitle>
       <EuiButton
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/styles.module.scss b/redisinsight/ui/src/pages/databaseAnalysis/styles.module.scss
index 845f06ca74..87b53eb823 100644
--- a/redisinsight/ui/src/pages/databaseAnalysis/styles.module.scss
+++ b/redisinsight/ui/src/pages/databaseAnalysis/styles.module.scss
@@ -2,7 +2,7 @@
 @import '@elastic/eui/src/components/table/mixins';
 @import '@elastic/eui/src/global_styling/index';
 
-$breakpoint-table: 1232px;
+$breakpoint-table: 1680px;
 
 .main {
   margin: 0 16px 0;
@@ -10,7 +10,6 @@ $breakpoint-table: 1232px;
   background-color: var(--euiColorEmptyShade);
   padding: 18px 24px;
   overflow: auto;
-  scrollbar-width: thin;
 }
 
 .content {
@@ -48,7 +47,7 @@ $breakpoint-table: 1232px;
   &.textBtn:focus {
     color: var(--wbHoverIconColor) !important;
   }
-  
+
   &.activeBtn,
   &.textBtn:disabled {
     background: var(--browserComponentActive) !important;
@@ -61,7 +60,7 @@ $breakpoint-table: 1232px;
   }
 }
 
-.main .sectionTitle {
+.main :global(.section-title) {
   display: inline-block;
   font-size: 16px;
   line-height: 24px;
diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss
index c2d607ae55..48a77ce13a 100644
--- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss
+++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss
@@ -149,6 +149,7 @@
   --groupTransactionsColor: #{$groupTransactionsColor};
   --groupServerColor: #{$groupServerColor};
   --groupHyperLolLogColor: #{$groupHyperLolLogColor};
+  --defaultTypeColor: #{$defaultTypeColor};
 
   // JSON colors
   --jsonKeyNameColor: #{$jsonKeyNameColor};
diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss
index 8e193cb5c4..9e0a43444a 100644
--- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss
+++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss
@@ -109,6 +109,7 @@ $groupScriptingColor: #5d141c;
 $groupTransactionsColor: #14708d;
 $groupServerColor: #000000;
 $groupHyperLolLogColor: #3f4b5f;
+$defaultTypeColor: #AA4E4E;
 
 // JSON colors
 $jsonKeyNameColor: #c678dd;
diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss
index 34742493f6..7999eaa9bf 100644
--- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss
+++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss
@@ -151,6 +151,7 @@
   --groupTransactionsColor: #{$groupTransactionsColor};
   --groupServerColor: #{$groupServerColor};
   --groupHyperLolLogColor: #{$groupHyperLolLogColor};
+  --defaultTypeColor: #{$defaultTypeColor};
 
   // JSON colors
   --jsonKeyNameColor: #{$jsonKeyNameColor};
diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss
index 53996430d2..73e6a601aa 100644
--- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss
+++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss
@@ -106,6 +106,7 @@ $groupScriptingColor: #ffadad;
 $groupTransactionsColor: #14708d;
 $groupServerColor: #e8e8e8;
 $groupHyperLolLogColor: #3f4b5f;
+$defaultTypeColor: #E3AAAA;
 
 // JSON colors
 $jsonKeyNameColor: #a00595;