diff --git a/app.config.ts b/app.config.ts
index b55656b..999e942 100755
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,15 +1,8 @@
-import { Locales } from './locales/locales'
-
 export const socialMedia = [
   {
-    label: 'Twitter',
-    href: 'https://twitter.com/0xdevhub',
-    icon: 'twitter'
-  },
-  {
-    label: 'Discord',
-    href: 'https://discord.gg/skvN5fnt5M',
-    icon: 'discord'
+    label: 'X',
+    href: 'https://x.com/gervickasjs',
+    icon: 'x'
   },
   {
     label: 'Github',
@@ -21,7 +14,7 @@ export const socialMedia = [
 const appConfig = {
   name: '0xdevhub',
   meta: {
-    description: 'on-chain & off-chain dev hub'
+    description: 'gervickas.js blockchain app hub'
   },
   socialMedia
 }
diff --git a/app/[locale]/apps/components/Container.tsx b/app/[locale]/apps/components/Container.tsx
index bc9a36e..6419c94 100644
--- a/app/[locale]/apps/components/Container.tsx
+++ b/app/[locale]/apps/components/Container.tsx
@@ -2,8 +2,7 @@
 
 import { Locales } from '@/locales/locales'
 import { useI18n } from '@/locales/client'
-import { HeadingNavigation } from '@/app/components/typography'
-import { Typography } from '@/app/components'
+import { Text, HeadingNavigation } from '@/app/components/typography'
 
 export const AppsContainer = () => {
   const t = useI18n()
@@ -12,10 +11,10 @@ export const AppsContainer = () => {
     <div className='w-full p-6'>
       <div className='flex flex-col space-y-4'>
         <HeadingNavigation as='h2'>{t(Locales.APPS)}</HeadingNavigation>
-        <Typography.Text className='max-w-lg' variant='span'>
+        <Text className='max-w-lg' variant='span'>
           Enjoy thousand of the latest ethereum apps, games, music, movies, TV,
           books, magazines & more. Anytime, anywhere, across your devices.
-        </Typography.Text>
+        </Text>
       </div>
     </div>
   )
diff --git a/app/[locale]/apps/components/index.ts b/app/[locale]/apps/components/index.ts
index 6b1e163..c0ccbb4 100644
--- a/app/[locale]/apps/components/index.ts
+++ b/app/[locale]/apps/components/index.ts
@@ -1 +1 @@
-export { default as Container } from './Container'
+export { default as AppsContainer } from './Container'
diff --git a/app/[locale]/apps/loading.tsx b/app/[locale]/apps/loading.tsx
deleted file mode 100644
index 28887a5..0000000
--- a/app/[locale]/apps/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Loading as LoadingComponent } from '@/app/components/Loading'
-
-export default function Loading() {
-  return <LoadingComponent className='m-6' />
-}
diff --git a/app/[locale]/components/MaintenanceMode.tsx b/app/[locale]/components/MaintenanceMode.tsx
index 8fd72e6..ee48115 100644
--- a/app/[locale]/components/MaintenanceMode.tsx
+++ b/app/[locale]/components/MaintenanceMode.tsx
@@ -1,4 +1,5 @@
-import { Logo, Social } from '@/app/components'
+import { Logo } from '@/app/components'
+import { SocialMedia } from '@/app/components/social'
 
 export const MaintenanceMode = () => {
   return (
@@ -7,7 +8,7 @@ export const MaintenanceMode = () => {
         <Logo />
       </div>
       <div>
-        <Social className='text-black/40' />
+        <SocialMedia className='text-black/40' />
       </div>
     </main>
   )
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index b9bce3b..1f900ff 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -3,11 +3,11 @@
 import { type ReactNode } from 'react'
 import { useDarkMode, useIsClient } from 'usehooks-ts'
 import classNames from 'classnames'
-import { MaintenanceMode } from './components/MaintenanceMode'
 import StyledJsxRegistry from '@/app/registry'
 import { Header, Footer } from '@/app/components'
-import { WalletProvider } from '../components/wallet/Provider'
-import { LanguageProvider } from '../components/language'
+import { MaintenanceMode } from '@/app/[locale]/components/MaintenanceMode'
+import { Provider as WalletProvider } from '@/app/components/wallet'
+import { Provider as LanguageProvider } from '@/app/components/language'
 
 export type BaseLayoutProps = {
   children: ReactNode
diff --git a/app/components/card/Card.tsx b/app/components/Card.tsx
similarity index 92%
rename from app/components/card/Card.tsx
rename to app/components/Card.tsx
index 87a751d..f0a7f0b 100644
--- a/app/components/card/Card.tsx
+++ b/app/components/Card.tsx
@@ -12,8 +12,8 @@ export const Card = ({
   bgOpacity = 0.6,
   as: Component = 'div',
   ...props
-}: CardProps) => {
-  return createElement(
+}: CardProps) =>
+  createElement(
     Component,
     {
       ...props,
@@ -28,6 +28,5 @@ export const Card = ({
     },
     children
   )
-}
 
 export default Card
diff --git a/app/components/footer/Footer.tsx b/app/components/Footer.tsx
similarity index 100%
rename from app/components/footer/Footer.tsx
rename to app/components/Footer.tsx
diff --git a/app/components/header/Header.tsx b/app/components/Header.tsx
similarity index 89%
rename from app/components/header/Header.tsx
rename to app/components/Header.tsx
index dffb3d9..9f27ea8 100755
--- a/app/components/header/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,8 +1,9 @@
 import { type HTMLProps } from 'react'
 import dynamic from 'next/dynamic'
 import classNames from 'classnames'
-import { Separator, Logo, Loading, Navigation } from '@/app/components'
+import { Separator, Logo, Loading } from '@/app/components'
 import { Locales } from '@/locales/locales'
+import { MainNav } from '@/app/components/navigation/main/Main'
 
 const Wallet = dynamic(() => import('@/app/components/wallet/Wallet'), {
   ssr: false,
@@ -24,7 +25,7 @@ export const Header = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
       >
         <Logo />
         <div className='flex items-center space-x-4'>
-          <Navigation.MainNavigation
+          <MainNav
             navLinks={[
               {
                 label: Locales.APPS,
diff --git a/app/components/logo/Logo.tsx b/app/components/Logo.tsx
similarity index 100%
rename from app/components/logo/Logo.tsx
rename to app/components/Logo.tsx
diff --git a/app/components/card/index.ts b/app/components/card/index.ts
deleted file mode 100644
index 7c8fc7a..0000000
--- a/app/components/card/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Card } from './Card'
-
-export { Card }
-
-export default Card
diff --git a/app/components/footer/index.ts b/app/components/footer/index.ts
deleted file mode 100644
index 1a614f4..0000000
--- a/app/components/footer/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Footer } from './Footer'
-
-export { Footer }
-
-export default Footer
diff --git a/app/components/header/index.ts b/app/components/header/index.ts
deleted file mode 100755
index f0a4ce1..0000000
--- a/app/components/header/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Header } from './Header'
-
-export { Header }
-
-export default Header
diff --git a/app/components/index.ts b/app/components/index.ts
index 017baa6..02b6a74 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -1,14 +1,7 @@
 export { default as Button } from './Button'
 export { default as Loading } from './Loading'
 export { default as Separator } from './Separator'
-export { default as Card } from './card'
-export { default as Footer } from './footer'
-export { default as Header } from './header'
-export { default as Language } from './language'
-export { default as Logo } from './logo'
-export * as Navigation from './navigation'
-export { default as Settings } from './settings'
-export { default as Social } from './social'
-export { default as Theme } from './theme'
-export * as Typography from './typography'
-export { default as Wallet } from './wallet'
+export { default as Card } from './Card'
+export { default as Footer } from './Footer'
+export { default as Header } from './Header'
+export { default as Logo } from './Logo'
diff --git a/app/components/language/List.tsx b/app/components/language/List.tsx
index 0762669..13cee6f 100644
--- a/app/components/language/List.tsx
+++ b/app/components/language/List.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { useChangeLocale, useCurrentLocale } from '@/locales/client'
 import { localeConfig, Locale } from '@/locales/config'
 import { CheckBadgeIcon } from '@heroicons/react/24/solid'
-import { Typography } from '..'
+import { Text } from '@/app/components/typography'
 
 export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
   const currentLocale = useCurrentLocale()
@@ -25,9 +25,9 @@ export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
               'flex cursor-pointer items-center justify-between space-x-2 p-2'
             )}
           >
-            <Typography.Text as='span' className='capitalize'>
+            <Text as='span' className='capitalize'>
               {locale}
-            </Typography.Text>
+            </Text>
             {locale === currentLocale && (
               <CheckBadgeIcon width={18} className='text-green-400' />
             )}
diff --git a/app/components/language/Selector.tsx b/app/components/language/Selector.tsx
index a1baed5..ef109cf 100644
--- a/app/components/language/Selector.tsx
+++ b/app/components/language/Selector.tsx
@@ -4,7 +4,7 @@ import { type HTMLProps } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import classNames from 'classnames'
 import { useCurrentLocale } from '@/locales/client'
-import { Typography } from '..'
+import { Text } from '@/app/components/typography'
 
 export type LanguageSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -24,9 +24,9 @@ export const LanguageSelector = ({
         'flex cursor-pointer justify-between'
       )}
     >
-      <Typography.Text as='span' className='capitalize'>
+      <Text as='span' className='capitalize'>
         {currentLocale}
-      </Typography.Text>
+      </Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {
diff --git a/app/components/language/index.ts b/app/components/language/index.ts
index 290155a..d9cc154 100644
--- a/app/components/language/index.ts
+++ b/app/components/language/index.ts
@@ -1,9 +1,4 @@
-export { default as LanguageProvider } from './Provider'
-export { default as LanguageSelector } from './Selector'
-export { default as LanguageList } from './List'
-
-import { Language } from './Language'
-
-export { Language }
-
-export default Language
+export { default as Provider } from './Provider'
+export { default as Selector } from './Selector'
+export { default as List } from './List'
+export { default as Language } from './Language'
diff --git a/app/components/logo/index.ts b/app/components/logo/index.ts
deleted file mode 100755
index 013bdde..0000000
--- a/app/components/logo/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Logo } from './Logo'
-
-export { Logo }
-
-export default Logo
diff --git a/app/components/navigation/aside/AsideNavigation.tsx b/app/components/navigation/aside/AsideNavigation.tsx
index bd7de07..795d0c7 100644
--- a/app/components/navigation/aside/AsideNavigation.tsx
+++ b/app/components/navigation/aside/AsideNavigation.tsx
@@ -1,5 +1,5 @@
 import { Children, type HTMLProps, type ReactNode } from 'react'
-import { Card } from '@/app/components/card/Card'
+import { Card } from '@/app/components/Card'
 import classNames from 'classnames'
 
 import {
diff --git a/app/components/navigation/aside/AsideNavigationItem.tsx b/app/components/navigation/aside/AsideNavigationItem.tsx
index 0ff75cd..3fced23 100644
--- a/app/components/navigation/aside/AsideNavigationItem.tsx
+++ b/app/components/navigation/aside/AsideNavigationItem.tsx
@@ -4,7 +4,7 @@ import Link, { LinkProps } from 'next/link'
 import classNames from 'classnames'
 import { type HTMLProps, type ReactNode } from 'react'
 import useCurrentPath from '@/app/lib/hooks/useCurrentPath'
-import { Typography } from '../..'
+import { Text } from '@/app/components/typography'
 
 export type AsideNavigationItemProps = HTMLProps<HTMLAnchorElement> &
   LinkProps & {
@@ -37,9 +37,9 @@ export const AsideNavigationItem = ({
       )}
     >
       {icon}
-      <Typography.Text size='md' className='hidden lg:block'>
+      <Text size='md' className='hidden lg:block'>
         {label}
-      </Typography.Text>
+      </Text>
     </Link>
   )
 }
diff --git a/app/components/navigation/aside/index.ts b/app/components/navigation/aside/index.ts
index d704f54..9c669e9 100644
--- a/app/components/navigation/aside/index.ts
+++ b/app/components/navigation/aside/index.ts
@@ -1,7 +1,2 @@
 export { default as AsideNavigationItem } from './AsideNavigationItem'
-
-import { AsideNavigation } from './AsideNavigation'
-
-export { AsideNavigation }
-
-export default AsideNavigation
+export { default as AsideNavigation } from './AsideNavigation'
diff --git a/app/components/navigation/index.ts b/app/components/navigation/index.ts
index d9516e9..8ac3653 100755
--- a/app/components/navigation/index.ts
+++ b/app/components/navigation/index.ts
@@ -1,2 +1,2 @@
-export { default as AsideNavigation } from './aside'
-export { default as MainNavigation } from './main'
+export * as Aside from './aside'
+export * as Main from './main'
diff --git a/app/components/navigation/main/Main.tsx b/app/components/navigation/main/Main.tsx
index 4a258c0..d6cde72 100755
--- a/app/components/navigation/main/Main.tsx
+++ b/app/components/navigation/main/Main.tsx
@@ -4,7 +4,7 @@ import { useEffect, type HTMLProps, useCallback } from 'react'
 import classNames from 'classnames'
 import { ArrowLeftIcon, Bars3BottomLeftIcon } from '@heroicons/react/24/solid'
 import { useToggle, useMediaQuery } from 'usehooks-ts'
-import { Card } from '@/app/components/card/Card'
+import { Card } from '@/app/components/Card'
 import { MainList } from './MainList'
 import { MainListItemProps } from './MainListItem'
 
@@ -12,7 +12,7 @@ type MainProps = HTMLProps<HTMLElement> & {
   navLinks: MainListItemProps[]
 }
 
-export const Main = ({ navLinks, ...props }: MainProps) => {
+export const MainNav = ({ navLinks, ...props }: MainProps) => {
   const [isOpened, toggle] = useToggle()
   const matches = useMediaQuery(`(min-width: 1024px`)
 
@@ -77,4 +77,4 @@ export const Main = ({ navLinks, ...props }: MainProps) => {
   )
 }
 
-export default Main
+export default MainNav
diff --git a/app/components/navigation/main/MainListItem.tsx b/app/components/navigation/main/MainListItem.tsx
index 843c937..c103643 100644
--- a/app/components/navigation/main/MainListItem.tsx
+++ b/app/components/navigation/main/MainListItem.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { useI18n } from '@/locales/client'
 import { LocalesKeys } from '@/locales/locales'
 import useCurrentPath from '@/app/lib/hooks/useCurrentPath'
-import { Typography } from '../..'
+import { Text } from '@/app/components/typography'
 
 export const Variant = {
   default: {
@@ -49,7 +49,7 @@ export const MainListItem = ({
           : Variant[variant || 'default'].classes
       ])}
     >
-      <Typography.Text size='base'>{t(label)}</Typography.Text>
+      <Text size='base'>{t(label)}</Text>
     </Link>
   )
 }
diff --git a/app/components/navigation/main/index.ts b/app/components/navigation/main/index.ts
index a8513bc..ed70d45 100644
--- a/app/components/navigation/main/index.ts
+++ b/app/components/navigation/main/index.ts
@@ -1,8 +1,3 @@
 export { default as MainList } from './MainList'
 export { default as MainListItem } from './MainListItem'
-
-import { Main } from './Main'
-
-export { Main }
-
-export default Main
+export { default as MainNav } from './Main'
diff --git a/app/components/settings/Container.tsx b/app/components/settings/Container.tsx
index ae2ed0e..d8867aa 100644
--- a/app/components/settings/Container.tsx
+++ b/app/components/settings/Container.tsx
@@ -3,9 +3,11 @@
 import { type HTMLProps } from 'react'
 import classNames from 'classnames'
 import { Heading } from '@/app/components/typography/Heading'
-import { Language, Theme } from '@/app/components'
+
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
+import { Theme } from '@/app/components/theme'
+import { Language } from '@/app/components/language'
 
 export const SettingsContainer = (props: HTMLProps<HTMLDivElement>) => {
   const t = useI18n()
diff --git a/app/components/settings/index.ts b/app/components/settings/index.ts
index 4c7f656..d257a96 100644
--- a/app/components/settings/index.ts
+++ b/app/components/settings/index.ts
@@ -1,8 +1,3 @@
 export { default as SettingsSelector } from './Selector'
 export { default as SettingsContainer } from './Container'
-
-import { Settings } from './Settings'
-
-export { Settings }
-
-export default Settings
+export { default as Settings } from './Settings'
diff --git a/app/components/social/SocialMedia.tsx b/app/components/social/SocialMedia.tsx
index 92194e0..674644a 100644
--- a/app/components/social/SocialMedia.tsx
+++ b/app/components/social/SocialMedia.tsx
@@ -1,5 +1,5 @@
 import { Children, type HTMLProps, type SVGProps } from 'react'
-import { Discord, Twitter, Github } from './icons'
+import { Discord, X, Github } from './icons'
 import classNames from 'classnames'
 import { socialMedia } from '@/app.config'
 import Link from 'next/link'
@@ -29,7 +29,7 @@ export const SocialMedia = ({
             {
               {
                 discord: <Discord {...iconProps} />,
-                twitter: <Twitter {...iconProps} />,
+                x: <X {...iconProps} />,
                 github: <Github {...iconProps} />
               }[icon]
             }
diff --git a/app/components/social/icons/X.tsx b/app/components/social/icons/X.tsx
new file mode 100644
index 0000000..c89b690
--- /dev/null
+++ b/app/components/social/icons/X.tsx
@@ -0,0 +1,20 @@
+import { type SVGProps } from 'react'
+
+export const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    fill='none'
+    viewBox='0 0 24 24'
+    aria-hidden='true'
+    {...props}
+  >
+    <g>
+      <path
+        fill='currentColor'
+        d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'
+      ></path>
+    </g>
+  </svg>
+)
+export default XIcon
diff --git a/app/components/social/icons/index.tsx b/app/components/social/icons/index.tsx
index 7d967b0..327d78d 100644
--- a/app/components/social/icons/index.tsx
+++ b/app/components/social/icons/index.tsx
@@ -1,3 +1,4 @@
 export { default as Discord } from './Discord'
 export { default as Twitter } from './Twitter'
 export { default as Github } from './Github'
+export { default as X } from './X'
diff --git a/app/components/social/index.ts b/app/components/social/index.ts
index c62b580..6c69fa5 100644
--- a/app/components/social/index.ts
+++ b/app/components/social/index.ts
@@ -1,7 +1,3 @@
 export * as SocialIcons from './icons'
 
-import { SocialMedia } from './SocialMedia'
-
-export { SocialMedia }
-
-export default SocialMedia
+export { default as SocialMedia } from './SocialMedia'
diff --git a/app/components/theme/List.tsx b/app/components/theme/List.tsx
index 563b866..4996445 100644
--- a/app/components/theme/List.tsx
+++ b/app/components/theme/List.tsx
@@ -6,7 +6,7 @@ import { useDarkMode } from 'usehooks-ts'
 import { CheckBadgeIcon } from '@heroicons/react/24/solid'
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
-import { Typography } from '..'
+import { Text } from '@/app/components/typography'
 
 export const ThemeList = (props: HTMLProps<HTMLUListElement>) => {
   const t = useI18n()
@@ -37,7 +37,7 @@ export const ThemeList = (props: HTMLProps<HTMLUListElement>) => {
             )}
             onClick={theme.onClick}
           >
-            <Typography.Text as='span'>{theme.label}</Typography.Text>
+            <Text as='span'>{theme.label}</Text>
             {theme.active && (
               <span>
                 <CheckBadgeIcon width={18} className='text-green-400' />
diff --git a/app/components/theme/Selector.tsx b/app/components/theme/Selector.tsx
index a4f6fe3..9826dec 100644
--- a/app/components/theme/Selector.tsx
+++ b/app/components/theme/Selector.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 import { useDarkMode } from 'usehooks-ts'
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
-import { Typography } from '..'
+import { Text } from '@/app/components/typography'
 
 export type ThemeSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -24,9 +24,7 @@ export const ThemeSelector = ({ isOpen, ...props }: ThemeSelectorProps) => {
         'flex cursor-pointer justify-between'
       )}
     >
-      <Typography.Text as='span'>
-        {isDarkMode ? t(Locales.DARK) : t(Locales.LIGHT)}
-      </Typography.Text>
+      <Text as='span'>{isDarkMode ? t(Locales.DARK) : t(Locales.LIGHT)}</Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {
diff --git a/app/components/theme/index.ts b/app/components/theme/index.ts
index b309a8b..3a1d9c0 100644
--- a/app/components/theme/index.ts
+++ b/app/components/theme/index.ts
@@ -1,8 +1,3 @@
 export { default as ThemeSelector } from './Selector'
 export { default as ThemeList } from './List'
-
-import { Theme } from './Theme'
-
-export { Theme }
-
-export default Theme
+export { default as Theme } from './Theme'
diff --git a/app/components/toggle/ToggleContent.tsx b/app/components/toggle/ToggleContent.tsx
index 99cf542..1959393 100644
--- a/app/components/toggle/ToggleContent.tsx
+++ b/app/components/toggle/ToggleContent.tsx
@@ -3,7 +3,7 @@
 import { type ReactNode, useRef } from 'react'
 import classNames from 'classnames'
 import { useOnClickOutside, useToggle } from 'usehooks-ts'
-import { Card } from '@/app/components/card/Card'
+import { Card } from '@/app/components/Card'
 
 export type ToggleContentOptions = {
   onClick: () => void
diff --git a/app/components/typography/Text.tsx b/app/components/typography/Text.tsx
index d5089b1..de6ccad 100644
--- a/app/components/typography/Text.tsx
+++ b/app/components/typography/Text.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { type HTMLProps, createElement } from 'react'
 import classNames from 'classnames'
 
diff --git a/app/components/wallet/avatar/Avatar.tsx b/app/components/wallet/Avatar.tsx
similarity index 100%
rename from app/components/wallet/avatar/Avatar.tsx
rename to app/components/wallet/Avatar.tsx
diff --git a/app/components/wallet/avatar/index.ts b/app/components/wallet/avatar/index.ts
deleted file mode 100644
index 1848a56..0000000
--- a/app/components/wallet/avatar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Avatar } from './Avatar'
diff --git a/app/components/wallet/index.ts b/app/components/wallet/index.ts
index 4c7d12e..b0de84a 100644
--- a/app/components/wallet/index.ts
+++ b/app/components/wallet/index.ts
@@ -1,12 +1,3 @@
+export { default as Avatar } from './Avatar'
+export { default as Wallet } from './Wallet'
 export { default as Provider } from './Provider'
-
-export * as Avatar from './avatar'
-export * as Button from './button'
-export * as Network from './network'
-export * as Panel from './panel'
-
-import { Wallet } from './Wallet'
-
-export { Wallet }
-
-export default Wallet
diff --git a/app/components/wallet/network/List.tsx b/app/components/wallet/network/List.tsx
index d35608d..1d7be66 100644
--- a/app/components/wallet/network/List.tsx
+++ b/app/components/wallet/network/List.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 import useNetwork, { ChainConfig } from '@/app/lib/wallet/hooks/useNetwork'
 import { Loading } from '@/app/components/Loading'
 import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
-import { Typography } from '../..'
+import { Text } from '@/app/components/typography'
 
 type NetworkListProps = HTMLProps<HTMLUListElement> & {
   chain: ChainConfig
@@ -33,7 +33,7 @@ export const NetworkList = ({ chain, chains, ...props }: NetworkListProps) => {
             )}
             onClick={() => switchNetwork && switchNetwork(chainItem.id)}
           >
-            <Typography.Text as='span'>{chainItem.name}</Typography.Text>
+            <Text as='span'>{chainItem.name}</Text>
             <span className='flex items-center space-x-px'>
               {chain.id === chainItem.id && (
                 <CheckBadgeIcon width={18} className='text-green-400' />
diff --git a/app/components/wallet/network/Selector.tsx b/app/components/wallet/network/Selector.tsx
index 58a99e1..d680ee3 100644
--- a/app/components/wallet/network/Selector.tsx
+++ b/app/components/wallet/network/Selector.tsx
@@ -12,7 +12,7 @@ import classNames from 'classnames'
 import { ChainConfig } from '@/app/lib/wallet/hooks/useNetwork'
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
-import { Typography } from '../..'
+import { Text } from '@/app/components/typography'
 
 type NetworkSelectorProps = HTMLProps<HTMLDivElement> & {
   chain: ChainConfig
@@ -42,9 +42,9 @@ export const NetworkSelector = ({
         ) : (
           <NetworkThumbnail src={`/assets/images/chains/${chain.id}.svg`} />
         )}
-        <Typography.Text as='span'>
+        <Text as='span'>
           {chain.unsupported ? t(Locales.NOT_ALLOWED) : chain.name}
-        </Typography.Text>
+        </Text>
       </div>
       <ChevronDownIcon
         width={18}
diff --git a/app/components/wallet/panel/Container.tsx b/app/components/wallet/panel/Container.tsx
index 6e0784b..0274f96 100644
--- a/app/components/wallet/panel/Container.tsx
+++ b/app/components/wallet/panel/Container.tsx
@@ -6,13 +6,13 @@ import { useWallet, useBalance } from '@/app/lib/wallet/hooks'
 import addressUtils from '@/app/lib/utils/address'
 import useNetwork from '@/app/lib/wallet/hooks/useNetwork'
 import balanceUtils from '@/app/lib/utils/balance'
-import { Square2StackIcon } from '@heroicons/react/24/outline'
+import { useI18n } from '@/locales/client'
+import { Locales } from '@/locales/locales'
 import { useCopyToClipboard } from 'usehooks-ts'
-import { Typography } from '@/app/components'
+import { Square2StackIcon } from '@heroicons/react/24/outline'
 import { Network } from '../network/Network'
 import { ButtonDisconnect } from '../button'
-import { useI18n } from '@/locales/client'
-import { Locales } from '@/locales/locales'
+import { Heading, Text } from '@/app/components/typography'
 
 export const PanelContainer = ({
   className,
@@ -34,11 +34,9 @@ export const PanelContainer = ({
     >
       <div className='flex flex-col space-y-4'>
         <div className='flex flex-col space-y-1'>
-          <Typography.Heading as='h4'>{t(Locales.WALLET)}</Typography.Heading>
+          <Heading as='h4'>{t(Locales.WALLET)}</Heading>
           <div className='flex justify-between space-x-4'>
-            <Typography.Text as='span'>
-              {addressUtils.toEllipsis(address!, 8, 6)}
-            </Typography.Text>
+            <Text as='span'>{addressUtils.toEllipsis(address!, 8, 6)}</Text>
             <Square2StackIcon
               onClick={() => copy(address!)}
               width={18}
@@ -47,16 +45,14 @@ export const PanelContainer = ({
           </div>
         </div>
         <div className='flex flex-col space-y-1'>
-          <Typography.Heading as='h4'>{t(Locales.NETWORK)}</Typography.Heading>
+          <Heading as='h4'>{t(Locales.NETWORK)}</Heading>
           <Network chain={chain!} chains={chains} />
         </div>
         <div className='flex flex-col space-y-1'>
-          <Typography.Heading as='h4'>{t(Locales.BALANCE)}</Typography.Heading>
+          <Heading as='h4'>{t(Locales.BALANCE)}</Heading>
           <div className='flex space-x-2'>
-            <Typography.Text>
-              {balanceUtils.cropDecimals(balance?.formatted)}
-            </Typography.Text>
-            <Typography.Text as='span'>{balance?.symbol}</Typography.Text>
+            <Text>{balanceUtils.cropDecimals(balance?.formatted)}</Text>
+            <Text as='span'>{balance?.symbol}</Text>
           </div>
         </div>
       </div>
diff --git a/app/components/wallet/panel/Selector.tsx b/app/components/wallet/panel/Selector.tsx
index 1888627..fe498d5 100644
--- a/app/components/wallet/panel/Selector.tsx
+++ b/app/components/wallet/panel/Selector.tsx
@@ -2,7 +2,7 @@
 
 import { type HTMLProps } from 'react'
 import { useWallet } from '@/app/lib/wallet/hooks'
-import { Avatar } from '../avatar/Avatar'
+import { Avatar } from '../Avatar'
 import classNames from 'classnames'
 
 export type PanelSelectorProps = HTMLProps<HTMLDivElement> & {