diff --git a/redisinsight/ui/src/components/divider/Divider.tsx b/redisinsight/ui/src/components/divider/Divider.tsx
index 5aa438605c..2f04d2acfe 100644
--- a/redisinsight/ui/src/components/divider/Divider.tsx
+++ b/redisinsight/ui/src/components/divider/Divider.tsx
@@ -9,9 +9,10 @@ export interface Props {
   orientation?: 'horizontal' | 'vertical',
   variant? : 'fullWidth' | 'middle' | 'half';
   className?: string;
+  style?: any
 }
 
-const Divider = ({ orientation, variant, className, color, colorVariable }: Props) => (
+const Divider = ({ orientation, variant, className, color, colorVariable, ...props }: Props) => (
   <div
     className={cx(
       styles.divider,
@@ -19,6 +20,7 @@ const Divider = ({ orientation, variant, className, color, colorVariable }: Prop
       styles[`divider-${orientation || 'horizontal'}`],
       className,
     )}
+    {...props}
   >
     <hr style={(color || colorVariable) ? { backgroundColor: color ?? `var(--${colorVariable})` } : {}} />
   </div>
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx
index 0eab86ff0c..9db1f9a16b 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/KeyDetailsHeader.tsx
@@ -13,8 +13,6 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { GroupBadge, AutoRefresh, FullScreen } from 'uiSrc/components'
 import {
   HIDE_LAST_REFRESH,
-  KeyTypes,
-  ModulesKeyTypes,
 } from 'uiSrc/constants'
 import {
   deleteSelectedKeyAction,
@@ -30,7 +28,6 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
-import { KeyDetailsHeaderFormatter } from './components/key-details-header-formatter'
 import { KeyDetailsHeaderName } from './components/key-details-header-name'
 import { KeyDetailsHeaderTTL } from './components/key-details-header-ttl'
 import { KeyDetailsHeaderDelete } from './components/key-details-header-delete'
@@ -39,7 +36,6 @@ import { KeyDetailsHeaderSizeLength } from './components/key-details-header-size
 import styles from './styles.module.scss'
 
 export interface KeyDetailsHeaderProps {
-  keyType: KeyTypes | ModulesKeyTypes
   onCloseKey: (key: RedisResponseBuffer) => void
   onRemoveKey: () => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
@@ -56,7 +52,6 @@ const KeyDetailsHeader = ({
   onCloseKey,
   onRemoveKey,
   onEditKey,
-  keyType,
   Actions,
 }: KeyDetailsHeaderProps) => {
   const { refreshing, loading, lastRefreshTime, isRefreshDisabled } = useSelector(selectedKeySelector)
@@ -177,9 +172,6 @@ const KeyDetailsHeader = ({
                       onChangeAutoRefreshRate={handleChangeAutoRefreshRate}
                       testid="key"
                     />
-                    {Object.values(KeyTypes).includes(keyType as KeyTypes) && (
-                      <KeyDetailsHeaderFormatter width={width} />
-                    )}
                     {!isUndefined(Actions) && <Actions width={width} />}
                     <KeyDetailsHeaderDelete onDelete={handleDeleteKey} />
                   </div>
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.tsx
index e801038b8f..2deec0191e 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/dynamic-type-details/DynamicTypeDetails.tsx
@@ -14,6 +14,7 @@ import { StreamDetails } from '../stream-details'
 export interface Props extends KeyDetailsHeaderProps {
   onOpenAddItemPanel: () => void
   onCloseAddItemPanel: () => void
+  keyType: KeyTypes | ModulesKeyTypes
 }
 
 const DynamicTypeDetails = (props: Props) => {
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.spec.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.spec.tsx
index da72dfa82c..14c3cce7a8 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.spec.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.spec.tsx
@@ -1,12 +1,97 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render } from 'uiSrc/utils/test-utils'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import { Props, HashDetails } from './HashDetails'
 
 const mockedProps = mock<Props>()
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+jest.mock('uiSrc/slices/instances/instances', () => ({
+  ...jest.requireActual('uiSrc/slices/instances/instances'),
+  connectedInstanceOverviewSelector: jest.fn().mockReturnValue({
+    version: '7.4.2',
+  }),
+}))
+
+jest.mock('uiSrc/slices/app/features', () => ({
+  ...jest.requireActual('uiSrc/slices/app/features'),
+  appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
+    hashFieldExpiration: { flag: true },
+  }),
+}))
+
 describe('HashDetails', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
   it('should render', () => {
     expect(render(<HashDetails {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it('should render subheader', () => {
+    render(<HashDetails {...instance(mockedProps)} />)
+    expect(screen.getByTestId('select-format-key-value')).toBeInTheDocument()
+  })
+
+  it('opens and closes the add item panel', () => {
+    render(
+      <HashDetails
+        {...instance(mockedProps)}
+        onOpenAddItemPanel={() => {}}
+        onCloseAddItemPanel={() => {}}
+      />
+    )
+    fireEvent.click(screen.getByTestId('add-key-value-items-btn'))
+    expect(screen.getByText('Save')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Cancel'))
+    expect(screen.queryByText('Save')).not.toBeInTheDocument()
+  })
+
+  describe('when hashFieldFeatureFlag and version higher 7.3', () => {
+    it('renders subheader with checkbox', () => {
+      render(<HashDetails {...instance(mockedProps)} />)
+      expect(screen.getByText('Show TTL')).toBeInTheDocument()
+    })
+
+    it('toggles the show TTL button', () => {
+      render(<HashDetails {...instance(mockedProps)} />)
+      const el = screen.getByTestId('test-check-ttl') as HTMLInputElement
+      expect(el.checked).toBe(true)
+      fireEvent.click(el)
+      expect(el.checked).toBe(false)
+    })
+
+    it('should call proper telemetry event after click on showTtl', () => {
+      const sendEventTelemetryMock = jest.fn();
+      (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+      render(<HashDetails {...instance(mockedProps)} />)
+
+      fireEvent.click(screen.getByTestId('test-check-ttl'))
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.SHOW_HASH_TTL_CLICKED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+          action: 'hide'
+        }
+      })
+
+      fireEvent.click(screen.getByTestId('test-check-ttl'))
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.SHOW_HASH_TTL_CLICKED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+          action: 'show'
+        }
+      })
+    })
+  })
 })
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx
index cc83fd8137..465d624028 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
 
+import { useParams } from 'react-router-dom'
+import { EuiCheckbox, EuiFlexItem } from '@elastic/eui'
 import {
   selectedKeySelector,
 } from 'uiSrc/slices/browser/keys'
@@ -12,9 +14,13 @@ import { isVersionHigherOrEquals } from 'uiSrc/utils'
 import { CommandsVersions } from 'uiSrc/constants/commandsVersions'
 import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
+import Divider from 'uiSrc/components/divider/Divider'
 import AddHashFields from './add-hash-fields/AddHashFields'
 import { HashDetailsTable } from './hash-details-table'
+import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader'
 import { AddItemsAction } from '../key-details-actions'
+import styles from './styles.module.scss'
 
 export interface Props extends KeyDetailsHeaderProps {
   onRemoveKey: () => void
@@ -28,11 +34,13 @@ const HashDetails = (props: Props) => {
 
   const { loading } = useSelector(selectedKeySelector)
   const { version } = useSelector(connectedInstanceOverviewSelector)
+  const { instanceId } = useParams<{ instanceId: string }>()
   const {
     [FeatureFlags.hashFieldExpiration]: hashFieldExpirationFeature
   } = useSelector(appFeatureFlagsFeaturesSelector)
 
   const [isAddItemPanelOpen, setIsAddItemPanelOpen] = useState<boolean>(false)
+  const [showTtl, setShowTtl] = useState<boolean>(true)
 
   const isExpireFieldsAvailable = hashFieldExpirationFeature?.flag
     && isVersionHigherOrEquals(version, CommandsVersions.HASH_TTL.since)
@@ -50,21 +58,55 @@ const HashDetails = (props: Props) => {
   }
 
   const Actions = ({ width }: { width: number }) => (
-    <AddItemsAction title="Add Fields" width={width} openAddItemPanel={openAddItemPanel} />
+    <>
+      {isExpireFieldsAvailable && (
+        <>
+          <EuiCheckbox
+            id="showTtl"
+            name="showTtl"
+            label="Show TTL"
+            className={styles.showTtlCheckbox}
+            checked={showTtl}
+            onChange={(e) => handleSelectShow(e.target.checked)}
+            data-testId="test-check-ttl"
+          />
+          <Divider
+            className={styles.divider}
+            colorVariable="separatorColor"
+            orientation="vertical"
+          />
+        </>
+      )}
+      <AddItemsAction title="Add Fields" width={width} openAddItemPanel={openAddItemPanel} />
+    </>
   )
 
+  const handleSelectShow = (show: boolean) => {
+    setShowTtl(show)
+
+    sendEventTelemetry({
+      event: TelemetryEvent.SHOW_HASH_TTL_CLICKED,
+      eventData: {
+        databaseId: instanceId,
+        action: show ? 'show' : 'hide'
+      }
+    })
+  }
+
   return (
     <div className="fluid flex-column relative">
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
+      />
+      <KeyDetailsSubheader
         keyType={keyType}
         Actions={Actions}
       />
       <div className="key-details-body" key="key-details-body">
         {!loading && (
           <div className="flex-column" style={{ flex: '1', height: '100%' }}>
-            <HashDetailsTable isExpireFieldsAvailable={isExpireFieldsAvailable} onRemoveKey={onRemoveKey} />
+            <HashDetailsTable isExpireFieldsAvailable={isExpireFieldsAvailable && showTtl} onRemoveKey={onRemoveKey} />
           </div>
         )}
         {isAddItemPanelOpen && (
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/styles.module.scss
new file mode 100644
index 0000000000..cece59b663
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/styles.module.scss
@@ -0,0 +1,28 @@
+.divider {
+  margin: 0 14px;
+  height: 20px;
+  width: 1px;
+}
+
+
+.showTtlCheckbox {
+  font-weight: 400;
+  font-size: 14px;
+
+  :global(.euiCheckbox__input) {
+    color: var(--controlsBorderColor) !important;
+  }
+
+  :global(.euiCheckbox__square) {
+    width: 18px !important;
+    height: 18px !important;
+    border: 1px solid var(--controlsBorderColor) !important;
+    border-radius: 4px !important;
+    box-shadow: none !important;
+  }
+
+  :global(.euiCheckbox__label) {
+    color: var(--controlsLabelColor) !important;
+  }
+}
+
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/styles.module.scss
index 52eb240997..7702301a82 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/styles.module.scss
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-actions/styles.module.scss
@@ -1,5 +1,4 @@
 .actionBtn {
-  margin-right: 12px;
   position: relative;
   z-index: 2;
 
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.spec.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.spec.tsx
new file mode 100644
index 0000000000..e4c60ca288
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.spec.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import { KeyDetailsSubheader, Props } from './KeyDetailsSubheader'
+
+const mockedProps = mock<Props>()
+
+describe('KeyDetailsSubheader', () => {
+  it('should render', () => {
+    expect(render(<KeyDetailsSubheader {...instance(mockedProps)} />)).toBeTruthy()
+  })
+})
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx
new file mode 100644
index 0000000000..7bd30a79d8
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx
@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react'
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+import { isUndefined } from 'lodash'
+import Divider from 'uiSrc/components/divider/Divider'
+import { KeyTypes, ModulesKeyTypes } from 'uiSrc/constants'
+import { KeyDetailsHeaderFormatter } from '../../../key-details-header/components/key-details-header-formatter'
+import styles from './styles.module.scss'
+
+export interface Props {
+  keyType: KeyTypes | ModulesKeyTypes
+  Actions?: (props: { width: number }) => ReactElement
+}
+
+export const KeyDetailsSubheader = ({
+  keyType,
+  Actions,
+}: Props) => (
+  <div className={styles.subheaderContainer}>
+    <AutoSizer disableHeight>
+      {({ width = 0 }) => (
+        <div style={{ width }}>
+          <EuiFlexGroup justifyContent="flexEnd" alignItems="center" gutterSize="none">
+            {Object.values(KeyTypes).includes(keyType as KeyTypes) && (
+              <>
+                <EuiFlexItem className={styles.keyFormatterItem} grow={false}>
+                  <KeyDetailsHeaderFormatter width={width} />
+                </EuiFlexItem>
+                <Divider
+                  className={styles.divider}
+                  colorVariable="separatorColor"
+                  orientation="vertical"
+                />
+              </>
+            )}
+            {!isUndefined(Actions) && <Actions width={width} />}
+          </EuiFlexGroup>
+        </div>
+      )}
+    </AutoSizer>
+  </div>
+)
+
+export default KeyDetailsSubheader
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/styles.module.scss
new file mode 100644
index 0000000000..7f61d48e37
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/styles.module.scss
@@ -0,0 +1,14 @@
+.subheaderContainer {
+  padding: 12px 18px 0px 18px;
+
+  .divider {
+    margin: 0 14px;
+    height: 20px;
+    width: 1px;
+  }
+
+  .actionItem {
+    margin-left: 12px;
+  }
+}
+
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/ListDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/ListDetails.tsx
index 5959f8cfcf..a1b1645f00 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/ListDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/ListDetails.tsx
@@ -14,6 +14,7 @@ import { RemoveListElements } from './remove-list-elements'
 
 import AddListElements from './add-list-elements/AddListElements'
 import { AddItemsAction, RemoveItemsAction } from '../key-details-actions'
+import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader'
 import styles from './styles.module.scss'
 
 export interface Props extends KeyDetailsHeaderProps {
@@ -55,7 +56,9 @@ const ListDetails = (props: Props) => {
   const Actions = ({ width }: { width: number }) => (
     <>
       <AddItemsAction title="Add Elements" width={width} openAddItemPanel={openAddItemPanel} />
-      <RemoveItemsAction title="Remove Elements" openRemoveItemPanel={openRemoveItemPanel} />
+      <div className={styles.removeBtnContainer}>
+        <RemoveItemsAction title="Remove Elements" openRemoveItemPanel={openRemoveItemPanel} />
+      </div>
     </>
   )
 
@@ -64,6 +67,8 @@ const ListDetails = (props: Props) => {
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
+      />
+      <KeyDetailsSubheader
         keyType={keyType}
         Actions={Actions}
       />
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/styles.module.scss b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/styles.module.scss
index 0838dd17dc..2b7fb38e92 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/styles.module.scss
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/styles.module.scss
@@ -1,4 +1,8 @@
 .contentActive {
   border-color: var(--euiColorPrimary) !important;
   border-bottom-width: 1px !important;
-}
\ No newline at end of file
+}
+
+.removeBtnContainer {
+  margin-left: 12px;
+}
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx
index 69e5c88c81..23f44cbadb 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx
@@ -9,7 +9,6 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent } from 'uiSrc/telemetry'
 import { KeyDetailsHeader, KeyDetailsHeaderProps } from 'uiSrc/pages/browser/modules'
 
-import { KeyTypes } from 'uiSrc/constants'
 import { stringToBuffer } from 'uiSrc/utils'
 import { IJSONData } from 'uiSrc/pages/browser/modules/key-details/components/rejson-details/interfaces'
 import RejsonDetails from './rejson-details'
@@ -19,7 +18,6 @@ import styles from './styles.module.scss'
 export interface Props extends KeyDetailsHeaderProps {}
 
 const RejsonDetailsWrapper = (props: Props) => {
-  const keyType = KeyTypes.ReJSON
   const { loading } = useSelector(rejsonSelector)
   const { data, downloaded, type, path } = useSelector(rejsonDataSelector)
   const { name: selectedKey, nameString, length } = useSelector(selectedKeyDataSelector) || {}
@@ -83,7 +81,6 @@ const RejsonDetailsWrapper = (props: Props) => {
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
-        keyType={keyType}
       />
       <div className="key-details-body" key="key-details-body">
         <div className="flex-column" style={{ flex: '1', height: '100%' }}>
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/SetDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/SetDetails.tsx
index 69c5ffda38..0c240e09de 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/SetDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/SetDetails.tsx
@@ -11,6 +11,7 @@ import { KeyDetailsHeader, KeyDetailsHeaderProps } from 'uiSrc/pages/browser/mod
 import { SetDetailsTable } from './set-details-table'
 import { AddSetMembers } from './add-set-members'
 import { AddItemsAction } from '../key-details-actions'
+import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader'
 
 export interface Props extends KeyDetailsHeaderProps {
   onRemoveKey: () => void
@@ -47,6 +48,8 @@ const SetDetails = (props: Props) => {
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
+      />
+      <KeyDetailsSubheader
         keyType={keyType}
         Actions={Actions}
       />
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/StreamDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/StreamDetails.tsx
index f92ce58f95..b6207e1af3 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/StreamDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/StreamDetails.tsx
@@ -14,6 +14,7 @@ import { StreamDetailsBody } from './stream-details-body'
 import AddStreamEntries from './add-stream-entity'
 import AddStreamGroup from './add-stream-group'
 import { StreamItemsAction } from '../key-details-actions'
+import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader'
 
 export interface Props extends KeyDetailsHeaderProps {
   onRemoveKey: () => void
@@ -58,6 +59,8 @@ const StreamDetails = (props: Props) => {
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
+      />
+      <KeyDetailsSubheader
         keyType={keyType}
         Actions={Actions}
       />
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx
index 1832e7ca59..2e6c4d18b8 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/StringDetails.tsx
@@ -23,6 +23,7 @@ import { resetStringValue, stringDataSelector, stringSelector } from 'uiSrc/slic
 import { isFormatEditable, isFullStringLoaded } from 'uiSrc/utils'
 import { StringDetailsValue } from './string-details-value'
 import { EditItemAction } from '../key-details-actions'
+import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader'
 
 export interface Props extends KeyDetailsHeaderProps {}
 
@@ -70,8 +71,10 @@ const StringDetails = (props: Props) => {
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
-        keyType={keyType}
         onRemoveKey={handleRemoveKey}
+      />
+      <KeyDetailsSubheader
+        keyType={keyType}
         Actions={Actions}
       />
       <div className="key-details-body" key="key-details-body">
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx
index cc70ef990d..f31ae79257 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/ZSetDetails.tsx
@@ -11,6 +11,7 @@ import { KeyDetailsHeader, KeyDetailsHeaderProps } from 'uiSrc/pages/browser/mod
 import { ZSetDetailsTable } from './zset-details-table'
 import AddZsetMembers from './add-zset-members/AddZsetMembers'
 import { AddItemsAction } from '../key-details-actions'
+import { KeyDetailsSubheader } from '../key-details-subheader/KeyDetailsSubheader'
 
 export interface Props extends KeyDetailsHeaderProps {
   onRemoveKey: () => void
@@ -48,6 +49,8 @@ const ZSetDetails = (props: Props) => {
       <KeyDetailsHeader
         {...props}
         key="key-details-header"
+      />
+      <KeyDetailsSubheader
         keyType={keyType}
         Actions={Actions}
       />
diff --git a/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx b/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx
index 2dcc296be8..2c630fcd86 100644
--- a/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx
+++ b/redisinsight/ui/src/pages/rdi/statistics/components/vertical-divider/VerticalDivider.tsx
@@ -4,8 +4,8 @@ import Divider from 'uiSrc/components/divider/Divider'
 
 import styles from './styles.module.scss'
 
-const VerticalDivider = () => (
-  <Divider className={styles.divider} colorVariable="separatorColor" orientation="vertical" />
+const VerticalDivider = (props: any) => (
+  <Divider className={styles.divider} colorVariable="separatorColor" orientation="vertical" {...props} />
 )
 
 export default VerticalDivider
diff --git a/redisinsight/ui/src/telemetry/events.ts b/redisinsight/ui/src/telemetry/events.ts
index 31a3c90858..b28760033c 100644
--- a/redisinsight/ui/src/telemetry/events.ts
+++ b/redisinsight/ui/src/telemetry/events.ts
@@ -169,6 +169,7 @@ export enum TelemetryEvent {
   TREE_VIEW_KEY_FIELD_VALUE_COLLAPSED = 'TREE_VIEW_KEY_FIELD_VALUE_COLLAPSED',
   TREE_VIEW_KEY_DETAILS_FORMATTER_CHANGED = 'TREE_VIEW_KEY_DETAILS_FORMATTER_CHANGED',
   TREE_VIEW_WORKBENCH_LINK_CLICKED = 'TREE_VIEW_WORKBENCH_LINK_CLICKED',
+  SHOW_HASH_TTL_CLICKED = 'SHOW_HASH_TTL_CLICKED',
 
   SLOWLOG_LOADED = 'SLOWLOG_LOADED',
   SLOWLOG_CLEARED = 'SLOWLOG_CLEARED',
diff --git a/tests/e2e/pageObjects/browser-page.ts b/tests/e2e/pageObjects/browser-page.ts
index 2dab013eb3..3b9d061cca 100644
--- a/tests/e2e/pageObjects/browser-page.ts
+++ b/tests/e2e/pageObjects/browser-page.ts
@@ -271,6 +271,8 @@ export class BrowserPage extends InstancePage {
     //Get Hash key field ttl value
     //for Redis databases 7.4 and higher
     getHashTtlFieldInput = (fieldName: string): Selector => (Selector(`[data-testid=hash-ttl_content-value-${fieldName}]`));
+    //checkbox
+    showTtlCheckbox =  Selector('[data-testid=test-check-ttl]~label');
 
     /**
      * Common part for Add any new key
diff --git a/tests/e2e/tests/web/smoke/browser/verify-key-details.e2e.ts b/tests/e2e/tests/web/smoke/browser/verify-key-details.e2e.ts
index d1fde3dceb..ee75bb969b 100644
--- a/tests/e2e/tests/web/smoke/browser/verify-key-details.e2e.ts
+++ b/tests/e2e/tests/web/smoke/browser/verify-key-details.e2e.ts
@@ -1,7 +1,7 @@
 import { rte } from '../../../../helpers/constants';
 import { DatabaseHelper } from '../../../../helpers/database';
 import { BrowserPage } from '../../../../pageObjects';
-import { commonUrl, ossStandaloneConfig } from '../../../../helpers/conf';
+import { commonUrl, ossStandaloneConfig, ossStandaloneV7Config } from '../../../../helpers/conf';
 import { Common } from '../../../../helpers/common';
 import { DatabaseAPIRequests } from '../../../../helpers/api/api-database';
 import { APIKeyRequests } from '../../../../helpers/api/api-keys';
@@ -119,17 +119,16 @@ test('Verify that user can see JSON Key details', async t => {
     await t.expect(keyTTLValue).match(expectedTTL, 'The JSON Key TTL is incorrect');
     await t.expect(keyBadge).contains('JSON', 'The JSON Key Badge is incorrect');
 });
-//the test is skipped until redis databases 7.4 is not added to docker
+
 test
     .before(async() => {
-        // await databaseHelper.acceptLicenseTermsAndAddDatabaseApi();
+        await databaseHelper.acceptLicenseTermsAndAddDatabaseApi(ossStandaloneV7Config);
     })
     .after(async() => {
         // Clear and delete database
-        // await apiKeyRequests.deleteKeyByNameApi(keyName, );
-        //  await databaseAPIRequests.deleteStandaloneDatabaseApi();
-    })
-    .skip('Verify that user can set ttl for Hash fields', async t => {
+        await apiKeyRequests.deleteKeyByNameApi(keyName, ossStandaloneV7Config.databaseName);
+        await databaseAPIRequests.deleteStandaloneDatabaseApi(ossStandaloneV7Config);
+    })('Verify that user can set ttl for Hash fields', async t => {
         keyName = Common.generateWord(10);
         const keyName2 = Common.generateWord(10);
         const field1 = 'Field1WithTtl';
@@ -150,6 +149,11 @@ test
         ttlFieldValue = await browserPage.getHashTtlFieldInput(field2).textContent;
         await t.expect(ttlFieldValue).match(expectedTTL, 'the field ttl is not set');
 
+        //verify that ttl column can be hidden
+        await t.click(browserPage.showTtlCheckbox);
+        await t.expect(await browserPage.getHashTtlFieldInput(field2).exists).notOk('the ttl column is not hidden');
+        await t.click(browserPage.showTtlCheckbox);
+
         //verify that field is removed after ttl field is expired
         await browserPage.editHashFieldTtlValue(field1, '1');
         await t.wait(1000);
@@ -160,6 +164,7 @@ test
         //verify that the key is removed if key has 1 field and ttl field is expired
         await browserPage.addHashKey(keyName2, ' ',  field1);
         await browserPage.editHashFieldTtlValue(field1, '1');
+        await t.wait(1000);
         await t.click(browserPage.refreshKeysButton);
 
         await t.expect(browserPage.getKeySelectorByName(keyName2).exists).notOk('key is not removed when the field ttl is expired');