diff --git a/website/src/components/Modal/index.tsx b/website/src/components/Modal/index.tsx
index 798c0111864f..1a3a754ba77f 100644
--- a/website/src/components/Modal/index.tsx
+++ b/website/src/components/Modal/index.tsx
@@ -31,17 +31,17 @@ export default function Modal({
   useEffect(onFadeIn, []);
 
   return (
-    <div className={clsx("modal-root", className)}>
+    <div className={clsx("nb-modal-root", className)}>
       <div
-        className={clsx("modal-backdrop", transitionClass)}
+        className={clsx("nb-modal-backdrop", transitionClass)}
         onTransitionEnd={onTransitionEnd}
         onClick={() => backdropExit && onFadeOut()}
       />
-      <div className={clsx("modal-container", transitionClass)}>
+      <div className={clsx("nb-modal-container", transitionClass)}>
         <div className="card bg-base-100 shadow-xl">
           <div className="card-body">
             {!useCustomTitle && (
-              <div className="modal-title">
+              <div className="nb-modal-title">
                 {title}
                 <div className="card-actions ml-auto">
                   <button className="btn btn-square btn-sm" onClick={onFadeOut}>
diff --git a/website/src/components/Modal/styles.css b/website/src/components/Modal/styles.css
index 585f315de8e2..e941029ebab4 100644
--- a/website/src/components/Modal/styles.css
+++ b/website/src/components/Modal/styles.css
@@ -1,4 +1,4 @@
-.modal {
+.nb-modal {
   &-title {
     @apply flex items-center font-bold;
   }