diff --git a/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.styles.ts b/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.styles.ts
new file mode 100644
index 0000000000..cfcb939657
--- /dev/null
+++ b/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.styles.ts
@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+/* TODO: use theme when it supports theme.semantic.core.radius */
+// to replace var(--border-radius-medium)
+export const StyledWrapper = styled.div`
+  flex: 1;
+  height: calc(100% - var(--border-radius-medium));
+  width: 100%;
+  background-color: ${({ theme }) =>
+    theme.semantic?.color.background.neutral100};
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: var(--border-radius-medium);
+  // HACK: to fix rectangle like view in rounded borders wrapper
+  padding-bottom: ${({ theme }) => theme.core.space.space050};
+
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+`
+
+export const StyledContainer = styled.div`
+  flex: 1;
+  width: 100%;
+  overflow: auto;
+  color: ${({ theme }) => theme.color.gray700};
+`
+
+export const StyledHeader = styled.div`
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 ${({ theme }) => theme.core.space.space150};
+
+  flex-shrink: 0;
+  border-bottom: 1px solid
+    ${({ theme }) => theme.semantic.color.border.neutral500};
+`
diff --git a/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.tsx b/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.tsx
index cd0643d940..95f566b767 100644
--- a/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.tsx
+++ b/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 
 import { CodeButtonParams } from 'uiSrc/constants'
@@ -15,7 +14,11 @@ import { ProgressBarLoader } from 'uiSrc/components/base/display'
 import { collectTelemetryQueryReRun } from 'uiSrc/pages/vector-search/telemetry'
 import QueryCard from '../../QueryCard'
 
-import styles from './styles.module.scss'
+import {
+  StyledContainer,
+  StyledHeader,
+  StyledWrapper,
+} from './CommandsView.styles'
 
 export interface Props {
   isResultsLoaded: boolean
@@ -80,25 +83,24 @@ const CommandsView = (props: Props) => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <StyledWrapper>
       {!isResultsLoaded && (
         <ProgressBarLoader color="primary" data-testid="progress-wb-history" />
       )}
       {!!items?.length && (
-        <div className={styles.header}>
+        <StyledHeader>
           <EmptyButton
             size="small"
             icon={DeleteIcon}
-            className={styles.clearAllBtn}
             onClick={() => onAllQueriesDelete?.()}
             disabled={clearing || processing}
             data-testid="clear-history-btn"
           >
             Clear Results
           </EmptyButton>
-        </div>
+        </StyledHeader>
       )}
-      <div className={cx(styles.container)}>
+      <StyledContainer>
         <div ref={scrollDivRef} />
         {items?.length
           ? items.map(
@@ -161,8 +163,8 @@ const CommandsView = (props: Props) => {
             )
           : null}
         {isResultsLoaded && !items.length && (noResultsPlaceholder ?? null)}
-      </div>
-    </div>
+      </StyledContainer>
+    </StyledWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/styles.module.scss b/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/styles.module.scss
deleted file mode 100644
index 94e0db31c4..0000000000
--- a/redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/styles.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.wrapper {
-  flex: 1;
-  height: 100%;
-  width: 100%;
-  background-color: var(--euiColorEmptyShade);
-  border: 1px solid var(--euiColorLightShade);
-
-  display: flex;
-  flex-direction: column;
-
-  position: relative;
-}
-
-.container {
-  @include eui.scrollBar;
-  color: var(--euiTextSubduedColor) !important;
-
-  flex: 1;
-  width: 100%;
-  overflow: auto;
-}
-
-.header {
-  height: 42px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0 12px;
-
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--tableDarkestBorderColor);
-}
-
-.clearAllBtn {
-  font-size: 14px !important;
-
-  :global {
-    .euiIcon {
-      width: 14px !important;
-      height: 14px !important;
-    }
-  }
-}
diff --git a/redisinsight/ui/src/pages/workbench/components/query/Query/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/query/Query/styles.module.scss
index 18b46e1931..1feddd704a 100644
--- a/redisinsight/ui/src/pages/workbench/components/query/Query/styles.module.scss
+++ b/redisinsight/ui/src/pages/workbench/components/query/Query/styles.module.scss
@@ -12,7 +12,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  padding: 8px 16px;
+  padding: 16px;
   width: 100%;
   height: 100%;
   word-break: break-word;
@@ -21,6 +21,7 @@
   background-color: var(--rsInputWrapperColor);
   color: var(--euiTextSubduedColor) !important;
   border: 1px solid var(--euiColorLightShade);
+  border-radius: var(--border-radius-medium);
 }
 
 .disabled {
@@ -62,7 +63,7 @@
   align-items: center;
   justify-content: space-between;
 
-  margin-top: 8px;
+  margin-top: 16px;
   flex-shrink: 0;
 }
 
diff --git a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss
index 94e0db31c4..7fce04573c 100644
--- a/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss
+++ b/redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss
@@ -1,9 +1,12 @@
 .wrapper {
   flex: 1;
-  height: 100%;
+  height: calc(100% - var(--border-radius-medium));
   width: 100%;
   background-color: var(--euiColorEmptyShade);
   border: 1px solid var(--euiColorLightShade);
+  border-radius: var(--border-radius-medium);
+  // HACK: to fix rectangle like view in rounded borders wrapper
+  padding-bottom: var(--border-radius-medium);
 
   display: flex;
   flex-direction: column;
diff --git a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss
index ba9013a098..86f297195f 100644
--- a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss
+++ b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss
@@ -19,12 +19,6 @@
   width: 100%;
 }
 
-.queryResults {
-  & > div {
-    border-bottom-width: 0;
-  }
-}
-
 :global(.show-cli) {
   .queryResults {
     & > div {