diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index ceef277..97c2d37 100755
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -27,13 +27,15 @@ const Select: React.FC<SelectProps> = ({
     primaryColor = DEFAULT_THEME,
     formatGroupLabel = null,
     formatOptionLabel = null,
-    classNames
+    classNames,
+    scrollableContainer = null
 }) => {
     const [open, setOpen] = useState<boolean>(menuIsOpen);
     const [list, setList] = useState<ListOption>(options);
     const [inputValue, setInputValue] = useState<string>("");
     const ref = useRef<HTMLDivElement>(null);
     const searchBoxRef = useRef<HTMLInputElement>(null);
+    const [showOptionAboveTheSelect, setShowOptionAboveTheSelect] = useState<boolean>(false);
 
     useEffect(() => {
         const formatItem = (item: Option) => {
@@ -166,6 +168,22 @@ const Select: React.FC<SelectProps> = ({
         [classNames, isDisabled]
     );
 
+    const handleScroll = useCallback(() => {
+        if (ref.current) {
+            const { top } = ref.current.getBoundingClientRect();
+            // check if the component is on the bottom half of the page or on the top half
+            setShowOptionAboveTheSelect(top > window.innerHeight / 2);
+        }
+    }, [ref]);
+
+    useEffect(handleScroll, [ref]);
+
+    useEffect(() => {
+        const _scrollableContainer = scrollableContainer || window.document;
+        _scrollableContainer.addEventListener('scroll', handleScroll);
+        return () => _scrollableContainer.removeEventListener('scroll', handleScroll);
+    }, [scrollableContainer]);
+
     return (
         <SelectProvider
             otherData={{
@@ -266,9 +284,10 @@ const Select: React.FC<SelectProps> = ({
                 {open && !isDisabled && (
                     <div
                         className={
-                            classNames?.menu
+                            `${classNames?.menu
                                 ? classNames.menu
-                                : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"
+                                : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"} 
+                                ${showOptionAboveTheSelect ? 'top-auto bottom-[44px]' : ''}`
                         }
                     >
                         {isSearchable && (
diff --git a/src/components/type.ts b/src/components/type.ts
index 1e5b8dc..8303d15 100644
--- a/src/components/type.ts
+++ b/src/components/type.ts
@@ -52,4 +52,5 @@ export interface SelectProps {
     formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null;
     formatOptionLabel?: ((data: Option) => JSX.Element) | null;
     classNames?: ClassNames;
+    scrollableContainer?: HTMLElement | null;
 }