diff --git a/package-lock.json b/package-lock.json
index e69e067..2965cbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2359,6 +2359,19 @@
         "webpack-dev-server": "^3.10.3",
         "webpack-merge": "^4.2.2",
         "xml2js": "^0.4.23"
+      },
+      "dependencies": {
+        "react": {
+          "version": "16.9.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
+          "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        }
       }
     },
     "@nicolo-ribaudo/chokidar-2": {
@@ -2487,6 +2500,11 @@
       "integrity": "sha512-ng6Tm537E/M42GjE4TRUxQyL8sRfClcL7bQWblOCoxPZzJ2J3bdALsjeG3vDnVCIfI/R0AeFalN9KjMt0+Z/Zg==",
       "dev": true
     },
+    "@seznam/compose-react-refs": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz",
+      "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q=="
+    },
     "@sindresorhus/is": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.0.1.tgz",
@@ -16650,14 +16668,12 @@
       }
     },
     "react": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
-      "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
-      "dev": true,
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "object-assign": "^4.1.1"
       }
     },
     "react-devtools-core": {
@@ -16738,6 +16754,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-is-mounted-hook": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/react-is-mounted-hook/-/react-is-mounted-hook-1.1.2.tgz",
+      "integrity": "sha512-yjq3Tj34CiFcdVOS/h6JerWLOLdJqEGKMNpTHc4kWebzz2YtIpgqMRrqxdmQhewM1KJREojdAV2tsNvBsUWyhA=="
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -17244,6 +17265,17 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-select-async-paginate": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/react-select-async-paginate/-/react-select-async-paginate-0.5.3.tgz",
+      "integrity": "sha512-SWX1twi/jzViDpQa1nS+xyjrFtn9RBezbL4aIjcJXCABKMY+8JhH4iAKqAW3pryZbm439/DaMtQeZADH17v7bQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@seznam/compose-react-refs": "^1.0.5",
+        "react-is-mounted-hook": "^1.0.3",
+        "sleep-promise": "^9.1.0"
+      }
+    },
     "react-test-renderer": {
       "version": "16.9.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
@@ -18218,6 +18250,11 @@
       "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
       "dev": true
     },
+    "sleep-promise": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/sleep-promise/-/sleep-promise-9.1.0.tgz",
+      "integrity": "sha512-UHYzVpz9Xn8b+jikYSD6bqvf754xL2uBUzDFwiU6NcdZeifPr6UfgU43xpkPu67VMS88+TI2PSI7Eohgqf2fKA=="
+    },
     "slice-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
diff --git a/package.json b/package.json
index de93e23..0cc5007 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
         "@testing-library/react-hooks": "3.2.1"
     },
     "dependencies": {
-        "react-select": "^4.3.1"
+        "react": "^17.0.2",
+        "react-select": "^4.3.1",
+        "react-select-async-paginate": "^0.5.3"
     }
 }
diff --git a/src/components/CustomDropdown/index.tsx b/src/components/CustomDropdown/index.tsx
index 674b144..53f1607 100644
--- a/src/components/CustomDropdown/index.tsx
+++ b/src/components/CustomDropdown/index.tsx
@@ -7,6 +7,7 @@ import { OptionTypeBase } from "react-select/src/types";
 
 import { CustomDropdownContainerProps } from "../../../typings/CustomDropdownProps";
 import Label, { getStyles as getLabelStyles } from "./Label";
+import { AsyncPaginate } from "react-select-async-paginate";
 
 export interface Option {
     id: string;
@@ -30,9 +31,29 @@ interface LabelValues {
 }
 
 export default function CustomDropdown(props: CustomDropdownContainerProps): ReactElement {
+    props.options.setLimit(2);
+    const current = props.options.offset;
+    //const [options, setOptions] = useState<Option[]>([]);
     const [options, setOptions] = useState<Option[]>([]);
     const [value, setValue] = useState<Option>();
+    const loadOptions = async (searchQuery:any, loadedOptions:any, { page }:any) => {
 
+        // const response = await fetch(
+        //   `https://www.anapioficeandfire.com/api/houses?region=${regionName}&page=${page}&pageSize=5`
+        // );
+        // const responseJSON = await response.json();
+        
+        props.options.setOffset(page*2);
+        console.log('Additional page ',page);
+        return {
+          options: options,
+          hasMore: props.options.hasMoreItems,
+          additional: {
+            page:  searchQuery ? 2 : page + 1,
+          },
+        };
+      };
+    console.log('banani ac2')
     const createOption = (label: string, secondLabel: string, id: string, imageUrl: string): Option => ({
         label: (
             <Label
@@ -149,6 +170,7 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
             setOptions(options);
         }
     }, [props.options]);
+    
 
     let styles: Styles<OptionTypeBase, true> = {};
     if (!props.useDefaultStyle) {
@@ -181,17 +203,18 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
     const isLoading =
         props.options.status === ValueStatus.Loading ||
         (props.defaultValue && props.defaultValue.status === ValueStatus.Loading);
-
-    if (props.enableCreate) {
+        console.log('bananiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii');
+    if (props.enableCreate) {  
         return (
             <div>
                 <style type="text/css" scoped>
                     {getLabelStyles(props.classNamePrefix)}
                 </style>
-                <CreatableSelect
-                    options={options}
+                <AsyncPaginate
+                    loadOptions={loadOptions}
+                    //options={options}
                     value={value}
-                    onChange={handleChange}
+                    //onChange={handleChange}
                     isClearable={props.enableClear}
                     isSearchable={props.enableSearch}
                     isLoading={isLoading}
@@ -199,6 +222,9 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
                     placeholder={props.placeholder}
                     className={props.className!}
                     classNamePrefix={props.classNamePrefix}
+                    additional={{
+                        page: 1,
+                      }}
                     maxMenuHeight={props.menuHeight}
                     onFocus={handleFocus}
                 />
@@ -211,10 +237,11 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
             <style type="text/css" scoped>
                 {getLabelStyles(props.classNamePrefix)}
             </style>
-            <Select
-                options={options}
+            <AsyncPaginate
+                loadOptions={loadOptions}
+                //options={options}
                 value={value}
-                onChange={handleChange}
+                //onChange={handleChange}
                 isClearable={props.enableClear}
                 isSearchable={props.enableSearch}
                 isLoading={isLoading}
@@ -222,6 +249,9 @@ export default function CustomDropdown(props: CustomDropdownContainerProps): Rea
                 placeholder={props.placeholder}
                 className={props.className!}
                 classNamePrefix={props.classNamePrefix}
+                additional={{
+                    page: 1,
+                  }}
                 maxMenuHeight={props.menuHeight}
                 onFocus={handleFocus}
             />
diff --git a/tests/testProject/CustomDropdownTestProject.mpr b/tests/testProject/CustomDropdownTestProject.mpr
index 4c746ae..d2b32f2 100644
Binary files a/tests/testProject/CustomDropdownTestProject.mpr and b/tests/testProject/CustomDropdownTestProject.mpr differ
diff --git a/tests/testProject/CustomDropdownTestProject.mpr.bak b/tests/testProject/CustomDropdownTestProject.mpr.bak
index e2d55c5..a5933c5 100644
Binary files a/tests/testProject/CustomDropdownTestProject.mpr.bak and b/tests/testProject/CustomDropdownTestProject.mpr.bak differ
diff --git a/tests/testProject/project-settings.user.json b/tests/testProject/project-settings.user.json
index 25c0d51..c9405b6 100644
--- a/tests/testProject/project-settings.user.json
+++ b/tests/testProject/project-settings.user.json
@@ -5,14 +5,14 @@
       "suppressions": [],
       "suppressAppStoreWarnings": false,
       "showSuppressionInfo": true,
-      "type": "Mendix.Modeler.Suppressions.SuppressionRules, Mendix.Modeler.Core, Version=9.2.0.20531, Culture=neutral, PublicKeyToken=null"
+      "type": "Mendix.Modeler.Suppressions.SuppressionRules, Mendix.Modeler.Core, Version=9.5.0.25874, Culture=neutral, PublicKeyToken=null"
     },
     {
       "suppressions": [],
       "disabledBestPractices": [],
       "readRecommendations": [],
       "suppressedRecommendations": [],
-      "type": "Mendix.Modeler.MxAssist.PerformanceBot.Serialization.Configuration.PerformanceBotConfiguration, Mendix.Modeler.MxAssist.PerformanceBot.Serialization, Version=9.2.0.20531, Culture=neutral, PublicKeyToken=null"
+      "type": "Mendix.Modeler.MxAssist.PerformanceBot.Serialization.Configuration.PerformanceBotConfiguration, Mendix.Modeler.MxAssist.PerformanceBot.Serialization, Version=9.5.0.25874, Culture=neutral, PublicKeyToken=null"
     }
   ]
 }
\ No newline at end of file
diff --git a/tests/testProject/widgets/mendix.CustomDropdown.mpk b/tests/testProject/widgets/mendix.CustomDropdown.mpk
index 225dc89..63562ba 100644
Binary files a/tests/testProject/widgets/mendix.CustomDropdown.mpk and b/tests/testProject/widgets/mendix.CustomDropdown.mpk differ