diff --git a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.styles.ts b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.styles.ts
new file mode 100644
index 0000000000..5879f55718
--- /dev/null
+++ b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.styles.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const Container = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  height: 36px;
+  width: 200px;
+  min-width: 80px;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+`
diff --git a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx
index 0532e6f4f9..d999921e6d 100644
--- a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx
+++ b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/RediSearchIndexesList.tsx
@@ -1,4 +1,3 @@
-import cx from 'classnames'
 import React, { useEffect, useState } from 'react'
 import { isString } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
@@ -32,14 +31,15 @@ import { localStorageService } from 'uiSrc/services'
 import { BrowserStorageItem } from 'uiSrc/constants'
 
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
-import { ResetIcon } from 'uiSrc/components/base/icons'
+import { PlusIcon, ResetIcon } from 'uiSrc/components/base/icons'
 import { RiTooltip } from 'uiSrc/components'
 import {
   RiSelect,
   SelectValueRenderParams,
 } from 'uiSrc/components/base/forms/select/RiSelect'
 import { Text } from 'uiSrc/components/base/text'
-import styles from './styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import * as S from './RediSearchIndexesList.styles'
 
 export const CREATE = 'create'
 
@@ -98,29 +98,31 @@ const RediSearchIndexesList = (props: Props) => {
     return {
       value: JSON.stringify(index),
       inputDisplay: (
-        <Text component="span" data-test-subj={`mode-option-type-${value}`}>
-          {value}
-        </Text>
+        <Text data-test-subj={`mode-option-type-${value}`}>{value}</Text>
       ),
       dropdownDisplay: (
-        <Text component="span" data-test-subj={`mode-option-type-${value}`}>
+        <Text color="primary" data-test-subj={`mode-option-type-${value}`}>
           {value}
         </Text>
       ),
     }
   })
 
-  options.unshift({
+  options.push({
     value: JSON.stringify(CREATE),
     inputDisplay: <span>CREATE</span>,
     dropdownDisplay: (
-      <Text
-        size="M"
-        className={cx(styles.createIndexBtn)}
-        data-testid="create-index-btn"
-      >
-        Create Index
-      </Text>
+      <Row align="center" justify="start" gap="xs">
+        <PlusIcon size="M" />
+        <Text
+          size="M"
+          variant="semiBold"
+          color="primary"
+          data-testid="create-index-btn"
+        >
+          Create Index
+        </Text>
+      </Row>
     ),
   })
 
@@ -181,7 +183,7 @@ const RediSearchIndexesList = (props: Props) => {
   }
 
   return (
-    <div className={cx(styles.container)}>
+    <S.Container>
       <RiSelect.Compose
         disabled={loading}
         options={options}
@@ -212,7 +214,7 @@ const RediSearchIndexesList = (props: Props) => {
         </RiSelect.Trigger.Compose>
         <RiSelect.Content optionValueRender={selectValueRender} />
       </RiSelect.Compose>
-    </div>
+    </S.Container>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss b/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss
deleted file mode 100644
index 742df41218..0000000000
--- a/redisinsight/ui/src/pages/browser/components/redisearch-key-list/styles.module.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-.container {
-  height: 36px;
-  width: 200px;
-  min-width: 80px;
-  overflow: hidden;
-  position: relative;
-  flex-shrink: 0;
-
-  :global {
-    .euiFormControlLayout {
-      .euiSuperSelectControl {
-        align-items: center;
-        height: 36px !important;
-        background-color: var(--euiColorEmptyShade) !important;
-        box-shadow: none !important;
-        border: 1px solid var(--controlsBorderColor) !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
-        padding: 0 55px 0 10px !important;
-
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        &.euiSuperSelect--isOpen__button {
-          background-color: var(--euiColorEmptyShade) !important;
-        }
-
-        &:focus {
-          background-color: var(--euiColorEmptyShade) !important;
-        }
-      }
-    }
-    .euiPopover:not(.euiSuperSelect) {
-      position: absolute;
-      z-index: 10;
-      top: 10px;
-
-      svg {
-        width: 18px !important;
-        height: 18px !important;
-      }
-    }
-    .euiPopover.euiPopover-isOpen {
-      .euiIcon {
-        color: var(--euiTextSubduedColorHover);
-      }
-    }
-    .euiFormControlLayoutIcons {
-      z-index: 6;
-      right: 36px;
-
-      .euiLoadingSpinner {
-        margin-right: -22px;
-      }
-
-      .euiIcon {
-        width: 16px;
-        height: 12px;
-      }
-    }
-  }
-}
-
-@include global.insights-open {
-  .container {
-    width: 154px !important;
-    :global(.euiFormControlLayout__childrenWrapper) {
-      width: 154px !important;
-    }
-  }
-}
-
-.searchMode {
-  position: relative;
-  line-height: 14px !important;
-  height: auto;
-  padding: 8px 4px !important;
-  background-color: var(--euiColorEmptyShade);
-  word-break: break-word;
-
-  &:hover,
-  &:focus {
-    background-color: var(--hoverInListColorDarken) !important;
-  }
-
-  :global {
-    .euiContextMenu__icon {
-      margin-left: 8px;
-      margin-right: 2px;
-      width: 16px;
-      height: 14px;
-    }
-  }
-}
-
-.controlsIcon {
-  cursor: pointer;
-  margin-left: 6px;
-  height: 16px !important;
-  width: 16px !important;
-  &:global(.euiIcon) {
-    color: var(--inputTextColor) !important;
-  }
-}
-
-.createIndexBtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--separatorColor);
-  width: 100%;
-  height: 100%;
-  top: 0;
-
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.placeholder {
-  position: absolute !important;
-  font-size: 14px !important;
-  z-index: 5;
-  width: 100%;
-  height: 36px !important;
-  top: 0;
-  left: 0;
-  transform: none !important;
-
-  :global {
-    .euiButtonContent.euiButtonEmpty__content {
-      padding-left: 16px !important;
-      padding-right: 30px;
-      justify-content: left;
-
-      .euiButtonEmpty__text {
-        padding-right: 10px;
-        text-overflow: initial !important;
-        color: var(--inputPlaceholderColor) !important;
-      }
-    }
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    transform: none !important;
-    background-color: transparent !important;
-  }
-}