diff --git a/datahub-web-react/src/alchemy-components/components/Switch/Switch.tsx b/datahub-web-react/src/alchemy-components/components/Switch/Switch.tsx
index fabb2e01642c9f..9084ccb267c8c8 100644
--- a/datahub-web-react/src/alchemy-components/components/Switch/Switch.tsx
+++ b/datahub-web-react/src/alchemy-components/components/Switch/Switch.tsx
@@ -2,13 +2,13 @@ import { Tooltip } from '@components';
 import React, { useEffect, useState } from 'react';
 
 import {
-    IconContainer,
     Label,
     Required,
     Slider,
     StyledIcon,
     StyledInput,
     SwitchContainer,
+    ToggleButton,
 } from '@components/components/Switch/components';
 import { SwitchProps } from '@components/components/Switch/types';
 
@@ -66,16 +66,9 @@ export const Switch = ({
             />
             <Tooltip title={isDisabled && disabledHoverText ? disabledHoverText : undefined} showArrow={false}>
                 <Slider size={size} isSquare={isSquare} isDisabled={isDisabled}>
-                    <IconContainer>
-                        {icon && (
-                            <StyledIcon
-                                icon={icon}
-                                color={checked ? colorScheme || 'violet' : 'inherit'}
-                                size={size || 'md'}
-                                checked={checked}
-                            />
-                        )}
-                    </IconContainer>
+                    <ToggleButton checked={checked} isDisabled={isDisabled}>
+                        {icon && <StyledIcon icon={icon} size={size || 'md'} checked={checked} />}
+                    </ToggleButton>
                 </Slider>
             </Tooltip>
         </SwitchContainer>
diff --git a/datahub-web-react/src/alchemy-components/components/Switch/components.ts b/datahub-web-react/src/alchemy-components/components/Switch/components.ts
index 67893da5776fe8..626fed26ec9bcd 100644
--- a/datahub-web-react/src/alchemy-components/components/Switch/components.ts
+++ b/datahub-web-react/src/alchemy-components/components/Switch/components.ts
@@ -2,13 +2,6 @@ import styled from 'styled-components';
 
 import { Icon } from '@components/components/Icon';
 import type { SwitchLabelPosition } from '@components/components/Switch/types';
-import {
-    getIconTransformPositionLeft,
-    getIconTransformPositionTop,
-    getInputHeight,
-    getSliderTransformPosition,
-    getToggleSize,
-} from '@components/components/Switch/utils';
 import { formLabelTextStyles } from '@components/components/commonStyles';
 import { borders, colors, shadows, spacing, transition } from '@components/theme';
 import { ColorOptions, SizeOptions } from '@components/theme/config';
@@ -32,40 +25,41 @@ export const SwitchContainer = styled.label<{ labelPosition: SwitchLabelPosition
 );
 
 export const Slider = styled.div<{ size?: SizeOptions; isSquare?: boolean; isDisabled?: boolean }>(
-    ({ size, isSquare, isDisabled }) => ({
-        '&:before': {
-            transition: `${transition.duration.normal} all`,
-            content: '""',
-            position: 'absolute',
-            minWidth: getToggleSize(size || 'md', 'slider'), // sliders width and height must be same
-            minHeight: getToggleSize(size || 'md', 'slider'),
-            borderRadius: !isSquare ? '35px' : '0px',
-            top: '50%',
-            left: spacing.xxsm,
-            transform: 'translate(0, -50%)',
-            backgroundColor: !isDisabled ? colors.white : colors.gray[200],
-            boxShadow: `
-				0px 1px 2px 0px rgba(16, 24, 40, 0.06),
-				0px 1px 3px 0px rgba(16, 24, 40, 0.12)
-			`,
-        },
-        borderRadius: !isSquare ? '32px' : '0px',
-        minWidth: getToggleSize(size || 'md', 'input'),
-        minHeight: getInputHeight(size || 'md'),
-    }),
-    {
+    ({ isSquare, isDisabled }) => ({
+        borderRadius: isSquare ? '0px' : '200px',
+        width: '34px',
+        height: '20px',
+        minWidth: '34px',
+        minHeight: '20px',
+        position: 'relative',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        position: 'relative',
-
-        backgroundColor: colors.gray[100],
-        padding: spacing.xxsm,
+        backgroundColor: isDisabled ? colors.gray[100] : colors.gray[100],
+        padding: '0px',
         transition: `${transition.duration.normal} all`,
         boxSizing: 'content-box',
-    },
+    }),
 );
 
+export const ToggleButton = styled.div<{ checked?: boolean; isDisabled?: boolean }>`
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    border-radius: 200px;
+    background-color: ${({ isDisabled }) => (!isDisabled ? colors.white : colors.gray[1500])};
+    box-shadow:
+        0px 1px 2px 0px rgba(16, 24, 40, 0.06),
+        0px 1px 3px 0px rgba(16, 24, 40, 0.12);
+    transition: ${transition.duration.normal} all;
+    left: ${({ checked }) => (checked ? '15px' : '1px')};
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
 export const Required = styled.span({
     color: colors.red[500],
     marginLeft: spacing.xxsm,
@@ -81,12 +75,13 @@ export const StyledInput = styled.input<{
     position: absolute;
 
     &:checked + ${Slider} {
-        background-color: ${(props) =>
-            !props.disabled ? getColor(props.colorScheme, 500, props.theme) : colors.gray[100]};
-
-        &:before {
-            transform: ${({ customSize }) => getSliderTransformPosition(customSize || 'md')};
-        }
+        background: ${(props) => {
+            if (props.disabled) return colors.gray[100];
+            if (props.colorScheme === 'violet' || props.colorScheme === 'primary') {
+                return 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(83.44, 63, 209, 0.20) 100%), #533FD1';
+            }
+            return getColor(props.colorScheme, 500, props.theme);
+        }};
     }
 
     &:focus-within + ${Slider} {
@@ -98,20 +93,15 @@ export const StyledInput = styled.input<{
 `;
 
 export const StyledIcon = styled(Icon)<{ checked?: boolean; size: SizeOptions }>(
-    ({ checked, size }) => ({
-        left: getIconTransformPositionLeft(size, checked || false),
-        top: getIconTransformPositionTop(size),
+    ({ checked }) => ({
+        color: checked ? colors.violet[500] : colors.gray[500],
+        width: '14px',
+        height: '14px',
     }),
     {
         transition: `${transition.duration.normal} all`,
-        position: 'absolute',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: colors.gray[500],
     },
 );
-
-export const IconContainer = styled.div({
-    position: 'relative',
-});