diff --git a/playground/index.tsx b/playground/index.tsx
index 0d8f7ab7..5876abd6 100644
--- a/playground/index.tsx
+++ b/playground/index.tsx
@@ -1,34 +1,25 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Button, ContextMenu } from "../src/main";
+import {
+    LegacyFullscreen1pxIcon,
+    LegacyHandleMoreIcon,
+} from "@deriv/quill-icons";
+import { Header } from "../src/main";
+import { Text } from "../src/main";
 
-const App = () => {
-    const [isOpen, setIsOpen] = React.useState(false);
-
-    return (
-        <div>
-            <Button
-                style={{ position: "relative" }}
-                size="sm"
-                onClick={() => setIsOpen(!isOpen)}
-            >
-                Toggle Drawer
-            </Button>
-
-            <ContextMenu
-                onClickOutside={() => setIsOpen(false)}
-                isOpen={isOpen}
-                style={{ position: "absolute", top: 40, left: 0 }}
-            >
-                <ul>
-                    <li>Item 1</li>
-                    <li>Item 2</li>
-                    <li>Item 3</li>
-                </ul>
-            </ContextMenu>
-        </div>
-    );
-};
+const App = () => (
+    <div style={{ margin: "50px", display: "flex" }}>
+        <Header.MenuItem
+            as="button"
+            leftComponent={<LegacyFullscreen1pxIcon width={16} height={16} />}
+            rightComponent={<LegacyHandleMoreIcon width={16} height={16} />}
+        >
+            <span style={{ padding: "8px 16px" }}>
+                <Text size="md">Home</Text>
+            </span>
+        </Header.MenuItem>
+    </div>
+);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
diff --git a/src/components/AppLayout/Header/MenuItem/MenuItem.scss b/src/components/AppLayout/Header/MenuItem/MenuItem.scss
index 3a146b33..1ca103ca 100644
--- a/src/components/AppLayout/Header/MenuItem/MenuItem.scss
+++ b/src/components/AppLayout/Header/MenuItem/MenuItem.scss
@@ -2,6 +2,7 @@
     display: flex;
     align-items: center;
     height: 100%;
+    cursor: pointer;
 
     &:hover {
         background: var(--du-general-hover, #e6e9e9);
diff --git a/src/components/AppLayout/Header/MenuItem/index.tsx b/src/components/AppLayout/Header/MenuItem/index.tsx
index 51ac5d0c..94f559d0 100644
--- a/src/components/AppLayout/Header/MenuItem/index.tsx
+++ b/src/components/AppLayout/Header/MenuItem/index.tsx
@@ -1,8 +1,8 @@
 import {
     ComponentProps,
+    ElementType,
     PropsWithChildren,
     ReactNode,
-    createElement,
 } from "react";
 import clsx from "clsx";
 import "./MenuItem.scss";
@@ -16,13 +16,13 @@ import "./MenuItem.scss";
  * @property {boolean} disableHover - If true, disables hover effects.
  * @property {boolean} active - If true, applies an active state style.
  */
-type TMenuItem = ComponentProps<"a" | "button"> & {
-    as: "a" | "button";
+interface TMenuItem extends ComponentProps<ElementType> {
+    as?: "a" | "button";
     leftComponent?: ReactNode;
     rightComponent?: ReactNode;
     disableHover?: boolean;
     active?: boolean;
-};
+}
 
 /**
  * MenuItem component that can render as either an anchor or a button element, with optional left and right components.
@@ -41,7 +41,7 @@ type TMenuItem = ComponentProps<"a" | "button"> & {
  * @returns {React.ReactElement} A React Element of type 'a' or 'button' based on the 'as' prop.
  */
 export const MenuItem = ({
-    as,
+    as = "a",
     leftComponent,
     children,
     rightComponent,
@@ -50,21 +50,22 @@ export const MenuItem = ({
     className,
     ...props
 }: PropsWithChildren<TMenuItem>) => {
-    const content = {
-        className: clsx(
-            "deriv-menu-item",
-            { "deriv-menu-item--active": active || disableHover },
-            className,
-        ),
-        children: [
-            createElement("div", { key: "leftComponent" }, leftComponent),
-            createElement("div", { key: "mainChildren" }, children),
-            createElement("div", { key: "rightComponent" }, rightComponent),
-        ],
-        ...props,
-    };
+    const Tag = as;
 
-    return createElement(as, { ...content });
+    return (
+        <Tag
+            className={clsx(
+                "deriv-menu-item",
+                { "deriv-menu-item--active": active || disableHover },
+                className,
+            )}
+            {...props}
+        >
+            {leftComponent}
+            {children}
+            {rightComponent}
+        </Tag>
+    );
 };
 
 MenuItem.displayName = "MenuItem";