diff --git a/src/app/organisms/navigation/DrawerBreadcrumb.jsx b/src/app/organisms/navigation/DrawerBreadcrumb.jsx
index d2f1f9e9..c2218274 100644
--- a/src/app/organisms/navigation/DrawerBreadcrumb.jsx
+++ b/src/app/organisms/navigation/DrawerBreadcrumb.jsx
@@ -85,9 +85,9 @@ function DrawerBreadcrumb({ spaceId }) {
   }
 
   return (
-    <div className="breadcrumb__wrapper">
+    <div className="drawer-breadcrumb__wrapper">
       <ScrollView ref={scrollRef} horizontal vertical={false} invisible>
-        <div className="breadcrumb">
+        <div className="drawer-breadcrumb">
           {
             spacePath.map((id, index) => {
               const noti = (id !== cons.tabs.HOME && index < spacePath.length)
@@ -100,7 +100,7 @@ function DrawerBreadcrumb({ spaceId }) {
                 >
                   { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
                   <Button
-                    className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
+                    className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''}
                     onClick={() => selectSpace(id)}
                   >
                     <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
diff --git a/src/app/organisms/navigation/DrawerBreadcrumb.scss b/src/app/organisms/navigation/DrawerBreadcrumb.scss
index cd8519ad..0b7bacce 100644
--- a/src/app/organisms/navigation/DrawerBreadcrumb.scss
+++ b/src/app/organisms/navigation/DrawerBreadcrumb.scss
@@ -1,12 +1,12 @@
 @use '../../partials/text';
 @use '../../partials/dir';
 
-.breadcrumb__wrapper {
+.drawer-breadcrumb__wrapper {
   height: var(--header-height);
   position: relative;
 }
 
-.breadcrumb {
+.drawer-breadcrumb {
   display: flex;
   align-items: center;
   height: 100%;