diff --git a/.changeset/twelve-walls-sit.md b/.changeset/twelve-walls-sit.md
new file mode 100644
index 0000000..f1c17dd
--- /dev/null
+++ b/.changeset/twelve-walls-sit.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+fix: add dialog className
diff --git a/package-lock.json b/package-lock.json
index 2501c14..b15931f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@babylonlabs-io/bbn-core-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@babylonlabs-io/bbn-core-ui",
-      "version": "0.3.1",
+      "version": "0.4.0",
       "dependencies": {
         "@popperjs/core": "^2.11.8",
         "react-popper": "^2.3.0"
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index e32f5ac..f9e9e44 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -10,6 +10,7 @@ export interface DialogProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivEle
   onClose?: () => void;
   hasBackdrop?: boolean;
   backdropClassName?: string;
+  dialogClassName?: string;
 }
 
 export const Dialog = ({
@@ -19,15 +20,16 @@ export const Dialog = ({
   onClose,
   hasBackdrop = true,
   backdropClassName,
+  dialogClassName,
   ...restProps
 }: DialogProps) => {
   const { mounted, unmount } = useModalManager({ open });
 
   return (
     <Portal mounted={mounted}>
-      <div {...restProps} className="bbn-dialog-wrapper">
+      <div {...restProps} className={twJoin("bbn-dialog-wrapper", className)}>
         <div
-          className={twJoin("bbn-dialog", open ? "animate-modal-in" : "animate-modal-out", className)}
+          className={twJoin("bbn-dialog", open ? "animate-modal-in" : "animate-modal-out", dialogClassName)}
           onAnimationEnd={unmount}
         >
           {children}
diff --git a/src/hooks/usePopperUpdate.ts b/src/hooks/usePopperUpdate.ts
deleted file mode 100644
index ebf3c71..0000000
--- a/src/hooks/usePopperUpdate.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { State } from "@popperjs/core";
-import { useEffect } from "react";
-
-interface UsePopperUpdateProps {
-  isOpen: boolean;
-  triggerRef: React.RefObject<HTMLElement>;
-  popperElement: HTMLElement | null;
-  update: (() => Promise<Partial<State>>) | null;
-}
-
-export const usePopperUpdate = ({ isOpen, triggerRef, popperElement, update }: UsePopperUpdateProps) => {
-  useEffect(() => {
-    if (isOpen && triggerRef.current && popperElement) {
-      const updatePopper = () => {
-        requestAnimationFrame(() => {
-          update?.();
-        });
-      };
-      updatePopper();
-
-      window.addEventListener("resize", updatePopper);
-      return () => window.removeEventListener("resize", updatePopper);
-    }
-  }, [isOpen, popperElement, update, triggerRef]);
-};
diff --git a/src/hooks/usePortalRoot.ts b/src/hooks/usePortalRoot.ts
deleted file mode 100644
index f91505b..0000000
--- a/src/hooks/usePortalRoot.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useState, useEffect } from "react";
-
-interface Options {
-  unmountOnClose?: boolean;
-  className?: string;
-}
-
-export function usePortalRoot(enabled = true, { unmountOnClose = true, className = "portal-root" }: Options = {}) {
-  const [rootRef, setRootRef] = useState<HTMLElement | null>(null);
-  const mounted = enabled || !unmountOnClose;
-
-  useEffect(() => {
-    if (!mounted) {
-      setRootRef(null);
-      return;
-    }
-
-    const root = document.createElement("div");
-    root.className = className;
-    setRootRef(root);
-    document.body.appendChild(root);
-
-    return () => {
-      document.body.removeChild(root);
-    };
-  }, [mounted]);
-
-  return rootRef;
-}