diff --git a/package-lock.json b/package-lock.json
index e488c3253..eb0d4e641 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@timechimp/tacugama",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@timechimp/tacugama",
-      "version": "9.0.0",
+      "version": "9.0.2",
       "license": "MIT",
       "dependencies": {
         "@ag-grid-community/client-side-row-model": "25.0.1",
diff --git a/package.json b/package.json
index 40ff82c87..1f45f20e0 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "9.0.1",
+  "version": "9.0.2",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/src/components/modal/Modal.stories.tsx b/src/components/modal/Modal.stories.tsx
index e8b0cc352..a4468018e 100755
--- a/src/components/modal/Modal.stories.tsx
+++ b/src/components/modal/Modal.stories.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 import { Modal, ModalHeader, ModalBody, ModalFooter, ModalProps, ModalSize } from './';
-import { Button } from 'components';
-import { ButtonKind, ButtonType } from 'models';
+import { Button, MultiSelect, SingleSelect } from '../';
+import { ButtonKind } from '../../models';
 
 export default {
   title: 'Components/Modal',
@@ -26,6 +26,13 @@ const Template: Story<ModalProps> = (args) => (
       Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus
       ex, non facilisis nisl. Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi.
       Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
+      <SingleSelect
+        options={[
+          { id: '1', name: 'test' },
+          { id: '2', name: 'test 2' },
+        ]}
+        creatable
+      />
     </ModalBody>
     <ModalFooter>
       <Button kind={ButtonKind.secondary}>Cancel</Button>
diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
index 9d816e7af..237572899 100755
--- a/src/components/select/Select.stories.tsx
+++ b/src/components/select/Select.stories.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
-import { Select } from './multi-select';
+import { MultiSelect } from './multi-select';
 import { SingleSelect as SingleSelectComponent, SingleSelectProps } from './single-select';
 import { OPTIONS } from './test-data';
-import { SelectProps } from './multi-select/types';
+import { MultiSelectProps } from './multi-select/types';
 
 export default {
   title: 'Components/Select',
 } as Meta;
 
-const Template: Story<SelectProps> = (args) => <Select {...args} />;
+const Template: Story<MultiSelectProps> = (args) => <MultiSelect {...args} />;
 Template.parameters = {
   design: {
     type: 'figma',
diff --git a/src/components/select/single-select/SingleSelect.tsx b/src/components/select/single-select/SingleSelect.tsx
index 606e685db..f6caa51e3 100644
--- a/src/components/select/single-select/SingleSelect.tsx
+++ b/src/components/select/single-select/SingleSelect.tsx
@@ -10,13 +10,18 @@ import {
   getInputBorderColor,
   getInputBackgroundColor,
   padding,
+  margin,
 } from '../../../utils';
 import { SingleSelectProps, Option } from './types';
 
 export const DEFAULT_VALUE_KEY = 'id';
 export const DEFAULT_LABEL_KEY = 'name';
 
-export const SingleSelect = <ValueType extends string, ValueKey extends string, LabelKey extends string>({
+export const SingleSelect = <
+  ValueType extends string | number | Date,
+  ValueKey extends string,
+  LabelKey extends string,
+>({
   valueKey,
   labelKey,
   defaultValue,
@@ -33,6 +38,7 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
   onChange,
   placeholder,
   createText = (inputValue: string) => `Create ${inputValue}`,
+  noOptionsMessage = () => 'No options',
   onCreateOption,
 }: SingleSelectProps<ValueType, ValueKey, LabelKey>) => {
   const {
@@ -83,7 +89,12 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
       return option[labelKey ?? DEFAULT_LABEL_KEY];
     },
     getOptionValue: (option: Option<ValueType, ValueKey, LabelKey>) => option[valueKey ?? DEFAULT_VALUE_KEY],
+    noOptionsMessage,
     styles: {
+      container: (provided) => ({
+        ...provided,
+        width: '100%',
+      }),
       control: (provided, { isFocused }) => ({
         ...provided,
         backgroundColor: getInputBackgroundColor({ disabled, customColors, colors }),
@@ -135,15 +146,19 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
       }),
       menu: (provided) => ({
         ...provided,
-        zIndex: 99999,
         ...borderRadius(radius200),
         ...border(border300),
         boxShadow: 'none',
+        ...margin(scale100, '0'),
       }),
       menuList: (provided) => ({
         ...provided,
         ...padding(),
       }),
+      menuPortal: (provided) => ({
+        ...provided,
+        zIndex: 99999,
+      }),
       option: (provided, { isSelected }) => ({
         ...provided,
         ...borderBottom(border300),
@@ -188,7 +203,13 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
       {showSkeleton ? (
         <Skeleton width="100%" height={scale975} animation />
       ) : (
-        <>{creatable ? <SelectCreatable {...props} onCreateOption={onCreateOption} /> : <Select {...props} />}</>
+        <>
+          {creatable ? (
+            <SelectCreatable {...props} onCreateOption={onCreateOption} menuPortalTarget={document.body} />
+          ) : (
+            <Select {...props} menuPortalTarget={document.body} />
+          )}
+        </>
       )}
     </>
   );
diff --git a/src/components/select/single-select/types.ts b/src/components/select/single-select/types.ts
index 9aa5a81b7..04d399c77 100644
--- a/src/components/select/single-select/types.ts
+++ b/src/components/select/single-select/types.ts
@@ -23,5 +23,6 @@ export interface SingleSelectProps<ValueType, ValueKey extends string, LabelKey
   error?: boolean;
   success?: boolean;
   createText?: (inputValue: string) => string;
+  noOptionsMessage?: () => string;
   onCreateOption?: (inputValue: string) => void;
 }
diff --git a/src/components/select/test-data.ts b/src/components/select/test-data.ts
index 897eac3e3..74a0e2bba 100644
--- a/src/components/select/test-data.ts
+++ b/src/components/select/test-data.ts
@@ -5,4 +5,46 @@ export const OPTIONS = [
   { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
   { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
   { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
+  { name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
+  { name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
+  { name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
+  { name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
+  { name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
+  { name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
 ];