diff --git a/src/components/common/BaseSwitch/BaseSwitch.styles.tsx b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx
index a3fbfe04..7d0da3c5 100644
--- a/src/components/common/BaseSwitch/BaseSwitch.styles.tsx
+++ b/src/components/common/BaseSwitch/BaseSwitch.styles.tsx
@@ -28,7 +28,7 @@ export const Switch = styled((props: React.ComponentProps<typeof AntSwitch>) =>
   }
 
   &.ant-switch[aria-checked='false'] {
-    background-image: linear-gradient(to right, ${({ theme }) => theme.disabled}, ${({ theme }) => theme.disabled}),
-      linear-gradient(to right, ${({ theme }) => theme.background}, ${({ theme }) => theme.background});
+    background-image: ${({ theme }) => `linear-gradient(to right, ${theme.disabled}, ${theme.disabled})`},
+      ${({ theme }) => `linear-gradient(to right, ${theme.background}, ${theme.background})`};
   }
 `;
diff --git a/src/components/common/BaseTable/BaseTable.styles.tsx b/src/components/common/BaseTable/BaseTable.styles.tsx
index 93b5ca63..d5b4bdc6 100644
--- a/src/components/common/BaseTable/BaseTable.styles.tsx
+++ b/src/components/common/BaseTable/BaseTable.styles.tsx
@@ -1,6 +1,5 @@
 import styled, { useTheme } from 'styled-components';
 import { Table as AntTable, ConfigProvider } from 'antd';
-import { hexToRGB } from '@app/utils/utils';
 
 export const Table = styled((props: React.ComponentProps<typeof AntTable>) => {
   const theme = useTheme();
@@ -12,10 +11,10 @@ export const Table = styled((props: React.ComponentProps<typeof AntTable>) => {
             borderRadiusLG: 0,
             colorBorderSecondary: '#b3cbe1',
             colorTextHeading: theme.primary,
-            colorFillAlter: `rgba(${hexToRGB(theme.primary)}, 0.05)`,
+            colorFillAlter: `rgba(${theme.rgb.primary}, 0.05)`,
             controlItemBgActive: theme.primary1,
             colorSplit: 'rgba(0, 0, 0, 0.15)',
-            controlItemBgActiveHover: `rgba(${hexToRGB(theme.primary)}, 0.12)`,
+            controlItemBgActiveHover: `rgba(${theme.rgb.primary}, 0.12)`,
           },
         },
       }}
diff --git a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts
index 927b6826..f666d95c 100644
--- a/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts
+++ b/src/components/medical-dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.styles.ts
@@ -11,11 +11,7 @@ export const DoctorName = styled.span`
 `;
 
 export const DoctorCard = styled(BaseCard)`
-  background: linear-gradient(
-    to bottom,
-    ${({ theme }) => theme.primary} 5rem,
-    ${({ theme }) => theme.secondaryBackground} 5rem
-  );
+  background: ${({ theme }) => `linear-gradient(to bottom, ${theme.primary} 5rem, ${theme.secondaryBackground} 5rem)`};
 `;
 
 export const DoctorCardBody = styled.div`
diff --git a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts
index f64c14d3..eadc05be 100644
--- a/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts
+++ b/src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts
@@ -84,7 +84,7 @@ export const FullnessLine = styled.div<FullnessLineProps>`
   padding-right: 0.625rem;
   border-radius: 50px;
   width: ${(props) => props.width}%;
-  background: linear-gradient(90deg, ${({ theme }) => theme.warning} 0%, ${({ theme }) => theme.error} 100%);
+  background: ${({ theme }) => `linear-gradient(90deg, ${theme.warning} 0%, ${theme.error} 100%)`};
   color: ${({ theme }) => theme.textSecondary};
 
   @media only screen and (${media('xl')}) {