diff --git a/packages/ui-components/src/components/Select/Select.component.tsx b/packages/ui-components/src/components/Select/Select.component.tsx
index ac023e217e..8dc8afbdcd 100644
--- a/packages/ui-components/src/components/Select/Select.component.tsx
+++ b/packages/ui-components/src/components/Select/Select.component.tsx
@@ -418,33 +418,34 @@ export const Select = ({
                       )
                     }}
                   </ListboxButton>
-                  {createPortal(
-                    <div
-                      ref={refs.setFloating}
-                      className={`
+                  {open &&
+                    createPortal(
+                      <div
+                        ref={refs.setFloating}
+                        className={`
                           juno-select-menu-container
                           ${menuStylesContainer}
                         `}
-                      style={{
-                        position: strategy,
-                        top: y ?? 0,
-                        left: x ?? 0,
-                        display: open ? "block" : "none",
-                      }}
-                      {...getFloatingProps()}
-                    >
-                      <ListboxOptions
-                        static
-                        className={`
-                          juno-select-menu
-                          ${menuStyles}
-                        `}
+                        style={{
+                          position: strategy,
+                          top: y ?? 0,
+                          left: x ?? 0,
+                        }}
+                        {...getFloatingProps()}
+                        tabIndex={-1}
                       >
-                        {children}
-                      </ListboxOptions>
-                    </div>,
-                    portalContainerRef ?? document.body
-                  )}
+                        <ListboxOptions
+                          static
+                          className={`
+                            juno-select-menu
+                            ${menuStyles}
+                          `}
+                        >
+                          {children}
+                        </ListboxOptions>
+                      </div>,
+                      portalContainerRef ?? document.body
+                    )}
                 </div>
               </>
             )
diff --git a/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx b/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx
index 533061b069..c2a82e7267 100644
--- a/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx
+++ b/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Fragment, HTMLAttributes, ReactNode, useContext, useEffect } from "react"
+import React, { HTMLAttributes, ReactNode, useContext, useEffect } from "react"
 import { ListboxOption } from "@headlessui/react"
 import { SelectContext } from "../Select/Select.component"
 import { Icon } from "../Icon"
@@ -90,20 +90,23 @@ export const SelectOption = ({
   }, [value, label, children])
 
   return (
-    <ListboxOption as={Fragment} disabled={disabled} value={value || children}>
-      {({ selected }) => (
-        <li
-          className={`
-          juno-select-option 
-          jn:min-h-10
-          ${optionStyles}
-          ${selected ? "juno-select-option-selected " + selectedOptionStyles : unselectedOptionStyles}
-          ${disabled ? "juno-select-option-disabled jn:opacity-50 jn:cursor-not-allowed" : ""}
-          ${truncateOptions ? "juno-select-option-truncate" : ""}
-          ${className}
-        `}
-          {...props}
-        >
+    <ListboxOption
+      as="li"
+      disabled={disabled}
+      value={value || children}
+      className={({ selected }: { selected: boolean }) => `
+        juno-select-option
+        jn:min-h-10
+        ${optionStyles}
+        ${selected ? "juno-select-option-selected " + selectedOptionStyles : unselectedOptionStyles}
+        ${disabled ? "juno-select-option-disabled jn:opacity-50 jn:cursor-not-allowed" : ""}
+        ${truncateOptions ? "juno-select-option-truncate" : ""}
+        ${className}
+      `}
+      {...props}
+    >
+      {({ selected }: { selected: boolean }) => (
+        <>
           {selected ? <Icon icon="check" size="18" className={selectedIconStyles} /> : ""}
           <span
             className={`
@@ -113,7 +116,7 @@ export const SelectOption = ({
           >
             {children || label || value}
           </span>
-        </li>
+        </>
       )}
     </ListboxOption>
   )