diff --git a/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx b/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx
index 43b5cffc19..e41a59b7cd 100644
--- a/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx
+++ b/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx
@@ -45,7 +45,7 @@ const ContentElement = (props: Props) => {
           key={`${telemetryName}-${idx}`}
           component="div"
           className={cx(styles.text, { [styles.insights]: insights })}
-          color="subdued"
+          color="primary"
         >
           {value}
         </ColorText>
@@ -56,7 +56,7 @@ const ContentElement = (props: Props) => {
           data-testid={`code-${telemetryName}-${idx}`}
           className={cx(styles.code, { [styles.insights]: insights })}
           key={`${telemetryName}-${idx}`}
-          color="subdued"
+          color="primary"
         >
           <code className={cx(styles.span, styles.text)}>{value}</code>
         </ColorText>
@@ -66,7 +66,7 @@ const ContentElement = (props: Props) => {
         <ColorText
           data-testid={`span-${telemetryName}-${idx}`}
           key={`${telemetryName}-${idx}`}
-          color="subdued"
+          color="primary"
           className={cx(styles.span, styles.text, {
             [styles.insights]: insights,
           })}
@@ -77,6 +77,7 @@ const ContentElement = (props: Props) => {
     case 'link':
       return (
         <Link
+          color="subdued"
           key={`${telemetryName}-${idx}`}
           data-testid={`link-${telemetryName}-${idx}`}
           target="_blank"
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-body/RecommendationBody.tsx b/redisinsight/ui/src/components/recommendation/recommendation-body/RecommendationBody.tsx
index ce8a880915..1d807e4b55 100644
--- a/redisinsight/ui/src/components/recommendation/recommendation-body/RecommendationBody.tsx
+++ b/redisinsight/ui/src/components/recommendation/recommendation-body/RecommendationBody.tsx
@@ -11,12 +11,12 @@ export interface Props {
 }
 
 const RecommendationBody = ({ elements = [], ...rest }: Props) => (
-  <>
+  <div>
     {// eslint-disable-next-line react/no-array-index-key
     elements?.map((item, idx) => (
       <ContentElement key={idx} content={item} idx={idx} {...rest} />
     ))}
-  </>
+  </div>
 )
 
 export default RecommendationBody
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx
index 808e23014c..7725c9eeba 100644
--- a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx
+++ b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx
@@ -1,14 +1,43 @@
 import React from 'react'
 import { useParams } from 'react-router-dom'
-import cx from 'classnames'
+import styled from 'styled-components'
 
 import { bufferToString } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
-import { Text, ColorText } from 'uiSrc/components/base/text'
+import { Text } from 'uiSrc/components/base/text'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { CopyIcon } from 'uiSrc/components/base/icons'
-import styles from './styles.module.scss'
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
+import { HorizontalSpacer } from 'uiSrc/components/base/layout'
+
+const StyledWrapper = styled.div`
+  margin-top: 15px;
+`
+
+const StyledKeyNameWrapper = styled(FlexGroup)<{ $isDbAnalysis: boolean }>`
+  margin-top: 5px;
+  border: 1px dashed ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: 4px;
+  background-color: ${(props) =>
+    props.$isDbAnalysis
+      ? props.theme.semantic.color.background.neutral100
+      : props.theme.semantic.color.background.neutral400};
+`
+
+const StyledKeyName = styled(Text)`
+  padding: ${({ theme }) => theme.core.space.space050};
+  font:
+    normal normal normal 13px/16px Graphik,
+    sans-serif !important;
+  height: 26px;
+`
+
+const StyledText = styled(Text)`
+  font:
+    normal normal normal 13px/16px Graphik,
+    sans-serif !important;
+`
 
 export interface IProps {
   keyName: string
@@ -42,30 +71,25 @@ const RecommendationCopyComponent = ({
   }
 
   return (
-    <div className={styles.wrapper}>
-      <Text className={styles.text}>
-        Example of a key that may be relevant:
-      </Text>
-      <div className={styles.keyNameWrapper}>
-        <ColorText
-          color="subdued"
-          className={cx(styles.keyName, 'truncateText', {
-            [styles.dbAnalysis]: !live,
-          })}
-          component="div"
+    <StyledWrapper>
+      <StyledText>Example of a key that may be relevant:</StyledText>
+      <StyledKeyNameWrapper align="center" $isDbAnalysis={!live}>
+        <StyledKeyName
+          className="truncateText"
           data-testid="recommendation-key-name"
+          component="div"
         >
           {formattedName}
-        </ColorText>
+        </StyledKeyName>
         <IconButton
           onClick={handleCopy}
-          className={styles.btn}
           icon={CopyIcon}
           data-testid="copy-key-name-btn"
           aria-label="copy key name"
         />
-      </div>
-    </div>
+        <HorizontalSpacer size="xs" />
+      </StyledKeyNameWrapper>
+    </StyledWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/styles.module.scss b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/styles.module.scss
deleted file mode 100644
index 0cf8c2daf7..0000000000
--- a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/styles.module.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.wrapper {
-  margin-top: 15px;
-
-  .keyNameWrapper {
-    margin-top: 4px;
-  }
-}
-
-.keyNameWrapper {
-  position: relative;
-}
-
-.keyName {
-  padding: 4px 30px 4px 8px;
-  background-color: var(--recommendationsBgColor);
-  border: 1px dashed var(--separatorColorLight);
-  border-radius: 4px;
-  font: normal normal normal 13px/16px Graphik, sans-serif !important;
-  height: 26px;
-}
-
-.keyName.dbAnalysis {
-  background-color: var(--euiColorEmptyShade);
-}
-
-.text {
-  font: normal normal normal 13px/16px Graphik, sans-serif !important;
-  color: var(--htmlColor);
-}
-
-.btn {
-  position: absolute;
-  top: 0;
-  right: 4px;
-}
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.tsx b/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.tsx
index 6eb9406645..739140e372 100644
--- a/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.tsx
+++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.tsx
@@ -35,7 +35,7 @@ const RecommendationVoting = ({
       gap={live ? 'none' : 'l'}
       data-testid="recommendation-voting"
     >
-      <Text size="m" className={cx({ [styles.highlightText]: live })}>
+      <Text size="m">
         Is this useful?
       </Text>
       <div className="voteContent">
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx
index cb3d5424a6..ad9d83b441 100644
--- a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx
+++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx
@@ -14,7 +14,7 @@ import { Nullable } from 'uiSrc/utils'
 
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
-import { CancelSlimIcon } from 'uiSrc/components/base/icons'
+import { CancelSlimIcon, Icon } from 'uiSrc/components/base/icons'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { Link } from 'uiSrc/components/base/link/Link'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -49,6 +49,12 @@ const GitHubLink = styled(Link)`
   }
 `
 
+const VotingIconButton = styled(IconButton)`
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 50%;
+`
+
 export interface Props {
   voteOption: Vote
   vote?: Nullable<Vote>
@@ -130,7 +136,7 @@ const VoteOption = (props: Props) => {
           position="bottom"
           data-testid={`${voteOption}-vote-tooltip`}
         >
-          <IconButton
+          <VotingIconButton
             disabled={!isAnalyticsEnable}
             icon={iconType[voteOption] ?? 'LikeIcon'}
             className={cx('vote__btn', { selected: vote === voteOption })}
diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss b/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss
index 33f02f1d48..c785b18a48 100644
--- a/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss
+++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/styles.module.scss
@@ -3,19 +3,6 @@
     .voteContent {
       margin-left: 10px;
 
-      .vote__btn {
-        width: 34px;
-        height: 34px;
-        border-radius: 50%;
-
-        &:hover,
-        &:focus,
-        &.selected {
-          transform: none;
-          background-color: var(--separatorColor);
-        }
-      }
-
       svg {
         width: 34px;
         height: 34px;
diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx
index cba7ff09b3..8c85f430ae 100644
--- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx
@@ -38,11 +38,11 @@ const PopoverRunAnalyze = (props: Props) => {
         className={styles.popover}
         data-testid="insights-db-analysis-popover"
       >
-        <Text className={styles.popoverTitle}>Run database analysis</Text>
-        <Spacer size="xs" />
-        <Text className={styles.popoverContent} color="subdued">
-          {popoverContent}
+        <Text className={styles.popoverTitle} size="m">
+          Run database analysis
         </Text>
+        <Spacer size="s" />
+        <Text className={styles.popoverContent}>{popoverContent}</Text>
         <Spacer size="m" />
         <PrimaryButton
           aria-label="Analyze"
diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/styles.module.scss b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/styles.module.scss
index d00ce12830..c8fbe36aaf 100644
--- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/styles.module.scss
+++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/recommendation/styles.module.scss
@@ -88,21 +88,6 @@
       font-size: inherit !important;
     }
   }
-
-  .link {
-    color: var(--externalLinkColor) !important;
-  }
-
-  :global {
-    .vote__btn {
-      &:hover,
-      &:focus,
-      &.selected {
-        transform: none;
-        background-color: var(--liveRecommendationVoteBgColor) !important;
-      }
-    }
-  }
 }
 
 .actions {
@@ -118,28 +103,9 @@
 }
 
 .votingContainer {
-  justify-content: center;
   border-radius: 8px;
   background-color: var(--recommendationsBgColor) !important;
-  padding: 4px 0;
-  :global {
-    .voteContent {
-      margin-left: 6px !important;
-    }
-    .euiText {
-      font-size: 12px;
-    }
-
-    .vote__btn {
-      width: 28px !important;
-      height: 28px !important;
-    }
-
-    .euiIcon {
-      width: 28px !important;
-      height: 28px !important;
-    }
-  }
+  padding: 4px 0 4px 10px;
 }
 
 .keyNameContainer {
diff --git a/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx b/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx
index 264c0566b0..e350990e01 100644
--- a/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx
+++ b/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { isNull } from 'lodash'
 import cx from 'classnames'
+import styled from 'styled-components'
 
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import {
@@ -36,6 +37,10 @@ import { Card } from 'uiSrc/components/base/layout'
 
 import styles from './styles.module.scss'
 
+const RecommendationContent = styled(Card)`
+  padding: ${({ theme }) => theme.core.space.space150};
+`
+
 const Recommendations = () => {
   const { data, loading } = useSelector(dbAnalysisSelector)
   const { provider } = useSelector(connectedInstanceSelector)
@@ -186,7 +191,7 @@ const Recommendations = () => {
                   onOpenChange={(isOpen) => handleToggle(isOpen, id)}
                   data-testid={`${id}-accordion`}
                 >
-                  <Card className={styles.accordionContent}>
+                  <RecommendationContent>
                     <RecommendationBody
                       elements={content}
                       params={params}
@@ -201,7 +206,7 @@ const Recommendations = () => {
                         }
                       />
                     )}
-                  </Card>
+                  </RecommendationContent>
                 </RiAccordion>
                 <div className={styles.footer}>
                   <FeatureFlagComponent name={FeatureFlags.envDependent}>
diff --git a/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/styles.module.scss b/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/styles.module.scss
index 5de8765976..c595e5aaae 100644
--- a/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/styles.module.scss
+++ b/redisinsight/ui/src/pages/database-analysis/components/recommendations-view/styles.module.scss
@@ -71,10 +71,6 @@
   margin-bottom: 6px;
   padding: 30px 18px 11px;
 
-  .accordionContent {
-    padding: 18px 0 0 !important;
-  }
-
   .footer {
     display: flex;
     align-items: center;