diff --git a/app/[locale]/apps/components/Container.tsx b/app/[locale]/apps/components/Container.tsx
index d3aea51..bc9a36e 100644
--- a/app/[locale]/apps/components/Container.tsx
+++ b/app/[locale]/apps/components/Container.tsx
@@ -1,15 +1,22 @@
 'use client'
 
 import { Locales } from '@/locales/locales'
-import { Heading } from '@/app/components/typography/Heading'
 import { useI18n } from '@/locales/client'
+import { HeadingNavigation } from '@/app/components/typography'
+import { Typography } from '@/app/components'
 
 export const AppsContainer = () => {
   const t = useI18n()
 
   return (
-    <div className='p-6'>
-      <Heading as='h2'>{t(Locales.APPS)}</Heading>
+    <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'>
+          Enjoy thousand of the latest ethereum apps, games, music, movies, TV,
+          books, magazines & more. Anytime, anywhere, across your devices.
+        </Typography.Text>
+      </div>
     </div>
   )
 }
diff --git a/app/[locale]/apps/layout.tsx b/app/[locale]/apps/layout.tsx
index 620c1cc..0942737 100644
--- a/app/[locale]/apps/layout.tsx
+++ b/app/[locale]/apps/layout.tsx
@@ -23,7 +23,7 @@ export default function Layout({ children }: LayoutProps) {
   ]
 
   return (
-    <AsideNavigation navLinks={navLinks} className='h-full'>
+    <AsideNavigation navLinks={navLinks} className='h-full w-full'>
       {children}
     </AsideNavigation>
   )
diff --git a/app/[locale]/components/MaintenanceMode.tsx b/app/[locale]/components/MaintenanceMode.tsx
index d980432..8fd72e6 100644
--- a/app/[locale]/components/MaintenanceMode.tsx
+++ b/app/[locale]/components/MaintenanceMode.tsx
@@ -7,7 +7,7 @@ export const MaintenanceMode = () => {
         <Logo />
       </div>
       <div>
-        <Social className='text-black/30' />
+        <Social className='text-black/40' />
       </div>
     </main>
   )
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 6b2c779..13b93dd 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -26,8 +26,8 @@ export default function BaseLayout({ children, params }: BaseLayoutProps) {
             className={classNames(
               'flex min-h-screen flex-col',
               'h-screen overflow-x-hidden text-sm font-medium',
-              'bg-stone-100  text-stone-600/70',
-              'dark:bg-third-100 dark:text-gray-400'
+              'bg-stone-100  text-stone-900/70',
+              'dark:bg-third-100 dark:text-cyan-50'
             )}
           >
             {process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true' ? (
@@ -35,7 +35,7 @@ export default function BaseLayout({ children, params }: BaseLayoutProps) {
             ) : (
               <StyledJsxRegistry>
                 <Header />
-                <main className='flex-1'>{children}</main>
+                <main className='flex-1 lg:container'>{children}</main>
                 <Footer className='py-4' />
               </StyledJsxRegistry>
             )}
diff --git a/app/components/Separator.tsx b/app/components/Separator.tsx
index 4ec8713..3cfb1b1 100644
--- a/app/components/Separator.tsx
+++ b/app/components/Separator.tsx
@@ -7,7 +7,7 @@ export const Separator = (props: HTMLProps<HTMLDivElement>) => (
     {...props}
     className={classNames(
       props.className,
-      ' select-none text-stone-400/30 dark:text-secondary/30'
+      ' select-none text-stone-400/30 dark:text-cyan-50/20'
     )}
   >
     |
diff --git a/app/components/header/Header.tsx b/app/components/header/Header.tsx
index 7c91e21..719f3a4 100755
--- a/app/components/header/Header.tsx
+++ b/app/components/header/Header.tsx
@@ -20,7 +20,7 @@ export const Header = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
     <header {...props} className={classNames(className, 'container')}>
       <div
         className={classNames(
-          'flex items-center justify-between rounded-xl py-4'
+          'flex items-center justify-between rounded-xl py-2'
         )}
       >
         <Logo />
diff --git a/app/components/language/List.tsx b/app/components/language/List.tsx
index db3fbc5..aa6f19d 100644
--- a/app/components/language/List.tsx
+++ b/app/components/language/List.tsx
@@ -5,6 +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 '..'
 
 export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
   const currentLocale = useCurrentLocale()
@@ -24,7 +25,7 @@ export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
               'flex cursor-pointer items-center justify-between space-x-2 p-2'
             )}
           >
-            <span>{locale}</span>
+            <Typography.Text as='span'>{locale}</Typography.Text>
             {locale === currentLocale && (
               <CheckBadgeIcon width={18} className='text-green-400' />
             )}
diff --git a/app/components/language/Provider.tsx b/app/components/language/Provider.tsx
index b21b10c..2754023 100644
--- a/app/components/language/Provider.tsx
+++ b/app/components/language/Provider.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react'
 import { I18nProviderClient } from '@/locales/client'
 import localeConfig from '@/locales/config'
+import { Loading } from '@/app/components/Loading'
 
 export type LanguageProviderProps = {
   children: ReactNode
@@ -12,23 +13,13 @@ export const LanguageProvider = ({
   locale
 }: LanguageProviderProps) => {
   return (
-    <I18nProviderClient locale={locale || localeConfig.defaultLocale}>
+    <I18nProviderClient
+      locale={locale || localeConfig.defaultLocale}
+      fallback={<Loading />}
+    >
       {children}
     </I18nProviderClient>
   )
 }
 
 export default LanguageProvider
-
-// import { ReactElement } from 'react'
-// import { I18nProviderClient } from '@/locales/client'
-
-// export default function SubLayout({
-//   params: { locale },
-//   children
-// }: {
-//   params: { locale: string }
-//   children: ReactElement
-// }) {
-//   return <I18nProviderClient locale={locale}>{children}</I18nProviderClient>
-// }
diff --git a/app/components/language/Selector.tsx b/app/components/language/Selector.tsx
index 7be8e08..47ae8e1 100644
--- a/app/components/language/Selector.tsx
+++ b/app/components/language/Selector.tsx
@@ -4,6 +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 '..'
 
 export type LanguageSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -23,7 +24,7 @@ export const LanguageSelector = ({
         'flex cursor-pointer justify-between'
       )}
     >
-      <span className='text-sm '>{currentLocale}</span>
+      <Typography.Text as='span'>{currentLocale}</Typography.Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {
diff --git a/app/components/logo/Logo.tsx b/app/components/logo/Logo.tsx
index 9d6eb7a..b432fb6 100755
--- a/app/components/logo/Logo.tsx
+++ b/app/components/logo/Logo.tsx
@@ -25,7 +25,7 @@ export const Logo = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
         translate='no'
       >
         <h1 className='flex items-center space-x-px'>
-          <span className='text-stone-500 dark:text-cyan-50'>0xdev</span>
+          <span>0xdev</span>
           <span className='z-1 relative'>
             <span
               className={classNames([
diff --git a/app/components/navigation/aside/AsideNavigation.tsx b/app/components/navigation/aside/AsideNavigation.tsx
index f19c8c4..bd7de07 100644
--- a/app/components/navigation/aside/AsideNavigation.tsx
+++ b/app/components/navigation/aside/AsideNavigation.tsx
@@ -20,16 +20,19 @@ export const AsideNavigation = ({
 }: AsideNavigationProps) => {
   return (
     <Card
-      as='section'
       {...props}
-      className={classNames(className, 'flex')}
+      className={classNames(className, 'flex lg:rounded-md')}
       bgOpacity={0.4}
     >
-      <aside className='flex-none overflow-hidden'>
+      <aside className='-mr-1 flex-none'>
         <ul className='flex flex-col'>
           {Children.toArray(
-            navLinks.map(({ href, icon, label }) => (
-              <li className='text-center'>
+            navLinks.map(({ href, icon, label }, index) => (
+              <li
+                className={classNames('text-center', {
+                  'overflow-hidden lg:rounded-tl-md': index === 0
+                })}
+              >
                 <AsideNavigationItem href={href} icon={icon} label={label} />
               </li>
             ))
@@ -38,8 +41,8 @@ export const AsideNavigation = ({
       </aside>
       <div
         className={classNames(
-          'flex-1 bg-stone-200 dark:bg-black/40',
-          'border-l-4 border-secondary dark:border-lime-400 '
+          'flex-1 bg-white dark:bg-black/40',
+          'border-l-4 border-secondary dark:border-lime-400 lg:rounded-md'
         )}
       >
         {children}
diff --git a/app/components/navigation/aside/AsideNavigationItem.tsx b/app/components/navigation/aside/AsideNavigationItem.tsx
index a0b9f39..ef13d37 100644
--- a/app/components/navigation/aside/AsideNavigationItem.tsx
+++ b/app/components/navigation/aside/AsideNavigationItem.tsx
@@ -4,6 +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 '../..'
 
 export type AsideNavigationItemProps = HTMLProps<HTMLAnchorElement> &
   LinkProps & {
@@ -29,14 +30,14 @@ export const AsideNavigationItem = ({
         'group',
         'flex flex-col items-center p-2 lg:p-4',
         {
-          'bg-secondary font-bold text-sky-100 hover:opacity-90 dark:bg-lime-400 dark:text-lime-900':
+          'bg-secondary text-sky-100 hover:opacity-90 dark:bg-lime-400 dark:text-lime-900':
             isCurrentPath,
           'hover:bg-stone-200 dark:hover:bg-black/70': !isCurrentPath
         }
       )}
     >
       <span>{icon}</span>
-      <span className='text-sm'>{label}</span>
+      <Typography.Text size='sm'>{label}</Typography.Text>
     </Link>
   )
 }
diff --git a/app/components/navigation/heading/index.ts b/app/components/navigation/heading/index.ts
deleted file mode 100644
index 71c1f4c..0000000
--- a/app/components/navigation/heading/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { HeadingNavigation } from './HeadingNavigation'
-
-export { HeadingNavigation }
-
-export default HeadingNavigation
diff --git a/app/components/navigation/index.ts b/app/components/navigation/index.ts
index 7e0bc35..d9516e9 100755
--- a/app/components/navigation/index.ts
+++ b/app/components/navigation/index.ts
@@ -1,3 +1,2 @@
-export { default as HeadingNavigation } from './heading'
 export { default as AsideNavigation } from './aside'
 export { default as MainNavigation } from './main'
diff --git a/app/components/navigation/main/MainListItem.tsx b/app/components/navigation/main/MainListItem.tsx
index c833afa..843c937 100644
--- a/app/components/navigation/main/MainListItem.tsx
+++ b/app/components/navigation/main/MainListItem.tsx
@@ -5,12 +5,13 @@ import classNames from 'classnames'
 import { useI18n } from '@/locales/client'
 import { LocalesKeys } from '@/locales/locales'
 import useCurrentPath from '@/app/lib/hooks/useCurrentPath'
+import { Typography } from '../..'
 
 export const Variant = {
   default: {
     default: '',
     active:
-      'dark:text-cyan-50 font-bold hover:dark:text-cyan-50/75 hover:text-stone-500/75',
+      'dark:text-cyan-50 hover:dark:text-cyan-50/75 hover:text-stone-500/75',
     classes:
       'dark:text-cyan-50 hover:dark:text-cyan-50/75 hover:text-stone-500/75'
   },
@@ -48,7 +49,7 @@ export const MainListItem = ({
           : Variant[variant || 'default'].classes
       ])}
     >
-      {t(label)}
+      <Typography.Text size='base'>{t(label)}</Typography.Text>
     </Link>
   )
 }
diff --git a/app/components/theme/List.tsx b/app/components/theme/List.tsx
index fc0308c..563b866 100644
--- a/app/components/theme/List.tsx
+++ b/app/components/theme/List.tsx
@@ -6,6 +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 '..'
 
 export const ThemeList = (props: HTMLProps<HTMLUListElement>) => {
   const t = useI18n()
@@ -36,7 +37,7 @@ export const ThemeList = (props: HTMLProps<HTMLUListElement>) => {
             )}
             onClick={theme.onClick}
           >
-            <span>{theme.label}</span>
+            <Typography.Text as='span'>{theme.label}</Typography.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 ea61d98..a4f6fe3 100644
--- a/app/components/theme/Selector.tsx
+++ b/app/components/theme/Selector.tsx
@@ -6,6 +6,7 @@ import classNames from 'classnames'
 import { useDarkMode } from 'usehooks-ts'
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
+import { Typography } from '..'
 
 export type ThemeSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -23,9 +24,9 @@ export const ThemeSelector = ({ isOpen, ...props }: ThemeSelectorProps) => {
         'flex cursor-pointer justify-between'
       )}
     >
-      <span className='text-sm'>
+      <Typography.Text as='span'>
         {isDarkMode ? t(Locales.DARK) : t(Locales.LIGHT)}
-      </span>
+      </Typography.Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {
diff --git a/app/components/typography/Heading.tsx b/app/components/typography/Heading.tsx
index 3103fef..69d2863 100644
--- a/app/components/typography/Heading.tsx
+++ b/app/components/typography/Heading.tsx
@@ -3,10 +3,10 @@ import classNames from 'classnames'
 
 export const Variant = {
   h1: {
-    classes: 'text-3xl lg:text-2xl font-extrabold'
+    classes: 'text-3xl lg:text-2xl font-extrabold lg:font-black'
   },
   h2: {
-    classes: 'text-2xl lg:text-xl font-bold'
+    classes: 'text-2xl lg:text-xl font-bold lg:font-extrabold'
   },
   h3: {
     classes: 'text-base lg:text-lg font-medium lg:font-bold'
@@ -19,7 +19,7 @@ export const Variant = {
   }
 } as const
 
-export type HeadingProps = HTMLProps<HTMLDivElement> & {
+export type HeadingProps = HTMLProps<HTMLHeadingElement> & {
   as?: keyof typeof Variant
   variant?: keyof typeof Variant
 }
@@ -28,17 +28,14 @@ export const Heading = ({
   as: Component = 'h1',
   variant,
   children,
+  className,
   ...props
 }: HeadingProps) => {
   return createElement(
     Component,
     {
       ...props,
-      className: classNames(
-        props.className,
-        'text-stone-500 dark:text-cyan-50',
-        Variant[variant ?? Component].classes
-      )
+      className: classNames(className, Variant[variant ?? Component].classes)
     },
     children
   )
diff --git a/app/components/navigation/heading/HeadingNavigation.tsx b/app/components/typography/HeadingNavigation.tsx
similarity index 95%
rename from app/components/navigation/heading/HeadingNavigation.tsx
rename to app/components/typography/HeadingNavigation.tsx
index 9f963a3..5267434 100644
--- a/app/components/navigation/heading/HeadingNavigation.tsx
+++ b/app/components/typography/HeadingNavigation.tsx
@@ -19,7 +19,7 @@ export const HeadingNavigation = ({
         className='cursor-pointer'
         onClick={router.back}
       />
-      <span>{children}</span>
+      {children}
     </Heading>
   )
 }
diff --git a/app/components/typography/Text.tsx b/app/components/typography/Text.tsx
new file mode 100644
index 0000000..e033eaa
--- /dev/null
+++ b/app/components/typography/Text.tsx
@@ -0,0 +1,47 @@
+import { type HTMLProps, createElement } from 'react'
+import classNames from 'classnames'
+
+export const Sizes = {
+  default: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base'
+} as const
+
+export const Variant = {
+  p: {
+    classes: 'font-normal'
+  },
+  span: {
+    classes: 'font-light'
+  }
+} as const
+
+export type TextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
+  as?: keyof typeof Variant
+  size?: keyof typeof Sizes
+  variant?: keyof typeof Variant
+}
+
+export const Text = ({
+  as: Component = 'p',
+  variant = 'p',
+  size = 'default',
+  children,
+  className,
+  ...props
+}: TextProps) => {
+  return createElement(
+    Component,
+    {
+      ...props,
+      className: classNames(
+        className,
+        Variant[Component ?? variant].classes,
+        Sizes[size]
+      )
+    },
+    children
+  )
+}
+
+export default Text
diff --git a/app/components/typography/index.ts b/app/components/typography/index.ts
index 58697c8..c60b240 100644
--- a/app/components/typography/index.ts
+++ b/app/components/typography/index.ts
@@ -1 +1,3 @@
 export { default as Heading } from './Heading'
+export { default as HeadingNavigation } from './HeadingNavigation'
+export { default as Text } from './Text'
diff --git a/app/components/wallet/network/List.tsx b/app/components/wallet/network/List.tsx
index 86a902e..d35608d 100644
--- a/app/components/wallet/network/List.tsx
+++ b/app/components/wallet/network/List.tsx
@@ -6,6 +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 '../..'
 
 type NetworkListProps = HTMLProps<HTMLUListElement> & {
   chain: ChainConfig
@@ -32,7 +33,7 @@ export const NetworkList = ({ chain, chains, ...props }: NetworkListProps) => {
             )}
             onClick={() => switchNetwork && switchNetwork(chainItem.id)}
           >
-            <span>{chainItem.name}</span>
+            <Typography.Text as='span'>{chainItem.name}</Typography.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 29020df..58a99e1 100644
--- a/app/components/wallet/network/Selector.tsx
+++ b/app/components/wallet/network/Selector.tsx
@@ -12,6 +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 '../..'
 
 type NetworkSelectorProps = HTMLProps<HTMLDivElement> & {
   chain: ChainConfig
@@ -41,7 +42,9 @@ export const NetworkSelector = ({
         ) : (
           <NetworkThumbnail src={`/assets/images/chains/${chain.id}.svg`} />
         )}
-        <span>{chain.unsupported ? t(Locales.NOT_ALLOWED) : chain.name}</span>
+        <Typography.Text as='span'>
+          {chain.unsupported ? t(Locales.NOT_ALLOWED) : chain.name}
+        </Typography.Text>
       </div>
       <ChevronDownIcon
         width={18}
diff --git a/app/components/wallet/panel/Container.tsx b/app/components/wallet/panel/Container.tsx
index c100a9d..6e0784b 100644
--- a/app/components/wallet/panel/Container.tsx
+++ b/app/components/wallet/panel/Container.tsx
@@ -36,7 +36,9 @@ export const PanelContainer = ({
         <div className='flex flex-col space-y-1'>
           <Typography.Heading as='h4'>{t(Locales.WALLET)}</Typography.Heading>
           <div className='flex justify-between space-x-4'>
-            <p>{addressUtils.toEllipsis(address!, 8, 6)}</p>
+            <Typography.Text as='span'>
+              {addressUtils.toEllipsis(address!, 8, 6)}
+            </Typography.Text>
             <Square2StackIcon
               onClick={() => copy(address!)}
               width={18}
@@ -51,8 +53,10 @@ export const PanelContainer = ({
         <div className='flex flex-col space-y-1'>
           <Typography.Heading as='h4'>{t(Locales.BALANCE)}</Typography.Heading>
           <div className='flex space-x-2'>
-            <span>{balanceUtils.cropDecimals(balance?.formatted)}</span>
-            <span>{balance?.symbol}</span>
+            <Typography.Text>
+              {balanceUtils.cropDecimals(balance?.formatted)}
+            </Typography.Text>
+            <Typography.Text as='span'>{balance?.symbol}</Typography.Text>
           </div>
         </div>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 171af6a..0edb10a 100755
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,7 +5,7 @@ import { Rubik } from 'next/font/google'
 
 const font = Rubik({
   subsets: ['latin'],
-  weight: ['400'],
+  weight: ['300', '400', '700', '800'],
   preload: true
 })