diff --git a/redisinsight/ui/src/components/base/forms/button-group/ButtonGroup.tsx b/redisinsight/ui/src/components/base/forms/button-group/ButtonGroup.tsx
new file mode 100644
index 0000000000..507fbd4b5e
--- /dev/null
+++ b/redisinsight/ui/src/components/base/forms/button-group/ButtonGroup.tsx
@@ -0,0 +1,5 @@
+import { ButtonGroup, ButtonGroupProps } from '@redis-ui/components'
+
+export { ButtonGroup }
+
+export type { ButtonGroupProps }
diff --git a/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx b/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx
index 77a1fb06cb..df923a80e0 100644
--- a/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx
+++ b/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui'
-import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
 
+import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
 import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
 import { AxisScale, GraphMode, ChartConfigFormProps } from './interfaces'
 import {
@@ -9,13 +8,18 @@ import {
   Y_LABEL_MAX_LENGTH,
   TITLE_MAX_LENGTH,
 } from './constants'
+import { RiAccordion } from 'uiSrc/components/base/display/accordion/RiAccordion'
+import {
+  ButtonGroup,
+  ButtonGroupProps,
+} from 'uiSrc/components/base/forms/button-group/ButtonGroup'
 
 const NewEnumSelect = ({
   selected,
   values,
   onClick,
 }: {
-  select: string
+  selected: string
   values: string[]
   onClick: (v: string) => void
 }) => (
@@ -25,6 +29,7 @@ const NewEnumSelect = ({
         title={v.charAt(0).toUpperCase() + v.slice(1)}
         onClick={() => onClick(v)}
         className={`button-point ${selected === v ? 'button-selected' : null}`}
+        key={v}
       >
         {v}
       </div>
@@ -37,9 +42,20 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
 
   const { onChange, value } = props
 
+  const yAxisButtonGroupItems = [
+    {
+      label: 'Left',
+      value: false,
+    },
+    {
+      label: 'Right',
+      value: true,
+    },
+  ]
+
   return (
     <form className="chart-config-form">
-      <div className="chart-top-form">
+      <div className="chart-form-top">
         <NewEnumSelect
           values={Object.keys(GraphMode)}
           selected={value.mode}
@@ -55,92 +71,90 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
           checked={value.fill}
           onCheckedChange={(checked) => onChange('fill', checked)}
         />
-        <EuiAccordion
-          arrowDisplay="right"
-          forceState={moreOptions ? 'open' : 'closed'}
-          onToggle={(isOpen) => setMoreOptions(isOpen)}
-          buttonContent={moreOptions ? 'Less options' : 'More options'}
-        >
-          <span></span>
-        </EuiAccordion>
       </div>
-      {moreOptions && (
-        <div className="more-options">
-          <section>
-            <FormFieldset legend={{ children: 'Title' }}>
-              <TextInput
-                placeholder="Title"
-                value={value.title}
-                onChange={value => onChange('title', value)}
-                aria-label="Title"
-                maxLength={parseInt(TITLE_MAX_LENGTH)}
-              />
-            </FormFieldset>
-            <FormFieldset legend={{ children: 'X axis Label' }}>
-              <TextInput
-                placeholder="X axis label"
-                value={value.xlabel}
-                onChange={value => onChange('xlabel', value)}
-                aria-label="X Label"
-                maxLength={parseInt(X_LABEL_MAX_LENGTH)}
-              />
-            </FormFieldset>
-          </section>
-          <section>
-            <div className="right-y-axis">
-              <div className="switch-wrapper">
-                <SwitchInput
-                  title="Use Right Y Axis"
-                  checked={value.yAxis2}
-                  onCheckedChange={(checked) => onChange('yAxis2', checked)}
+      <RiAccordion
+        className="chart-form-accordion"
+        collapsible
+        open={moreOptions}
+        onOpenChange={setMoreOptions}
+        label={moreOptions ? 'Less options' : 'More options'}
+        content={
+          <div className="more-options">
+            <section>
+              <FormFieldset legend={{ children: 'Title' }}>
+                <TextInput
+                  placeholder="Title"
+                  value={value.title}
+                  onChange={(value) => onChange('title', value)}
+                  aria-label="Title"
+                  maxLength={parseInt(TITLE_MAX_LENGTH)}
+
                 />
-              </div>
-              {value.yAxis2 && (
-                <div className="y-axis-2">
-                  {Object.keys(value.keyToY2Axis).map((key) => (
-                    <div className="y-axis-2-item">
-                      <div>{key}</div>
-                      <EuiButtonGroup
-                        buttonSize="compressed"
-                        options={['left', 'right'].map((v: string) => ({
-                          id: v,
-                          label: v,
-                        }))}
-                        onChange={(id) =>
-                          onChange('keyToY2Axis', {
-                            ...value.keyToY2Axis,
-                            [key]: id === 'right',
-                          })
-                        }
-                        idSelected={
-                          value.keyToY2Axis[key] === true ? 'right' : 'left'
-                        }
-                        isFullWidth
-                      />
-                    </div>
-                  ))}
+              </FormFieldset>
+              <FormFieldset legend={{ children: 'X axis Label' }}>
+                <TextInput
+                  placeholder="X axis label"
+                  value={value.xlabel}
+                  onChange={(value) => onChange('xlabel', value)}
+                  aria-label="X Label"
+                  maxLength={parseInt(X_LABEL_MAX_LENGTH)}
+                />
+              </FormFieldset>
+            </section>
+            <section>
+              <div className="right-y-axis">
+                <div className="switch-wrapper">
+                  <SwitchInput
+                    title="Use Right Y Axis"
+                    checked={value.yAxis2}
+                    onCheckedChange={(checked) => onChange('yAxis2', checked)}
+                  />
                 </div>
-              )}
-            </div>
-          </section>
-          <section className="y-axis-config">
-            <YAxisConfigForm
-              label="Left Y Axis"
-              onChange={(v: any) => onChange('yAxisConfig', v)}
-              isLeftYAxis={true}
-              value={value.yAxisConfig}
-            />
-            {value.yAxis2 && (
+                {value.yAxis2 && (
+                  <div className="y-axis-2">
+                    {Object.keys(value.keyToY2Axis).map((key) => (
+                      <div className="y-axis-2-item" key={key}>
+                        <div>{key}</div>
+                        <ButtonGroup>
+                          {yAxisButtonGroupItems.map((item) => (
+                            <ButtonGroup.Button
+                              isSelected={value.keyToY2Axis[key] === item.value}
+                              onClick={() =>
+                                onChange('keyToY2Axis', {
+                                  ...value.keyToY2Axis,
+                                  [key]: item.value,
+                                })
+                              }
+                            >
+                              {item.label}
+                            </ButtonGroup.Button>
+                          ))}
+                        </ButtonGroup>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </section>
+            <section className="y-axis-config">
               <YAxisConfigForm
-                label="Right Y Axis"
-                onChange={(v: any) => onChange('yAxis2Config', v)}
-                isLeftYAxis={false}
-                value={value.yAxis2Config}
+                label="Left Y Axis"
+                onChange={(v: any) => onChange('yAxisConfig', v)}
+                isLeftYAxis={true}
+                value={value.yAxisConfig}
               />
-            )}
-          </section>
-        </div>
-      )}
+              {value.yAxis2 && (
+                <YAxisConfigForm
+                  label="Right Y Axis"
+                  onChange={(v: any) => onChange('yAxis2Config', v)}
+                  isLeftYAxis={false}
+                  value={value.yAxis2Config}
+                />
+              )}
+            </section>
+          </div>
+        }
+      />
     </form>
   )
 }
@@ -169,6 +183,8 @@ const YAxisConfigForm = ({ value, onChange, label }: any) => (
   </div>
 )
 
+const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
+
 interface EnumSelectProps {
   enumType: any
   inputLabel: string
@@ -178,13 +194,18 @@ const EnumSelect = ({
   enumType,
   inputLabel,
   ...props
-}: EnumSelectProps & EuiButtonGroupProps) => (
-  <EuiButtonGroup
-    legend="form-button"
-    buttonSize="compressed"
-    options={Object.values(enumType).map((v: string) => ({ id: v, label: v }))}
-    onChange={(id) => props.onChange({ target: { value: id } } as any)}
-    idSelected={props.value.toString()}
-    isFullWidth
-  />
+}: EnumSelectProps & ButtonGroupProps) => (
+  <ButtonGroup>
+    {Object.values(enumType).map((v) => (
+      <ButtonGroup.Button
+        isSelected={props.value === v}
+        key={String(v)}
+        onClick={() =>
+          props.onChange?.({ target: { value: String(v) } } as any)
+        }
+      >
+        {capitalize(String(v))}
+      </ButtonGroup.Button>
+    ))}
+  </ButtonGroup>
 )
diff --git a/redisinsight/ui/src/packages/redistimeseries-app/src/styles/styles.scss b/redisinsight/ui/src/packages/redistimeseries-app/src/styles/styles.scss
index c1a9097d33..37b5b85865 100644
--- a/redisinsight/ui/src/packages/redistimeseries-app/src/styles/styles.scss
+++ b/redisinsight/ui/src/packages/redistimeseries-app/src/styles/styles.scss
@@ -9,112 +9,6 @@ div.plotly-notifier {
   --body-color: white;
   --text-color: #B5B6C0;
 
-  // Text field
-  .euiFieldText {
-    color: #B5B6C0;
-    font-size: 14px;
-    height: 30px;
-    width: 240px;
-
-    &:focus {
-      background-image: unset;
-    }
-  }
-
-  // Text legend
-  .euiFormLegend {
-    font-size: 13px medium;
-    color: #B5B6C0;
-  }
-  .euiFormLegend:not(.euiFormLegend-isHidden) {
-    margin-bottom: 6px;
-  }
-
-  // accordion
-  .euiAccordion__button {
-    font-size: 13px;
-    color: #B5B6C0;
-  }
-  .euiAccordion__buttonReverse .euiAccordion__iconWrapper {
-    display: flex;
-    align-items: center;
-
-    svg {
-      height: 10px;
-      width: 10px;
-    }
-  }
-  .euiAccordion__button:focus .euiAccordion__iconWrapper {
-    animation: unset !important;
-    color: inherit;
-    -webkit-animation: unset !important;
-  }
-
-
-  // toggle button group
-  .euiButtonGroupButton .euiButton__text {
-    text-transform: capitalize;
-  }
-  .euiButtonGroup--compressed .euiButtonGroupButton {
-    height: 30px;
-    width: 66px;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected {
-    background-color: #292F47;
-    color: #8BA2FF;
-    font-size: 13px;
-    padding: 0px;
-    font-weight: normal;
-    border-color: #465282;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected:hover {
-    background-color: #292F47;
-    text-decoration: unset;
-    outline: unset;
-  }
-  .euiButtonGroup--compressed .euiButtonGroup__buttons {
-    label:first-child {
-      border: 1px solid #465282;
-      border-radius: 4px;
-      border-right: 0px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-      width: 68px;
-      font-size: 13px;
-    }
-    label:last-child {
-      font-size: 13px;
-      width: 68px;
-      border: 1px solid #465282;
-      border-radius: 4px;
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-    }
-  }
-
-  .euiButtonGroup--compressed .euiButtonGroupButton {
-    padding: 0px;
-  }
-
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected:focus {
-    background-color: #292F47;
-    text-decoration: unset;
-    outline: unset;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected:focus-within {
-    background-color: #292F47;
-    border-color: #465282;
-    text-decoration: unset;
-    outline: unset;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]) {
-    color: var(--wbTextColor);
-    background: black;
-    border-radius: 1px;
-    text-decoration: none;
-  }
-
-
   .rangeslider-mask-min, .rangeslider-mask-max {
     fill: #161617 !important;
     fill-opacity: 1 !important;
@@ -152,116 +46,6 @@ div.plotly-notifier {
     fill-opacity: 1 !important;
   }
 
-  // Text field
-  .euiFieldText {
-    color: #415681;
-    font-size: 14px;
-    height: 30px;
-    width: 240px;
-
-    &:focus {
-      background-image: unset;
-    }
-  }
-
-  // Text legend
-  .euiFormLegend {
-    font-size: 13px medium;
-    color: #527298;
-  }
-  .euiFormLegend:not(.euiFormLegend-isHidden) {
-    margin-bottom: 6px;
-  }
-
-  // accordion
-  .euiAccordion__button {
-    font-size: 13px;
-    color: #527298;
-  }
-  .euiAccordion__buttonReverse .euiAccordion__iconWrapper {
-    display: flex;
-    align-items: center;
-
-    svg {
-      height: 10px;
-      width: 10px;
-    }
-  }
-  .euiAccordion__button:focus .euiAccordion__iconWrapper {
-    animation: unset !important;
-    color: inherit;
-    -webkit-animation: unset !important;
-  }
-
-  // toggle button group
-  .euiButtonGroupButton .euiButton__text {
-    text-transform: capitalize;
-  }
-  .euiButtonGroup--compressed .euiButtonGroupButton {
-    height: 30px;
-    width: 66px;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected {
-    background-color: #D7E3FA;
-    color: #3163D8;
-    font-size: 13px;
-    padding: 0px;
-    font-weight: normal;
-    border-color: #243DAC;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected:hover {
-    background-color: #D7E3FA;
-    text-decoration: unset;
-    outline: unset;
-  }
-
-  .euiButtonGroup--compressed .euiButtonGroup__buttons {
-    label:first-child {
-      border: 1px solid #243DAC;
-      border-radius: 4px;
-      border-right: 0px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-      width: 68px;
-      font-size: 13px;
-    }
-    label:last-child {
-      font-size: 13px;
-      width: 68px;
-      border: 1px solid #243DAC;
-      border-radius: 4px;
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-    }
-  }
-  .euiButtonGroup--compressed .euiButtonGroupButton {
-    padding: 0px;
-  }
-
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]) {
-    &:focus, &:focus-within, &:hover {
-      background-color: #D7E3FA;
-    }
-  }
-
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected:focus {
-    background-color: #D7E3FA;
-    text-decoration: unset;
-    outline: unset;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]).euiButtonGroupButton-isSelected:focus-within {
-    background-color: #D7E3FA;
-    border-color: #243DAC;
-    text-decoration: unset;
-    outline: unset;
-  }
-  .euiButtonGroupButton.euiButtonGroupButton--text:not([class*=isDisabled]) {
-    background: white;
-    border-radius: 1px;
-    text-decoration: none;
-  }
-
-
   .chart-config-form {
     .more-options {
       section {
@@ -304,68 +88,60 @@ body {
 .y-axis-config  {
   fieldset {
     width: 100%;
-    .euiButtonGroup__buttons label {
-      width: 100%;
-    }
   }
 }
 
 .chart-config-form {
-
+  width: 50%;
+  min-width: fit-content;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-
 
-  .chart-top-form {
+  .chart-form-top {
     display: flex;
     justify-content: center;
-    align-items: center;
-    padding-bottom: 12px;
-
-    fieldset {
-      min-width: 150px;
-    }
-
-    & > * {
-      padding-right: 36px;
+    & > :not(:first-child) {
+      margin-left: 36px;
     }
   }
 
-  .more-options {
-    section {
-      display: flex;
-      padding-top: 24px;
-      padding-bottom: 36px;
-      padding-left: 30px;
-      margin-bottom: 5px;
-
-      & > * {
-        padding-right: 30px;
-      }
+  .chart-form-accordion {
+    margin-top: 20px;
 
-      .right-y-axis {
+    .more-options {
+      width: 100%;
+      section {
         display: flex;
+        padding: 15px;
         justify-content: space-between;
-        width: 100%;
+        gap: 10px;
 
-        .switch-wrapper {
-          width: 100%;
+        &:not(:first-child) {
+          margin-top: 10px;
         }
-
-      }
-
-      .y-axis-2 {
-        width: 100%;
-        .y-axis-2-item {
+  
+        .right-y-axis {
           display: flex;
-          align-items: center;
           justify-content: space-between;
-          font-size: 13px;
-          padding-bottom: 10px;
+          align-items: center;
+          width: 100%;
+  
+          .switch-wrapper {
+            width: 100%;
+          }
+        }
+  
+        .y-axis-2 {
+          width: 100%;
+          .y-axis-2-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: 13px;
+            gap: 5px;
+          }
         }
       }
-
     }
   }
 }