diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
index 6b409a07..0f1a45fb 100644
--- a/src/components/PageWrapper.tsx
+++ b/src/components/PageWrapper.tsx
@@ -1,5 +1,4 @@
-import { Stack, XStack, YStack, styled } from 'tamagui'
-import TopBar from './TopBar'
+import { Stack, XStack, styled } from 'tamagui'
 import { ReactNode } from 'react'
 
 const Background = styled(Stack, {
@@ -24,22 +23,18 @@ const PageWrapper = ({ children }: PageWrapperProps) => {
           margin: 0,
         }}
       >
-        <YStack>
-          <TopBar />
-          <XStack
-            space={'$8'}
-            style={{
-              background:
-                'linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)',
-              width: '100%',
-              display: 'flex',
-              justifyContent: 'end',
-              alignItems: 'center',
-            }}
-          >
-            {children}
-          </XStack>
-        </YStack>
+        <XStack
+          space={'$8'}
+          style={{
+            background: 'linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)',
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'end',
+            alignItems: 'center',
+          }}
+        >
+          {children}
+        </XStack>
       </div>
     </Background>
   )
diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
deleted file mode 100644
index 5f0c0fbc..00000000
--- a/src/components/Tab.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { XStack, Text } from 'tamagui'
-import './TopBar.css'
-import Icon from './Icon'
-
-type TabProps = {
-  icon: string
-  text: string
-}
-
-const Tab = ({ icon, text }: TabProps) => {
-  const style = {
-    border: 'none',
-    display: 'flex',
-    padding: '6px 12px 6px 6px',
-    'align-items': ' center',
-    gap: '8px',
-    'border-radius': '10px',
-    background: ' #131D2F',
-    width: '136px',
-    height: '32px',
-  }
-
-  return (
-    <XStack style={style}>
-      <Icon source={icon}></Icon>
-      <Text>{text}</Text>
-    </XStack>
-  )
-}
-export default Tab
diff --git a/src/components/TopBar.css b/src/components/TopBar.css
deleted file mode 100644
index fd7df3e3..00000000
--- a/src/components/TopBar.css
+++ /dev/null
@@ -1,139 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.topbar {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 15px 25px;
-  background-color: rgba(9, 16, 28, 0.96);
-  max-width: 1512px;
-  height: 56px;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
-}
-
-.topbar_left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 15vw;
-  box-shadow: 40px 12px 62px -19px rgba(9, 16, 28, 0.9);
-  z-index: 1;
-}
-
-.topbar_middle {
-  max-width: 75vw;
-  width: 75vw;
-  overflow: auto;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.topbar_middle::-webkit-scrollbar {
-  width: 0.5em;
-  /* Set the width of the scrollbar */
-}
-
-.topbar_middle::-webkit-scrollbar-thumb {
-  background-color: darkgrey;
-  /* Set the color of the scrollbar thumb */
-}
-
-.topbar_middle::-webkit-scrollbar {
-  width: 0.5em;
-}
-
-.topbar_middle::-webkit-scrollbar-thumb {
-  background-color: #888;
-}
-/* Hide scrollbar for Firefox */
-
-.topbar_middle {
-  scrollbar-width: none;
-}
-
-.topbar_middle::-webkit-scrollbar,
-.topbar_middle::-webkit-scrollbar-thumb {
-  /* Hide scrollbar for Edge */
-  display: none;
-}
-
-.topbar_right {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  min-width: 10vw;
-  box-shadow: -40px 0px 8px 4px rgba(9, 16, 28, 0.592);
-}
-
-.topbar_actions {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.icon_btn {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  position: relative;
-}
-
-.bg_icon_btn {
-  border: none;
-  background-color: #1d2738;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-}
-
-
-
-.img_text_btn .profile {
-  position: relative;
-}
-
-.badge_top {
-  width: 6px;
-  height: 6px;
-  background-color: #223bc4;
-  position: absolute;
-  right: 0;
-  top: 0;
-  border-radius: 100%;
-}
-
-.badge_bottom {
-  width: 6px;
-  height: 6px;
-  background-color: #1c8a80;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  border-radius: 100%;
-}
-
-.outlined_btn {
-  border: none;
-  border: 1px solid #1d2738;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 10px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  color: #fff;
-  font-weight: bold;
-}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
deleted file mode 100644
index 203793c2..00000000
--- a/src/components/TopBar.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import RedDot from '/top-bar-icons/red.png'
-import YelloDot from '/top-bar-icons/yellow.png'
-import BlueDot from '/top-bar-icons/blue.png'
-import Arrow from '/top-bar-icons/chevron-left.png'
-import CommunitiesIcon from '/top-bar-icons/communities.png'
-import MessagesIcon from '/top-bar-icons/messages.png'
-import WalletIcon from '/top-bar-icons/wallet.png'
-import BrowserIcon from '/top-bar-icons/browser.png'
-import NodesIcon from '/top-bar-icons/nodes.png'
-import Rarible from '/top-bar-icons/Rarible.png'
-import User from '/top-bar-icons/user.png'
-import FullScreen from '/top-bar-icons/full-screen.png'
-import Bell from '/top-bar-icons/bell.png'
-
-import { XStack } from 'tamagui'
-
-import './TopBar.css'
-import Icon from './Icon'
-import ReactButton from './ReactButton'
-import Tab from './Tab'
-
-const bgIconBtn = {
-  border: 'none',
-  'background-color': '#1d2738',
-  cursor: 'pointer',
-  padding: '8px',
-  'border-radius': '5px',
-  display: 'flex',
-  'align-items': 'center',
-}
-
-const TopBar = () => {
-  return (
-    <XStack className="topbar">
-      <XStack className="topbar_left">
-        <div className="topbar_actions">
-          <Icon source={RedDot} className="icon_btn" />
-          <Icon source={YelloDot} className="icon_btn"></Icon>
-          <Icon className="icon_btn" source={BlueDot}></Icon>
-        </div>
-        <Icon source={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
-        <Icon source={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon>
-
-        <Icon source={MessagesIcon} width={20} height={20} style={bgIconBtn}></Icon>
-
-        <Icon source={WalletIcon} width={20} height={20} style={bgIconBtn}></Icon>
-        <Icon source={BrowserIcon} width={20} height={20} style={bgIconBtn}></Icon>
-        <Icon source={NodesIcon} width={20} height={20} style={bgIconBtn}></Icon>
-      </XStack>
-      <div className="topbar_middle">
-        {Array.from({ length: 9 }).map((_, i) => (
-          <Tab key={i} icon={Rarible} text={'Rarible'} />
-        ))}
-      </div>
-      <div className="topbar_right">
-        <ReactButton
-          style={{
-            border: '1px solid #1d2738',
-            backgroundColor: 'transparent',
-            cursor: 'pointer',
-            padding: '10px',
-            borderRadius: '5px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '15px',
-            color: '#fff',
-            fontWeight: 'bold',
-          }}
-        >
-          Jump to
-        </ReactButton>
-        <button className="icon_btn">
-          <img src={FullScreen} alt="icon" width="100%" />
-        </button>
-        <button className="icon_btn">
-          <div className="badge_top" />
-          <img src={Bell} alt="icon" />
-        </button>
-        <button className="icon_btn">
-          <div className="badge_bottom" />
-          <img src={User} alt="icon" />
-        </button>
-      </div>
-    </XStack>
-  )
-}
-
-export default TopBar