diff --git a/package-lock.json b/package-lock.json
index 8b9b1a2..abf33f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@oncehub/ui-react",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@oncehub/ui-react",
-      "version": "1.4.16",
+      "version": "1.4.17",
       "devDependencies": {
         "@babel/core": "^7.23.2",
         "@headlessui/react": "^1.7.17",
diff --git a/package.json b/package.json
index 86cfa92..97aec59 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "1.4.16",
+  "version": "1.4.17",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"
diff --git a/src/lib/components/multi-select/README.md b/src/lib/components/multi-select/README.md
index b59c199..a24c1a8 100644
--- a/src/lib/components/multi-select/README.md
+++ b/src/lib/components/multi-select/README.md
@@ -6,23 +6,25 @@ Import the `MultiSelect` component into your React application:
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `MultiSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `MultiSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
@@ -30,7 +32,7 @@ export interface Option {
 
 The `MultiSelect` component accepts the following props:
 
-- `options (Array)`: An array of Option objects representing the available choices.
+- `options (Array)`: An array of IOption objects representing the available choices.
 - `checkedValue (Array)`: An array of numbers representing the initially selected options.
 - `onSelectionChange (Function)`: A callback function that is called when the selection changes. It receives an array of selected option values.
 - `minOptions` (optional): Minimum number of options that must be selected (default: 0).
@@ -42,11 +44,11 @@ Example
 import React, { useState } from 'react';
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 
-const options : Option[] = [
-	{ id: '1', text: 'Option 1', order: 1 },
-	{ id: '2', text: 'Option 2', order: 2 },
- { id: '3', text: 'Option 3', order: 3, disabled:true },
-	// Add more options here
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
+  //Add more options
 ];
 
 function App() {
diff --git a/src/lib/components/multi-select/multi-select.stories.tsx b/src/lib/components/multi-select/multi-select.stories.tsx
index ea8c5a0..ba0d09e 100644
--- a/src/lib/components/multi-select/multi-select.stories.tsx
+++ b/src/lib/components/multi-select/multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MultiSelect } from './multi-select';
-import { Option } from './multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Basic/MultiSelect',
@@ -25,7 +25,7 @@ const meta: Meta<typeof MultiSelect> = {
       },
     },
     options: {
-      description: 'An array of Option objects representing the available choices.',
+      description: 'An array of IOption objects representing the available choices.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -62,10 +62,10 @@ const meta: Meta<typeof MultiSelect> = {
 export default meta;
 type Story = StoryObj<typeof MultiSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 ];
 const handleSelectionChange = () => {};
 
diff --git a/src/lib/components/multi-select/multi-select.tsx b/src/lib/components/multi-select/multi-select.tsx
index 3ecce0c..c5f70c1 100644
--- a/src/lib/components/multi-select/multi-select.tsx
+++ b/src/lib/components/multi-select/multi-select.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, CSSProperties, KeyboardEvent } from 'react';
-import { Option } from './multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 import { Button } from '../button/button';
 import styles from './multi-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import PseudoCheckbox from '../common/pseudo-checkbox/pseudo-checkbox';
 
 interface Props {
-  options: Option[];
+  options: IOption[];
   checkedValue: string[];
   onSelectionChange: (val: string[]) => void;
   maxOptions?: number;
@@ -94,7 +94,7 @@ export const MultiSelect: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    const filtered = options.filter((option) => option.text.toLowerCase().includes(searchTerm.toLowerCase()));
+    const filtered = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
     filteredOptions.current = filtered;
   }, [options, searchTerm]);
 
@@ -102,28 +102,24 @@ export const MultiSelect: React.FC<Props> = ({
   const selectedText =
     selectedOptions.length > 0
       ? selectedOptions
-          .map((id) => {
-            const selectedOption = options.find((option) => option.id === id);
-            return selectedOption?.text !== null ? selectedOption?.text : '';
+          .map((value) => {
+            const selectedOption = options.find((option) => option.value === value);
+            return selectedOption?.label !== null ? selectedOption?.label : '';
           })
-          .filter((text) => text !== '')
+          .filter((label) => label !== '')
           .join(', ')
       : 'Select your option';
 
   const handleLiClick = (id: string) => {
-    const clickedOption = options.find((option) => option.id === id);
-    if (
-      clickedOption &&
-      !clickedOption.disabled &&
-      (maxOptions === undefined || selectedOptions.length <= maxOptions)
-    ) {
+    const clickedOption = options.find((option) => option.value === id);
+    if (clickedOption && !clickedOption.disable && (maxOptions === undefined || selectedOptions.length <= maxOptions)) {
       const isSelected = selectedOptions.includes(id);
       const newSelectedValues = isSelected ? selectedOptions.filter((val) => val !== id) : [...selectedOptions, id];
       const isWithinLimit = maxOptions === undefined || newSelectedValues.length <= maxOptions;
       if (isWithinLimit && dropdownOpen) {
         setSelectedOptions(newSelectedValues);
         onSelectionChange(newSelectedValues);
-        announceOption(`${clickedOption?.text} ${newSelectedValues.includes(id) ? 'selected' : 'not selected'}`);
+        announceOption(`${clickedOption?.label} ${newSelectedValues.includes(id) ? 'selected' : 'not selected'}`);
       }
     }
   };
@@ -257,7 +253,7 @@ export const MultiSelect: React.FC<Props> = ({
       }
     } else if (key === 'Enter' || key === 'Space' || key === ' ') {
       if (focusedIndex !== -1) {
-        handleLiClick(filteredOptions.current[focusedIndex].id);
+        handleLiClick(filteredOptions.current[focusedIndex].value);
       }
     } else if (key === 'Escape') {
       toggleDropDown(false);
@@ -400,23 +396,23 @@ export const MultiSelect: React.FC<Props> = ({
                           {filteredOptions.current.map((option, index) => (
                             // eslint-disable-next-line jsx-a11y/role-supports-aria-props
                             <li
-                              key={option.id}
+                              key={option.value}
                               className={`${styles.optionsList} ${index === focusedIndex ? styles.focused : ''}`}
-                              onClick={() => handleLiClick(option.id)}
+                              onClick={() => handleLiClick(option.value)}
                               aria-selected={index === focusedIndex}
                               role="option"
                             >
                               <PseudoCheckbox
                                 themeColor={themeColor}
-                                checked={selectedOptions.includes(option.id)}
+                                checked={selectedOptions.includes(option.value)}
                                 disabled={
-                                  option.disabled ||
+                                  option.disable ||
                                   (maxOptions !== undefined &&
                                     selectedOptions.length >= maxOptions &&
-                                    !selectedOptions.includes(option.id))
+                                    !selectedOptions.includes(option.value))
                                 }
                               />
-                              <span>{option.text}</span>
+                              <span>{option.label}</span>
                             </li>
                           ))}
                         </ul>
diff --git a/src/lib/components/multi-select/multi-select.type.ts b/src/lib/components/multi-select/multi-select.type.ts
deleted file mode 100644
index 2bdd689..0000000
--- a/src/lib/components/multi-select/multi-select.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Option {
-  id: string;
-  text: string;
-  order: number;
-  disabled?: boolean;
-}
diff --git a/src/lib/components/quick-multi-select/README.md b/src/lib/components/quick-multi-select/README.md
index 715af89..34349d0 100644
--- a/src/lib/components/quick-multi-select/README.md
+++ b/src/lib/components/quick-multi-select/README.md
@@ -6,23 +6,25 @@ Import the `QuickMultiSelect` component into your React application:
 import QuickMultiSelect from '@/once-ui/quick-multi-select/quick-multi-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `QuickMultiSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `QuickMultiSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disabled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
@@ -30,7 +32,7 @@ export interface Option {
 
 The `QuickMultiSelect` component accepts the following props:
 
-- `options (Array)`: An array of Option objects representing the available choices.
+- `options (Array)`: An array of IOption objects representing the available choices.
 - `checkedValue (Array)`: An array of numbers representing the initially selected options.
 - `onSelectionChange (Function)`: A callback function that is called when the selection changes. It receives an array of selected option values.
 - `maxOptions?`: Maximum number of option that can be checked;
@@ -41,10 +43,10 @@ Example
 import React, { useState } from 'react';
 import MultiSelect from '@/once-ui/multi-select/multi-select';
 
-const options = [
-	{ id: '1', text: 'Option 1', order: 1 },
-	{ id: '2', text: 'Option 2', order: 2 },
-	{ id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 	// Add more options here
 ];
 
diff --git a/src/lib/components/quick-multi-select/index.tsx b/src/lib/components/quick-multi-select/index.tsx
index cf63bfe..64abd60 100644
--- a/src/lib/components/quick-multi-select/index.tsx
+++ b/src/lib/components/quick-multi-select/index.tsx
@@ -1,2 +1 @@
 export * from './quick-multi-select';
-export * from './quick-multi-select.type';
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
index c5149cb..cec2837 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { QuickMultiSelect } from './quick-multi-select';
-import { Option } from './quick-multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickMultiSelect> = {
   title: 'Basic/QuickMultiSelect',
@@ -17,7 +17,7 @@ const meta: Meta<typeof QuickMultiSelect> = {
       },
     },
     options: {
-      description: 'An array of Option objects representing the available choices.',
+      description: 'An array of IOption objects representing the available choices.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -54,10 +54,10 @@ const meta: Meta<typeof QuickMultiSelect> = {
 export default meta;
 type Story = StoryObj<typeof QuickMultiSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
 ];
 const handleSelectionChange = () => {};
 
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.tsx b/src/lib/components/quick-multi-select/quick-multi-select.tsx
index c9221f6..8dc77df 100644
--- a/src/lib/components/quick-multi-select/quick-multi-select.tsx
+++ b/src/lib/components/quick-multi-select/quick-multi-select.tsx
@@ -1,12 +1,12 @@
-import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, useRef, useState } from 'react';
 import { Checkbox } from '../checkbox/checkbox';
 import styles from './quick-multi-select.module.scss';
-import { Option } from './quick-multi-select.type';
+import { IOption } from '../../interfaces/select.type';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
 
 interface Props {
-  options: Option[];
+  options: IOption[];
   checkedValue: string[];
   onSelectionChange: (val: string[]) => void;
   maxOptions?: number;
@@ -31,8 +31,8 @@ export const QuickMultiSelect: React.FC<Props> = ({
   let theme: string;
 
   const handleLiClick = (id: string): void => {
-    const clickedOption = options.find((option) => option.id === id);
-    if (!clickedOption || clickedOption.disabled) {
+    const clickedOption = options.find((option) => option.value === id);
+    if (!clickedOption || clickedOption.disable) {
       return;
     }
     const checkbox = checkboxRefs.current[id];
@@ -65,54 +65,56 @@ export const QuickMultiSelect: React.FC<Props> = ({
         {options.map((option) => (
           <li
             style={{ ...quickMultiSelectStyleObj, ...style }}
-            key={option.id}
+            key={option.value}
             className={`${className} ${
-              option.disabled ||
-              (maxOptions !== undefined && selectedOptions.length >= maxOptions && !selectedOptions.includes(option.id))
+              option.disable ||
+              (maxOptions !== undefined &&
+                selectedOptions.length >= maxOptions &&
+                !selectedOptions.includes(option.value))
                 ? styles.disabled
                 : ''
-            } ${selectedOptions.includes(option.id) ? styles.selected : ''}`}
-            tabIndex={option.disabled ? -1 : 0}
-            onClick={() => handleLiClick(option.id)}
+            } ${selectedOptions.includes(option.value) ? styles.selected : ''}`}
+            tabIndex={option.disable ? -1 : 0}
+            onClick={() => handleLiClick(option.value)}
             onKeyPress={(event) => {
               if (event.key === ' ' || event.code === 'Space') {
                 event.preventDefault();
-                handleLiClick(option.id);
+                handleLiClick(option.value);
               }
             }}
             data-testid={'option-box'}
           >
             <Checkbox
-              id={option.id}
+              id={option.value}
               checkboxSize="large"
               tabIndex={-1}
               themeColor={themeColor}
               ref={(checkbox) => {
-                checkboxRefs.current[option.id] = checkbox; // Store checkbox reference
+                checkboxRefs.current[option.value] = checkbox; // Store checkbox reference
               }}
-              checked={selectedOptions.includes(option.id)}
+              checked={selectedOptions.includes(option.value)}
               disabled={
-                option.disabled ||
+                option.disable ||
                 (maxOptions !== undefined &&
                   selectedOptions.length >= maxOptions &&
-                  !selectedOptions.includes(option.id))
+                  !selectedOptions.includes(option.value))
               }
             >
               <span
                 style={{
                   color:
                     (themeColor && (themeColor === '#ffffff' || theme === 'light')) ||
-                    option.disabled ||
+                    option.disable ||
                     (maxOptions !== undefined &&
                       selectedOptions.length >= maxOptions &&
-                      !selectedOptions.includes(option.id))
+                      !selectedOptions.includes(option.value))
                       ? '#333333'
                       : themeColor && (themeColor !== '#ffffff' || theme !== 'light')
                       ? themeColor
                       : '#006bb1',
                 }}
               >
-                {option.text}
+                {option.label}
               </span>
             </Checkbox>
           </li>
diff --git a/src/lib/components/quick-multi-select/quick-multi-select.type.ts b/src/lib/components/quick-multi-select/quick-multi-select.type.ts
deleted file mode 100644
index 2bdd689..0000000
--- a/src/lib/components/quick-multi-select/quick-multi-select.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Option {
-  id: string;
-  text: string;
-  order: number;
-  disabled?: boolean;
-}
diff --git a/src/lib/components/quick-select/README.md b/src/lib/components/quick-select/README.md
index 8217807..365a89f 100644
--- a/src/lib/components/quick-select/README.md
+++ b/src/lib/components/quick-select/README.md
@@ -6,23 +6,25 @@ Import the `QuickSelect` component into your React application:
 import QuickSelect from '@/once-ui/quick-select/quick-select';
 ```
 
-## Option Interface
+## IOption Interface
 
-Before using the `QuickSelect` component, define an `Option` interface for representing the available choices. The `Option` interface should have the following properties:
+Before using the `QuickSelect` component, define an `IOption` interface for representing the available choices. The `IOption` interface should have the following properties:
 
-- `id (number)`: A unique identifier for the option.
-- `text (string)`: The text or label associated with the option.
+- `value (string)`: A unique identifier for the option.
+- `label (string)`: The text or label associated with the option.
 - `order (number, optional)`: An optional property that specifies the order of the option in a list or display.
 - `disabled (boolean, optional)`: An optional property that specifies whether the option is disabled or not.
+- `avatar (string, optional)`: An optional property that specifies the image path.
 
-Here's an example of how to define the `Option` interface:
+Here's an example of how to define the `IOption` interface:
 
 ```jsx
-export interface Option {
-	id: number;
-	text: string;
-	order?: number;
-	disbled?: boolean;
+export interface IOption {
+  value: string;
+  label: string;
+  order?: number;
+  avatar?: string;
+  disable?: boolean;
 }
 ```
 
@@ -30,9 +32,9 @@ export interface Option {
 
 ```ts
 interface Props {
-  options: Option[];
-  onSelect: (option: Option) => void;
-  selected: Option | null;
+  options: IOption[];
+  onSelect: (option: IOption) => void;
+  selected: IOption | null;
   themeColor?: string;
   className?: string;
   style?: CSSProperties;
@@ -42,7 +44,7 @@ interface Props {
 
 The `QuickMultiSelect` component accepts the following props:
 
-1. `options` (Required): An array of option objects, each containing an `id`, `text`, `order`, and `disabled`.
+1. `options` (Required): An array of option objects, each containing an `value`, `label`, `order`, `avatar` and `disable`.
 
 2. `onSelect` (Required): A callback function that gets called when an option is selected. It takes the selected option as an argument.
 
@@ -62,18 +64,18 @@ Example
 import React, { useState } from 'react';
 import QuickSelect from '@/once-ui/quick-select/quick-select';
 
-const options: Option[] = [
-  { id: '31', text: "Kaushal", order: 1 },
-  { id: '32', text: "Amit", order: 2 },
-  { id: '33', text: "Shubham", order: 3 },
-  { id: '34', text: "Shaurabh", order: 4, disabled : true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
+  // Add more options
 ];
 
 function App() {
   const [selectedOption, setSelectedOption] =
     (useState < Option) | (null > null);
 
-  const handleSelect = (option: Option) => {
+  const handleSelect = (option: IOption) => {
     setSelectedOption(option);
   };
   return (
diff --git a/src/lib/components/quick-select/quick-select.stories.tsx b/src/lib/components/quick-select/quick-select.stories.tsx
index 5616516..2b51117 100644
--- a/src/lib/components/quick-select/quick-select.stories.tsx
+++ b/src/lib/components/quick-select/quick-select.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { QuickSelect } from './quick-select';
-import { Option } from './quick-select.type';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof QuickSelect> = {
   title: 'Basic/QuickSelect',
@@ -17,7 +16,7 @@ const meta: Meta<typeof QuickSelect> = {
       },
     },
     options: {
-      description: 'An array of option objects, each containing an `id`, `text`, `order`, and `disabled`.',
+      description: 'An array of option objects, each containing an `value`, `label`, `order`, `avatar` and `disable`.',
       type: 'string',
       table: {
         defaultValue: { summary: '' },
@@ -73,10 +72,10 @@ const meta: Meta<typeof QuickSelect> = {
 export default meta;
 type Story = StoryObj<typeof QuickSelect>;
 
-const options: Option[] = [
-  { id: '1', text: 'Option 1', order: 1 },
-  { id: '2', text: 'Option 2', order: 2 },
-  { id: '3', text: 'Option 3', order: 3, disabled: true },
+const options: IOption[] = [
+  { value: '1', label: 'Option 1', order: 1 },
+  { value: '2', label: 'Option 2', order: 2 },
+  { value: '3', label: 'Option 3', order: 3, disable: true },
   // Add more options here
 ];
 const handleSelectionChange = () => {};
diff --git a/src/lib/components/quick-select/quick-select.tsx b/src/lib/components/quick-select/quick-select.tsx
index 160453b..274c2ae 100644
--- a/src/lib/components/quick-select/quick-select.tsx
+++ b/src/lib/components/quick-select/quick-select.tsx
@@ -1,13 +1,13 @@
 import { CSSProperties, FC, useState } from 'react';
 import styles from './quick-select.module.scss';
 import luminance from '@oncehub/relative-luminance';
-import { Option } from './quick-select.type';
+import { IOption } from '../../interfaces/select.type';
 import { ColorsService } from '../colors.service';
 
 interface Props {
-  options: Option[];
-  onSelect: (option: Option | undefined) => void;
-  selected?: Option;
+  options: IOption[];
+  onSelect: (option: IOption | undefined) => void;
+  selected?: IOption;
   themeColor?: string;
   className?: string;
   style?: CSSProperties;
@@ -30,7 +30,7 @@ export const QuickSelect: FC<Props> = ({
   let quickOptionTriangleStyleObj: CSSProperties = {};
   let checkmarkColor: string = '#ffffff';
   const selectOption = (option: any) => {
-    if (selectedOption?.id === option?.id) {
+    if (selectedOption?.value === option?.value) {
       setSelected(undefined);
       onSelect(undefined);
       return;
@@ -61,14 +61,14 @@ export const QuickSelect: FC<Props> = ({
     <div className={styles.singleSelectWrapper}>
       <div className={styles.quickOption}>
         <ul className={styles.quickOption} role="radiogroup" id={id}>
-          {options.map((option: Option) => (
+          {options.map((option: IOption) => (
             <li
-              tabIndex={option.disabled ? -1 : 0}
-              className={`${className} ${selectedOption?.id === option.id ? styles.selected : ''} ${
-                option.disabled ? styles.disabled : ''
+              tabIndex={option.disable ? -1 : 0}
+              className={`${className} ${selectedOption?.value === option.value ? styles.selected : ''} ${
+                option.disable ? styles.disabled : ''
               }`}
               style={{ ...quickOptionStyleObj, ...style }}
-              key={option.id}
+              key={option.value}
               onClick={() => selectOption(option)}
               onKeyPress={(event) => {
                 if (event.key === ' ' || event.code === 'Space') {
@@ -78,10 +78,10 @@ export const QuickSelect: FC<Props> = ({
               }}
               data-testid={'checkbox-input'}
               role="radio"
-              aria-checked={selectedOption?.id === option.id}
+              aria-checked={selectedOption?.value === option.value}
             >
-              {option.text}
-              {selectedOption?.id === option.id && !option.disabled && (
+              {option.label}
+              {selectedOption?.value === option.value && !option.disable && (
                 <div className={styles.triangle} style={{ ...quickOptionTriangleStyleObj }}>
                   {showLoader && (
                     <div className={styles.loader} style={{ borderRightColor: themeColor ?? '#006bb1' }}></div>
diff --git a/src/lib/components/quick-select/quick-select.type.ts b/src/lib/components/quick-select/quick-select.type.ts
deleted file mode 100644
index 2bdd689..0000000
--- a/src/lib/components/quick-select/quick-select.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Option {
-  id: string;
-  text: string;
-  order: number;
-  disabled?: boolean;
-}
diff --git a/src/lib/components/select/auto-complete.tsx b/src/lib/components/select/auto-complete.tsx
index ac2acb2..38ba186 100644
--- a/src/lib/components/select/auto-complete.tsx
+++ b/src/lib/components/select/auto-complete.tsx
@@ -1,6 +1,6 @@
 import { FC, useRef, useEffect, CSSProperties, useState } from 'react';
 import { Combobox } from '@headlessui/react';
-import { IOption } from './select.types';
+import { IOption } from '../../interfaces/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
@@ -167,7 +167,7 @@ export const AutoComplete: FC<Props> = ({
             <Combobox.Input
               ref={inputRef}
               data-testid={'select-input'}
-              className="tw-h-full tw-w-full tw-border-0 tw-border-b-[1px] tw-border-b-[#333333] tw-pb-2 tw-pl-[10px] tw-pr-10 tw-pt-2 tw-text-base tw-leading-5 tw-placeholder-[#666666] tw-shadow-none focus:tw-border-b-2 focus:tw-border-b-[#006bb1] focus:tw-pb-[7px] focus:tw-outline-none focus:tw-ring-[0px] focus-visible:tw-ring-[0px]"
+              className="tw-h-full tw-w-full tw-border-0 tw-border-b-[1px] tw-border-b-[#333333] tw-pb-2 tw-pl-[10px] tw-pr-10 tw-pt-2 tw-text-base tw-leading-5 tw-truncate tw-placeholder-[#666666] tw-shadow-none focus:tw-border-b-2 focus:tw-border-b-[#006bb1] focus:tw-pb-[7px] focus:tw-outline-none focus:tw-ring-[0px] focus-visible:tw-ring-[0px]"
               displayValue={displayInputValue}
               onChange={(event) => {
                 setQuery(event.target.value);
diff --git a/src/lib/components/select/index.tsx b/src/lib/components/select/index.tsx
index 6624d50..548095b 100644
--- a/src/lib/components/select/index.tsx
+++ b/src/lib/components/select/index.tsx
@@ -2,4 +2,3 @@ export * from './select';
 export * from './select-options';
 export * from './auto-complete';
 export * from './options';
-export * from './select.types';
diff --git a/src/lib/components/select/select.stories.tsx b/src/lib/components/select/select.stories.tsx
index 7681e3c..65e5854 100644
--- a/src/lib/components/select/select.stories.tsx
+++ b/src/lib/components/select/select.stories.tsx
@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-
 import { Select } from './select';
 import { SelectOption, SelectOptions } from './select-options';
-import { IOption } from './select.types';
+import { IOption } from '../../interfaces/select.type';
 
 const meta: Meta<typeof Select> = {
   title: 'Basic/Select',
@@ -77,6 +76,7 @@ const children = (
     ))}
   </SelectOptions>
 );
+
 export const WithoutTheme: Story = {
   args: {
     selected: options[2],
diff --git a/src/lib/components/select/select.tsx b/src/lib/components/select/select.tsx
index 285e313..a320b9e 100644
--- a/src/lib/components/select/select.tsx
+++ b/src/lib/components/select/select.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef, useState } from 'react';
 import { Listbox } from '@headlessui/react';
-import { IOption } from './select.types';
+import { IOption } from '../../interfaces/select.type';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import luminance from '@oncehub/relative-luminance';
 import { ColorsService } from '../colors.service';
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5418566..8723db7 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,2 +1,3 @@
 import './tailwind/theme.css';
 export * from './components';
+export * from './interfaces';
diff --git a/src/lib/interfaces/index.tsx b/src/lib/interfaces/index.tsx
new file mode 100644
index 0000000..e4db6a5
--- /dev/null
+++ b/src/lib/interfaces/index.tsx
@@ -0,0 +1 @@
+export * from './select.type';
diff --git a/src/lib/components/select/select.types.ts b/src/lib/interfaces/select.type.ts
similarity index 85%
rename from src/lib/components/select/select.types.ts
rename to src/lib/interfaces/select.type.ts
index f9a5093..bb617d1 100644
--- a/src/lib/components/select/select.types.ts
+++ b/src/lib/interfaces/select.type.ts
@@ -1,6 +1,7 @@
 export interface IOption {
   value: string;
   label: string;
+  order?: number;
   avatar?: string;
   disable?: boolean;
 }