diff --git a/src/components/NavBar/ShoppingBag.tsx b/src/components/NavBar/Bag.tsx
similarity index 98%
rename from src/components/NavBar/ShoppingBag.tsx
rename to src/components/NavBar/Bag.tsx
index cc2f5e8237..6aa6013041 100644
--- a/src/components/NavBar/ShoppingBag.tsx
+++ b/src/components/NavBar/Bag.tsx
@@ -20,7 +20,7 @@ const CounterDot = styled.div`
   top: 4px;
 `
 
-export const ShoppingBag = () => {
+export const Bag = () => {
   const itemsInBag = useBag((state) => state.itemsInBag)
   const [bagQuantity, setBagQuantity] = useState(0)
 
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 25defd6383..9555673f49 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -11,10 +11,10 @@ import { useIsMobile } from 'nft/hooks'
 import { ReactNode, useMemo } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
 
+import { Bag } from './Bag'
 import { ChainSelector } from './ChainSelector'
 import { MenuDropdown } from './MenuDropdown'
 import { SearchBar } from './SearchBar'
-import { ShoppingBag } from './ShoppingBag'
 import * as styles from './style.css'
 
 interface MenuItemProps {
@@ -124,7 +124,7 @@ const Navbar = () => {
               <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              {isNftPage && <ShoppingBag />}
+              {isNftPage && <Bag />}
               {!isNftPage && (
                 <Box display={{ sm: 'none', lg: 'flex' }}>
                   <ChainSelector />