diff --git a/example/src/pages/LandingPage.jsx b/example/src/pages/LandingPage.jsx
index 54e407b7..c6025273 100644
--- a/example/src/pages/LandingPage.jsx
+++ b/example/src/pages/LandingPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Typography, HeaderTongue, nameServiceImg, storageImg } from '@rsksmart/rif-ui';
+import { HeaderTongue, nameServiceImg, storageImg } from '@rsksmart/rif-ui';
+import Typography from '@material-ui/core/Typography'
 import { Grid, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/package.json b/package.json
index 060624a7..e95a858d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rsksmart/rif-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Exposes common components to be re used in RIF projects",
   "keywords": [
     "RIF",
diff --git a/src/components/atoms/Typography.tsx b/src/components/atoms/Typography.tsx
deleted file mode 100644
index 19f047a4..00000000
--- a/src/components/atoms/Typography.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { FC } from 'react'
-import {
-  Typography as MUITypography,
-  TypographyProps as MUITypographyProps,
-} from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import { fonts } from '../../theme'
-
-export interface TypographyProps extends MUITypographyProps {
-  weight?: 'normal' | 'lightBold' | 'bold' | 'superBold'
-}
-
-const useStyles = makeStyles(() => ({
-  normal: {
-    fontWeight: fonts.weight.normal,
-  },
-  lightBold: {
-    fontWeight: fonts.weight.lightBold,
-  },
-  bold: {
-    fontWeight: fonts.weight.bold,
-  },
-  superBold: {
-    fontWeight: fonts.weight.superBold,
-  },
-}))
-
-const Typography: FC<TypographyProps> = ({
-  weight = 'normal', className = '', children, ...rest
-}) => {
-  const classes = useStyles()
-
-  return (
-    <MUITypography className={`${classes[weight]} ${className}`.trim()} {...rest}>
-      {children}
-    </MUITypography>
-  )
-}
-
-export default Typography
diff --git a/src/components/atoms/atoms.test.tsx b/src/components/atoms/atoms.test.tsx
index 19d241ef..c4417756 100644
--- a/src/components/atoms/atoms.test.tsx
+++ b/src/components/atoms/atoms.test.tsx
@@ -1,5 +1,5 @@
 import {
-  Button, Checkbox, LoginOption, Logo, LogoNavbar, Typography,
+  Button, Checkbox, LoginOption, Logo, LogoNavbar,
 } from '.'
 
 describe('Button component sanity', () => {
@@ -31,9 +31,3 @@ describe('LogoNavbar component sanity', () => {
     expect(LogoNavbar).toBeTruthy()
   })
 })
-
-describe('Typography component sanity', () => {
-  it('is truthy', () => {
-    expect(Typography).toBeTruthy()
-  })
-})
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index bfe4c152..dddad7ca 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -5,7 +5,6 @@ import Logo from './Logo'
 import LogoNavbar from './LogoNavbar'
 import StyledNavTab from './StyledNavTab'
 import NetworkIndicator from './NetworkIndicator'
-import Typography from './Typography'
 
 export * from './modal'
 
@@ -17,5 +16,4 @@ export {
   LogoNavbar,
   StyledNavTab,
   NetworkIndicator,
-  Typography,
 }
diff --git a/src/components/atoms/modal/ModalTitle.tsx b/src/components/atoms/modal/ModalTitle.tsx
index 25313c49..d080c672 100644
--- a/src/components/atoms/modal/ModalTitle.tsx
+++ b/src/components/atoms/modal/ModalTitle.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Typography from '../Typography'
+import Typography from '@material-ui/core/Typography'
 
 export interface ModalTitleProps {
   className?: string
diff --git a/src/components/molecules/Accordion.tsx b/src/components/molecules/Accordion.tsx
index ac907322..e5673f5c 100644
--- a/src/components/molecules/Accordion.tsx
+++ b/src/components/molecules/Accordion.tsx
@@ -1,10 +1,10 @@
 import React, { FC, useState } from 'react'
 import { Accordion as MUIAccordion, AccordionProps as MUIAccordionProps } from '@material-ui/core'
+import Typography from '@material-ui/core/Typography'
 import AccordionDetails from '@material-ui/core/AccordionDetails'
 import AccordionSummary from '@material-ui/core/AccordionSummary'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import { Typography } from '../atoms'
 import { colors } from '../../theme'
 
 interface AccordionProps extends MUIAccordionProps {
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
   heading: {
     color: colors.gray4,
     fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightBold,
+    fontWeight: theme.typography.fontWeightRegular,
     width: '100%',
   },
   accordionSummary: {
diff --git a/src/components/molecules/CopyTextTooltip.tsx b/src/components/molecules/CopyTextTooltip.tsx
index e3fa5691..c10d6ae3 100644
--- a/src/components/molecules/CopyTextTooltip.tsx
+++ b/src/components/molecules/CopyTextTooltip.tsx
@@ -1,7 +1,8 @@
 import React, { FC, useState } from 'react'
 import Tooltip from '@material-ui/core/Tooltip'
-import { Typography, makeStyles } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
 import FileCopyIcon from '@material-ui/icons/FileCopy'
+import Typography from '@material-ui/core/Typography'
 
 export interface CopyTextTooltipProps {
   displayElement: React.ReactElement
diff --git a/src/components/molecules/FAQSection.tsx b/src/components/molecules/FAQSection.tsx
index f7aafcbe..259862fb 100644
--- a/src/components/molecules/FAQSection.tsx
+++ b/src/components/molecules/FAQSection.tsx
@@ -1,9 +1,11 @@
 import React, { FC, useState } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Accordion, AccordionDetails, AccordionSummary } from '@material-ui/core'
+import Accordion from '@material-ui/core/Accordion'
+import AccordionDetails from '@material-ui/core/AccordionDetails'
+import AccordionSummary from '@material-ui/core/AccordionSummary'
+import Typography from '@material-ui/core/Typography'
 import AddIcon from '@material-ui/icons/Add'
 import RemoveIcon from '@material-ui/icons/Remove'
-import { Typography } from '../atoms'
 import { colors, fonts } from '../../theme'
 
 export interface FAQSectionProps {
@@ -30,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: colors.primary,
   },
   headingCollapsed: {
-    fontWeight: fonts.weight.lightBold,
+    fontWeight: fonts.weight.regular,
   },
   panelDetails: {
     display: 'flex',
diff --git a/src/components/molecules/FilterCheckboxCard.tsx b/src/components/molecules/FilterCheckboxCard.tsx
index 6085f505..9e940488 100644
--- a/src/components/molecules/FilterCheckboxCard.tsx
+++ b/src/components/molecules/FilterCheckboxCard.tsx
@@ -4,7 +4,7 @@ import LabeledCheckbox, { LabeledCheckboxProps } from './LabeledCheckbox'
 export interface FilterCheckboxCardProps {
   className?: string
   items: LabeledCheckboxProps[]
-  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
 }
 
 const FilterCheckboxCard: FC<FilterCheckboxCardProps> = ({ className = '', onClick, items }) => (
diff --git a/src/components/molecules/FooterColumn.tsx b/src/components/molecules/FooterColumn.tsx
index 4ef4ed31..5da59b5f 100644
--- a/src/components/molecules/FooterColumn.tsx
+++ b/src/components/molecules/FooterColumn.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { NavLinkProps, NavLink } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts } from '../../theme'
 import { removeEmptySpaces } from '../../utils'
 
@@ -24,10 +24,10 @@ const useStyles = makeStyles(() => ({
   },
   footerLink: {
     color: colors.gray4,
-    fontWeight: fonts.weight.normal,
+    fontWeight: fonts.weight.light,
     textDecoration: 'none',
     '&:hover': {
-      fontWeight: fonts.weight.lightBold,
+      fontWeight: fonts.weight.regular,
     },
   },
   footerTitle: {
diff --git a/src/components/molecules/RangeSliderWithInputs.tsx b/src/components/molecules/RangeSliderWithInputs.tsx
index cbbf8d4d..9f6fe0ff 100644
--- a/src/components/molecules/RangeSliderWithInputs.tsx
+++ b/src/components/molecules/RangeSliderWithInputs.tsx
@@ -1,9 +1,10 @@
 import Slider, { SliderProps } from '@material-ui/core/Slider'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { FC } from 'react'
+import Typography from '@material-ui/core/Typography'
 import UnitsInput from './UnitsInput'
-import { Typography } from '../atoms'
 import { validatedNumber } from '../../utils'
+import { fonts } from '../../theme'
 
 export interface RangeSliderWithInputsProps extends SliderProps {
   values: {
@@ -30,6 +31,7 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     justifyContent: 'center',
     width: '100%',
+    fontWeight: fonts.weight.regular,
   },
 }))
 
@@ -101,7 +103,7 @@ const RangeSliderWithInputs: FC<RangeSliderWithInputsProps> = ({
           {...getCommonInputValues()}
           value={startValue}
         />
-        <Typography className={classes.toContainer} weight="bold">
+        <Typography className={classes.toContainer}>
           to
         </Typography>
         <UnitsInput
diff --git a/src/components/molecules/SwitchTabs.tsx b/src/components/molecules/SwitchTabs.tsx
index f3fa81be..17a6b3af 100644
--- a/src/components/molecules/SwitchTabs.tsx
+++ b/src/components/molecules/SwitchTabs.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles(() => ({
     },
     borderRadius: 50,
     color: colors.gray3,
-    fontWeight: fonts.weight.normal,
+    fontWeight: fonts.weight.light,
     maxWidth: '50%',
     minHeight: '100%',
     minWidth: '50%',
diff --git a/src/components/molecules/UnitsInput.tsx b/src/components/molecules/UnitsInput.tsx
index 88e24112..9326d4ee 100644
--- a/src/components/molecules/UnitsInput.tsx
+++ b/src/components/molecules/UnitsInput.tsx
@@ -1,9 +1,8 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Grid, Input, InputProps } from '@material-ui/core'
-import {
-  Typography,
-} from '../atoms'
+import Input, { InputProps } from '@material-ui/core/Input'
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts } from '../../theme'
 
 export interface UnitsInputProps extends InputProps {
diff --git a/src/components/organisms/Account.tsx b/src/components/organisms/Account.tsx
index ea704e71..a1994602 100644
--- a/src/components/organisms/Account.tsx
+++ b/src/components/organisms/Account.tsx
@@ -2,9 +2,10 @@ import React, { FC, useState, useEffect } from 'react'
 import Web3 from 'web3'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import Popover from '@material-ui/core/Popover'
+import Typography from '@material-ui/core/Typography'
 import ProviderInfo, { EProvider } from '../../models/ProviderInfo'
 import { shortenString } from '../../utils'
-import { Button, NetworkIndicator, Typography } from '../atoms'
+import { Button, NetworkIndicator } from '../atoms'
 import { colors, fonts } from '../../theme'
 import { AccountModal, WrongNetworkModal } from '../molecules'
 import ConnectionStatus from '../../models/Enums'
diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx
index 7e486e32..8ce49db8 100644
--- a/src/components/organisms/Footer.tsx
+++ b/src/components/organisms/Footer.tsx
@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react'
 import { Grid } from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import FooterColumn, { FooterColumnProps } from '../molecules/FooterColumn'
 import { colors, fonts } from '../../theme'
 import { logoBlackAndBlue } from '../../assets/images'
diff --git a/src/components/organisms/Header/HeaderDesktop.tsx b/src/components/organisms/Header/HeaderDesktop.tsx
index de9ae145..9c6bd927 100644
--- a/src/components/organisms/Header/HeaderDesktop.tsx
+++ b/src/components/organisms/Header/HeaderDesktop.tsx
@@ -2,7 +2,8 @@ import React, { FC } from 'react'
 import { AppBar, Toolbar } from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import { NavLink } from 'react-router-dom'
-import { LogoNavbar, Typography } from '../../atoms'
+import Typography from '@material-ui/core/Typography'
+import { LogoNavbar } from '../../atoms'
 import { colors, fonts, globalConstants } from '../../../theme'
 import { HeaderProps, HeaderItemProps } from './HeaderProps'
 import { removeEmptySpaces } from '../../../utils'
@@ -10,7 +11,7 @@ import { removeEmptySpaces } from '../../../utils'
 const useStyles = makeStyles((theme: Theme) => ({
   activeNavlink: {
     color: `${colors.white} !important`,
-    fontWeight: fonts.weight.lightBold,
+    fontWeight: fonts.weight.medium,
   },
   itemsContainer: {
     display: 'flex',
diff --git a/src/components/organisms/Header/HeaderTongue.tsx b/src/components/organisms/Header/HeaderTongue.tsx
index df89d656..dd31f669 100644
--- a/src/components/organisms/Header/HeaderTongue.tsx
+++ b/src/components/organisms/Header/HeaderTongue.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Typography } from '../../atoms'
-import { colors } from '../../../theme'
+import Typography from '@material-ui/core/Typography'
+import { colors, fonts } from '../../../theme'
 import { headerTongueImg } from '../../../assets/images'
 
 export interface HeaderTongueProps {
@@ -36,6 +36,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   titleContent: {
     marginBottom: theme.spacing(1),
     fontSize: theme.spacing(5),
+    fontWeight: fonts.weight.regular,
   },
   tongueImg: {
     width: '100%',
@@ -54,7 +55,6 @@ const HeaderTongue: FC<HeaderTongueProps> = (
           <Typography
             className={classes.titleContent}
             variant="h3"
-            weight="lightBold"
           >
             {titleLine1}
             <br />
diff --git a/src/components/templates/FAQPageTemplate.tsx b/src/components/templates/FAQPageTemplate.tsx
index c33abe76..ac36cf9e 100644
--- a/src/components/templates/FAQPageTemplate.tsx
+++ b/src/components/templates/FAQPageTemplate.tsx
@@ -1,8 +1,8 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
 import FAQSection, { FAQSectionProps } from '../molecules/FAQSection'
 import { colors } from '../../theme'
-import { Typography } from '../atoms'
 import { removeEmptySpaces } from '../../utils'
 
 export interface FAQPageTemplateProps {
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index ccab9040..83d37c28 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -26,10 +26,10 @@ export const fonts = {
     subtitleBig: 22,
   },
   weight: {
-    normal: 300,
-    lightBold: 500,
+    light: 300,
+    regular: 400,
+    medium: 500,
     bold: 700,
-    superBold: 900,
   },
 }
 
@@ -51,14 +51,19 @@ const theme = createMuiTheme({
     button: {
       textTransform: 'none',
     },
-    fontWeightRegular: fonts.weight.normal,
-  },
-  props: {
+    fontWeightLight: fonts.weight.light,
+    fontWeightRegular: fonts.weight.regular,
+    fontWeightMedium: fonts.weight.medium,
+    fontWeightBold: fonts.weight.bold,
+    body1: {
+      fontWeight: fonts.weight.light,
+    },
   },
+  props: {},
   overrides: {
     MuiButton: {
       root: {
-        fontWeight: fonts.weight.normal,
+        fontWeight: fonts.weight.light,
       },
     },
     MuiFormControlLabel: {