diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index 600e7388e5fb..0ee38b033b37 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -126,14 +126,11 @@ export default function Dropdown({ className = "", items = [] }) {
       <div
         className={`${
           active ? "block" : "hidden"
-        } absolute top-full right-0 text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]`}
+        } absolute top-full left-1/2 -translate-x-1/2 overflow-hidden text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]`}
       >
-        <ul className="pt-1">
+        <ul>
           {items.map((item, i) => (
-            <li
-              key={item.title}
-              className="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
-            >
+            <li key={item.title} className="list-none">
               <a
                 onKeyDown={(event) =>
                   handleArrowKeys(i, items.length - 1, event)
@@ -142,7 +139,7 @@ export default function Dropdown({ className = "", items = [] }) {
                   linksRef.current[i] = node;
                 }}
                 href={item.url}
-                className="px-5 block text-white visited:text-white hover:text-white"
+                className="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
               >
                 <span lang={item.lang} className="align-top text-left">
                   {item.title}
diff --git a/src/components/Dropdown/Dropdown.test.jsx b/src/components/Dropdown/Dropdown.test.jsx
index 03d148258e78..f2da5a466f47 100644
--- a/src/components/Dropdown/Dropdown.test.jsx
+++ b/src/components/Dropdown/Dropdown.test.jsx
@@ -13,7 +13,7 @@ const items = [
 ];
 
 function getListWrapper(container) {
-  return container.querySelector("ul").closest("div").className;
+  return container.querySelector("ul").closest("div");
 }
 
 describe("Dropdown", () => {
@@ -30,7 +30,7 @@ describe("Dropdown", () => {
 
   it("hides the dropdown by default", () => {
     const { container } = render(<Dropdown items={items} />);
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("shows the dropdown on hover", () => {
@@ -38,7 +38,7 @@ describe("Dropdown", () => {
     const nav = container.querySelector("nav");
 
     fireEvent.mouseOver(nav);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
   });
 
   it("hides the dropdown on mouse leave", () => {
@@ -47,7 +47,7 @@ describe("Dropdown", () => {
 
     fireEvent.mouseOver(nav);
     fireEvent.mouseLeave(nav);
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("toggles dropdown on button click", () => {
@@ -55,10 +55,10 @@ describe("Dropdown", () => {
     const button = screen.getByRole("button", { name: /select language/i });
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("sets aria-expanded correctly", () => {
@@ -82,7 +82,7 @@ describe("Dropdown", () => {
     const button = screen.getByRole("button", { name: /select language/i });
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     act(() => {
       document.dispatchEvent(
@@ -90,7 +90,7 @@ describe("Dropdown", () => {
       );
     });
 
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("closes when clicking outside", () => {
@@ -98,13 +98,13 @@ describe("Dropdown", () => {
     const button = screen.getByRole("button", { name: /select language/i });
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     act(() => {
       document.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("does not close dropdown when arrow keys are pressed", () => {
@@ -114,10 +114,10 @@ describe("Dropdown", () => {
 
     const links = screen.getAllByRole("link");
     fireEvent.keyDown(links[0], { key: "ArrowDown" });
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     fireEvent.keyDown(links[links.length - 1], { key: "ArrowDown" });
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
   });
 
   it("matches snapshot", () => {
diff --git a/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap b/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap
index f53b8b4ff06f..8fc4d78f4562 100644
--- a/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap
+++ b/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap
@@ -51,16 +51,14 @@ exports[`Dropdown matches snapshot 1`] = `
     />
   </button>
   <div
-    class="hidden absolute top-full right-0 text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]"
+    class="hidden absolute top-full left-1/2 -translate-x-1/2 overflow-hidden text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]"
   >
-    <ul
-      class="pt-1"
-    >
+    <ul>
       <li
-        class="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+        class="list-none"
       >
         <a
-          class="px-5 block text-white visited:text-white hover:text-white"
+          class="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
           href="/en/"
         >
           <span
@@ -72,10 +70,10 @@ exports[`Dropdown matches snapshot 1`] = `
         </a>
       </li>
       <li
-        class="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+        class="list-none"
       >
         <a
-          class="px-5 block text-white visited:text-white hover:text-white"
+          class="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
           href="/fr/"
         >
           <span
@@ -87,10 +85,10 @@ exports[`Dropdown matches snapshot 1`] = `
         </a>
       </li>
       <li
-        class="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+        class="list-none"
       >
         <a
-          class="px-5 block text-white visited:text-white hover:text-white"
+          class="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
           href="/es/"
         >
           <span