diff --git a/package-lock.json b/package-lock.json
index 43051962fa..bc99a1dc87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@floating-ui/dom": "^1.6.3",
+        "@floating-ui/react": "^0.26.28",
         "@fortawesome/fontawesome-free": "^5.10.2",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
@@ -2817,6 +2818,34 @@
         "@floating-ui/utils": "^0.2.8"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/utils": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
@@ -21255,6 +21284,12 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index a313186a95..9b1b98496a 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
+    "@floating-ui/react": "^0.26.28",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
diff --git a/src/lib/components/dropdown/Dropdown.component.tsx b/src/lib/components/dropdown/Dropdown.component.tsx
index 4ed975199b..58d521fc03 100644
--- a/src/lib/components/dropdown/Dropdown.component.tsx
+++ b/src/lib/components/dropdown/Dropdown.component.tsx
@@ -1,7 +1,5 @@
 // @ts-nocheck
-import { useState, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-
+import styled from 'styled-components';
 import {
   ButtonStyled,
   ButtonIcon,
@@ -14,6 +12,9 @@ import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
 import { useSelect } from 'downshift';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { flip, offset, Placement, shift } from '@floating-ui/dom';
+import { useFloating, useInteractions, autoUpdate } from '@floating-ui/react';
+
 export type Item = {
   label: string;
   name?: string;
@@ -29,6 +30,7 @@ type Props = {
   items: Items;
   icon?: JSX.Element;
   caret?: boolean;
+  placement?: Placement;
 };
 const DropdownStyled = styled.div`
   position: relative;
@@ -39,6 +41,7 @@ const DropdownStyled = styled.div`
     border-radius: 0;
   }
 `;
+
 const DropdownMenuStyled = styled.ul`
   position: absolute;
   margin: 0;
@@ -49,9 +52,9 @@ const DropdownMenuStyled = styled.ul`
   max-height: 200px;
   min-width: 100%;
   overflow: auto;
-  border-bottom: 0.3px solid ${getThemePropSelector('border')};
   display: ${(props) => (props.isOpen ? 'auto' : 'none')};
 `;
+
 const DropdownMenuItemStyled = styled.li`
   display: flex;
   align-items: center;
@@ -97,6 +100,7 @@ function Dropdown({
   variant = 'buttonSecondary',
   title,
   caret = true,
+  placement = 'bottom',
   ...rest
 }: Props) {
   const {
@@ -109,12 +113,21 @@ function Dropdown({
     items,
     itemToString: (item) => item?.label || '',
   });
+
+  const { refs, floatingStyles } = useFloating({
+    middleware: [offset(10), flip(), shift()],
+    placement: placement,
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions();
+
   return (
     <DropdownStyled
-      active={open}
       variant={variant}
       className="sc-dropdown"
       {...rest}
+      ref={refs.setReference}
     >
       <TriggerStyled
         variant={variant}
@@ -122,6 +135,7 @@ function Dropdown({
         className="trigger"
         title={title}
         {...getToggleButtonProps()}
+        {...getReferenceProps()}
       >
         {icon && (
           <ButtonIcon text={text} size={size}>
@@ -134,32 +148,33 @@ function Dropdown({
             <Icon name="Dropdown-down" />
           </Caret>
         )}
-
-        <DropdownMenuStyled
-          className="menu-item"
-          isOpen={isOpen}
-          {...getMenuProps()}
-        >
-          {items.map((item, index) => {
-            return (
-              <DropdownMenuItemStyled
-                className="menu-item-label"
-                key={item.label}
-                variant={item.variant}
-                {...item}
-                {...getItemProps({
-                  item,
-                  index,
-                  onClick: item.onClick,
-                })}
-                isSelected={index === highlightedIndex}
-              >
-                {item.label}
-              </DropdownMenuItemStyled>
-            );
-          })}
-        </DropdownMenuStyled>
       </TriggerStyled>
+      <DropdownMenuStyled
+        className="menu-item"
+        isOpen={isOpen}
+        style={floatingStyles}
+        {...getFloatingProps()}
+        {...getMenuProps({ ref: refs.setFloating })}
+      >
+        {items.map((item, index) => {
+          return (
+            <DropdownMenuItemStyled
+              className="menu-item-label"
+              key={item.label}
+              variant={item.variant}
+              {...item}
+              {...getItemProps({
+                item,
+                index,
+                onClick: item.onClick,
+              })}
+              isSelected={index === highlightedIndex}
+            >
+              {item.label}
+            </DropdownMenuItemStyled>
+          );
+        })}
+      </DropdownMenuStyled>
     </DropdownStyled>
   );
 }
diff --git a/src/lib/components/navbar/Navbar.component.tsx b/src/lib/components/navbar/Navbar.component.tsx
index 25281ee860..7913a3f875 100644
--- a/src/lib/components/navbar/Navbar.component.tsx
+++ b/src/lib/components/navbar/Navbar.component.tsx
@@ -36,8 +36,8 @@ const NavbarContainer = styled.div`
     .sc-trigger-text {
       color: ${getThemePropSelector('textPrimary')};
     }
-    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
     box-sizing: border-box;
+    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2};
   `};
 `;
 const NavbarMenu = styled.div`
@@ -122,7 +122,7 @@ const NavbarMenuItem = styled.div`
       &:hover {
         background-color: ${getThemePropSelector('highlight')};
       }
-      height: ${navbarHeight};
+      height: auto;
       font-size: ${fontSize.base};
     }
     .menu-item {