diff --git a/src/ext/lib/uwui/ClientMenu.ts b/src/ext/lib/uwui/ClientMenu.ts
index 09a191e..ff85db2 100644
--- a/src/ext/lib/uwui/ClientMenu.ts
+++ b/src/ext/lib/uwui/ClientMenu.ts
@@ -146,6 +146,7 @@ export class ClientMenu {
       height: '100%',
       zIndex: this.config.isGlobal ? '2147483647' : '2147483640',
       pointerEvents: 'none',
+      background: 'transparent',
     });
 
     console.log('UI host created:', this.host);
@@ -238,7 +239,11 @@ export class ClientMenu {
       el.className = `uw-menu-item uw-trigger`;
 
       if (item.customHTML) {
-        el.appendChild(item.customHTML);
+        if (item.customHTML instanceof HTMLElement) {
+          el.appendChild(item.customHTML);
+        } else {
+          el.innerHTML = item.customHTML;
+        }
       } else {
         el.textContent = item.label;
       }
diff --git a/src/ui/res/styles/player-menu.css b/src/ui/res/styles/player-menu.css
index f853559..f0a232b 100644
--- a/src/ui/res/styles/player-menu.css
+++ b/src/ui/res/styles/player-menu.css
@@ -2,7 +2,7 @@
 @import "tailwindcss/utilities";
 
 .uw-menu-root {
-  @apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row;
+  @apply h-full w-full font-mono text-stone-200 text-[16px] flex flex-row bg-transparent;
 
   pointer-events: none;
   transition: opacity 120ms ease;
@@ -67,8 +67,7 @@
   pointer-events: none;
 
   /* we'll also animate a bit */
-  transform: translateX(-4px);
-  transition: opacity 120ms ease, transform 120ms ease, width 120ms ease;
+  transition: opacity 120ms ease, width 120ms ease;
 
   &.uw-menu-left {
     @apply left-full;
@@ -79,10 +78,11 @@
 
   &.uw-menu-left, &.uw-menu-right {
     &.uw-menu-top {
-      @apply top-1/2 -translate-y-1/2;
+      @apply top-0;
     }
     &.uw-menu-ycenter {
-      @apply top-0;
+      top: 50%;
+      transform: translateY(-50%);
     }
     &.uw-menu-bottom {
       @apply bottom-0;
@@ -114,8 +114,6 @@
 
     opacity: 1 !important;
     pointer-events: auto;
-
-    transform: translateX(0);
   }
 }