diff --git a/src/vis/bar/BarDirectionButtons.tsx b/src/vis/bar/BarDirectionButtons.tsx
index e2a1fa950..371597b19 100644
--- a/src/vis/bar/BarDirectionButtons.tsx
+++ b/src/vis/bar/BarDirectionButtons.tsx
@@ -1,4 +1,4 @@
-import { Container, SegmentedControl, Stack, Text } from '@mantine/core';
+import { Input, SegmentedControl } from '@mantine/core';
 import * as React from 'react';
 import { EBarDirection } from './interfaces';
 
@@ -9,20 +9,17 @@ interface BarDirectionProps {
 
 export function BarDirectionButtons({ callback, currentSelected }: BarDirectionProps) {
   return (
-    <Container p={0} fluid sx={{ width: '100%' }}>
-      <Stack spacing={0}>
-        <Text weight={500} size={14}>
-          Direction
-        </Text>
-        <SegmentedControl
-          value={currentSelected}
-          onChange={callback}
-          data={[
-            { label: EBarDirection.VERTICAL, value: EBarDirection.VERTICAL },
-            { label: EBarDirection.HORIZONTAL, value: EBarDirection.HORIZONTAL },
-          ]}
-        />
-      </Stack>
-    </Container>
+    <Input.Wrapper label="Direction">
+      <SegmentedControl
+        fullWidth
+        size="xs"
+        value={currentSelected}
+        onChange={callback}
+        data={[
+          { label: EBarDirection.VERTICAL, value: EBarDirection.VERTICAL },
+          { label: EBarDirection.HORIZONTAL, value: EBarDirection.HORIZONTAL },
+        ]}
+      />
+    </Input.Wrapper>
   );
 }
diff --git a/src/vis/correlation/CorrelationVisSidebar.tsx b/src/vis/correlation/CorrelationVisSidebar.tsx
index 7151248d2..06f477ab4 100644
--- a/src/vis/correlation/CorrelationVisSidebar.tsx
+++ b/src/vis/correlation/CorrelationVisSidebar.tsx
@@ -1,6 +1,6 @@
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ActionIcon, Group, NumberInput, SegmentedControl, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Group, Input, NumberInput, SegmentedControl, Text, Tooltip } from '@mantine/core';
 import * as d3 from 'd3v7';
 import * as React from 'react';
 import { ColumnInfo, EScaleType, ICommonVisSideBarProps, VisColumn } from '../interfaces';
@@ -25,24 +25,26 @@ export function CorrelationVisSidebar({
         columns={columns}
         currentSelected={config.numColumnsSelected || []}
       />
-      <Text size="sm" fw={500}>
-        Correlation type
-      </Text>
-      <SegmentedControl
-        size="sm"
-        data={Object.values(ECorrelationType)}
-        value={config.correlationType}
-        onChange={(v) => setConfig({ ...config, correlationType: v as ECorrelationType })}
-      />
-      <Text size="sm" fw={500}>
-        P-value scale type
-      </Text>
-      <SegmentedControl
-        size="sm"
-        data={Object.values(EScaleType)}
-        value={config.pScaleType}
-        onChange={(v) => setConfig({ ...config, pScaleType: v as EScaleType })}
-      />
+
+      <Input.Wrapper label="Correlation type">
+        <SegmentedControl
+          fullWidth
+          size="xs"
+          data={Object.values(ECorrelationType)}
+          value={config.correlationType}
+          onChange={(v) => setConfig({ ...config, correlationType: v as ECorrelationType })}
+        />
+      </Input.Wrapper>
+
+      <Input.Wrapper label="P-value scale type">
+        <SegmentedControl
+          fullWidth
+          size="xs"
+          data={Object.values(EScaleType)}
+          value={config.pScaleType}
+          onChange={(v) => setConfig({ ...config, pScaleType: v as EScaleType })}
+        />
+      </Input.Wrapper>
       <NumberInput
         styles={{ input: { width: '100%' }, label: { width: '100%' } }}
         precision={20}
diff --git a/src/vis/sidebar/NumericalColorButtons.tsx b/src/vis/sidebar/NumericalColorButtons.tsx
index 015fa0cde..04acb5511 100644
--- a/src/vis/sidebar/NumericalColorButtons.tsx
+++ b/src/vis/sidebar/NumericalColorButtons.tsx
@@ -1,4 +1,4 @@
-import { Group, SegmentedControl } from '@mantine/core';
+import { Group, Input, SegmentedControl } from '@mantine/core';
 import * as React from 'react';
 import { ENumericalColorScaleType } from '../interfaces';
 
@@ -12,31 +12,35 @@ export function NumericalColorButtons({ callback, currentSelected }: NumericalCo
   const divergentColors = ['#337ab7', '#7496c1', '#a5b4ca', '#d3d3d3', '#e5b19d', '#ec8e6a', '#ec6836'];
 
   return (
-    <SegmentedControl
-      value={currentSelected}
-      onChange={callback}
-      data={[
-        {
-          label: (
-            <Group spacing={0} noWrap>
-              {divergentColors.map((d) => {
-                return <span key={`colorScale ${d}`} style={{ border: '1px solid lightgrey', background: `${d}`, height: '1rem', width: '100%' }} />;
-              })}
-            </Group>
-          ),
-          value: ENumericalColorScaleType.DIVERGENT,
-        },
-        {
-          label: (
-            <Group spacing={0} noWrap>
-              {sequentialColors.map((d) => {
-                return <span key={`colorScale ${d}`} style={{ border: '1px solid lightgrey', background: `${d}`, height: '1rem', width: '100%' }} />;
-              })}
-            </Group>
-          ),
-          value: ENumericalColorScaleType.SEQUENTIAL,
-        },
-      ]}
-    />
+    <Input.Wrapper label="Color scale">
+      <SegmentedControl
+        fullWidth
+        value={currentSelected}
+        onChange={callback}
+        size="xs"
+        data={[
+          {
+            label: (
+              <Group spacing={0} noWrap>
+                {divergentColors.map((d) => {
+                  return <span key={`colorScale ${d}`} style={{ border: '1px solid lightgrey', background: `${d}`, height: '1rem', width: '100%' }} />;
+                })}
+              </Group>
+            ),
+            value: ENumericalColorScaleType.DIVERGENT,
+          },
+          {
+            label: (
+              <Group spacing={0} noWrap>
+                {sequentialColors.map((d) => {
+                  return <span key={`colorScale ${d}`} style={{ border: '1px solid lightgrey', background: `${d}`, height: '1rem', width: '100%' }} />;
+                })}
+              </Group>
+            ),
+            value: ENumericalColorScaleType.SEQUENTIAL,
+          },
+        ]}
+      />
+    </Input.Wrapper>
   );
 }
diff --git a/src/vis/violin/ViolinOverlayButtons.tsx b/src/vis/violin/ViolinOverlayButtons.tsx
index 0016988fc..adda8b7bd 100644
--- a/src/vis/violin/ViolinOverlayButtons.tsx
+++ b/src/vis/violin/ViolinOverlayButtons.tsx
@@ -1,4 +1,4 @@
-import { Container, SegmentedControl, Stack, Text } from '@mantine/core';
+import { Input, SegmentedControl } from '@mantine/core';
 import * as React from 'react';
 import { EViolinOverlay } from './interfaces';
 
@@ -9,20 +9,17 @@ interface ViolinOverlayProps {
 
 export function ViolinOverlayButtons({ callback, currentSelected }: ViolinOverlayProps) {
   return (
-    <Container p={0} fluid sx={{ width: '100%' }}>
-      <Stack spacing={0}>
-        <Text weight={500} size={14}>
-          Overlay
-        </Text>
-        <SegmentedControl
-          value={currentSelected}
-          onChange={callback}
-          data={[
-            { label: EViolinOverlay.NONE, value: EViolinOverlay.NONE },
-            { label: EViolinOverlay.BOX, value: EViolinOverlay.BOX },
-          ]}
-        />
-      </Stack>
-    </Container>
+    <Input.Wrapper label="Overlay">
+      <SegmentedControl
+        fullWidth
+        size="xs"
+        value={currentSelected}
+        onChange={callback}
+        data={[
+          { label: EViolinOverlay.NONE, value: EViolinOverlay.NONE },
+          { label: EViolinOverlay.BOX, value: EViolinOverlay.BOX },
+        ]}
+      />
+    </Input.Wrapper>
   );
 }