diff --git a/package-lock.json b/package-lock.json
index 1fe413a7a..b4ec977a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lyyti/design-system",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lyyti/design-system",
-      "version": "1.5.1",
+      "version": "1.5.2",
       "license": "MIT",
       "dependencies": {
         "@emotion/react": "11.10.6",
diff --git a/package.json b/package.json
index a666f8258..9459244b3 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "engines": {
     "node": "^18",
     "npm": "^8"
diff --git a/src/components/ToggleButtonGroup.tsx b/src/components/ToggleButtonGroup.tsx
index fe90d22cb..0b85c207a 100644
--- a/src/components/ToggleButtonGroup.tsx
+++ b/src/components/ToggleButtonGroup.tsx
@@ -1,8 +1,7 @@
-import { useTheme } from '@mui/material/styles';
 import { ToggleButtonGroup as MuiToggleButtonGroup, ToggleButton as MuiToggleButton, type SxProps as MuiSxProps, type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from "@mui/material"
 
 export interface ToggleButtonOption {
-    value: number | string;
+    value: string;
     text: string;
     sx?: MuiSxProps;
     ariaLabel?: string;
@@ -26,8 +25,6 @@ const ToggleButtonGroup = ({
   testId,
   ...props
 }: ToggleButtonGroupProps) => {
-  const theme = useTheme();
-
   return <MuiToggleButtonGroup
     data-testid={testId}
     value={value}
@@ -35,14 +32,15 @@ const ToggleButtonGroup = ({
     onChange={onChange}
     aria-label={ariaLabel ?? 'toggle button group'}
     sx={{
-      color: `${theme.palette.primary.main} !important`,
+      color: theme => theme.palette.primary.main,
       height: '40px',
-      border: `1px solid ${theme.palette.primary.main}`,
+      border: theme => `1px solid ${theme.palette.primary.main}`,
       '& .MuiToggleButton-root': {
-        width: '130px', color:theme.palette.primary.main 
+        width: '130px', 
+        color: theme => theme.palette.primary.main 
       },
       '& .Mui-selected, & .Mui-selected:hover': {
-        bgcolor: `${theme.palette.primary.main} !important`,
+        bgcolor: theme => `${theme.palette.primary.main} !important`,
         color: 'white !important',
       },
       ...sx
@@ -56,7 +54,7 @@ const ToggleButtonGroup = ({
       value={option.value} 
       aria-label={option.ariaLabel ?? `toggle button ${option.value}`}
     >
-      {option.value}
+      {option.text}
     </MuiToggleButton>
     )}
   </MuiToggleButtonGroup>
diff --git a/stories/Inputs/ToggleButtonGroup.stories.tsx b/stories/Inputs/ToggleButtonGroup.stories.tsx
index a6586d13a..fee38b4eb 100644
--- a/stories/Inputs/ToggleButtonGroup.stories.tsx
+++ b/stories/Inputs/ToggleButtonGroup.stories.tsx
@@ -1,11 +1,11 @@
 import { Story, Meta } from '@storybook/react/types-6-0';
-import ToggleButtonGroup, { ToggleButtonGroupProps } from '../../src/components/ToggleButtonGroup';
+import ToggleButtonGroup, { ToggleButtonGroupProps, ToggleButtonOption } from '../../src/components/ToggleButtonGroup';
 
-const options = [
-  { value: 1, text: 'Option 1' },
-  { value: 2, text: 'Option 2' },
-  { value: 3, text: 'Option 3' },
-  { value: 4, text: 'Option 4' }
+const options: ToggleButtonOption[] = [
+  { value: '1', text: 'Option 1' },
+  { value: '2', text: 'Option 2' },
+  { value: '3', text: 'Option 3' },
+  { value: '4', text: 'Option 4' }
 ];
 
 export default {
@@ -18,7 +18,6 @@ export default {
 
 const Template: Story<ToggleButtonGroupProps> = (args) => <ToggleButtonGroup {...args} />;
 
-
 export const Basic = Template.bind({});
 Basic.args = {
   options: options,