diff --git a/src/actions/createCall.tsx b/src/actions/createCall.tsx
index a231fae2..cc890348 100644
--- a/src/actions/createCall.tsx
+++ b/src/actions/createCall.tsx
@@ -1,4 +1,4 @@
-import { functions } from '../firebase/firebase'
+import { functions } from 'src/firebase/firebase'
 
 export const createCall = async (values) => {
     try {
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 7e1855ec..c76e600b 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,18 +1,18 @@
 import React, { useEffect } from 'react'
 import './App.scss'
-import { gdprHandler } from '../../utils/gdpr'
+import { gdprHandler } from 'src/utils/gdpr'
 import Router from './router'
 import { IonApp, IonHeader } from '@ionic/react'
-import SwipeableTemporaryDrawer from '../SwipeableTemporaryDrawer/SwipeableTemporaryDrawer'
+import SwipeableTemporaryDrawer from 'src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer'
 import { Navbar } from 'react-bootstrap'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 import styled from 'styled-components'
 import { IonReactRouter } from '@ionic/react-router'
 
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
-import rootReducer from '../../reducers'
+import rootReducer from 'src/reducers'
 import { composeWithDevTools } from 'redux-devtools-extension'
 
 const store = createStore(
diff --git a/src/components/App/router.tsx b/src/components/App/router.tsx
index d271b1c4..df370154 100644
--- a/src/components/App/router.tsx
+++ b/src/components/App/router.tsx
@@ -9,9 +9,9 @@ import {
     MediaNews,
     NotFound,
     JoinVideoCall,
-} from '../../pages'
+} from 'src/pages'
 
-import VideoCallPrecheck from '../../pages/VideoCall/VideoCallPrecheck'
+import VideoCallPrecheck from 'src/pages/VideoCall/VideoCallPrecheck'
 import { useTranslation } from 'react-i18next'
 import { Route } from 'react-router-dom'
 import { IonRouterOutlet } from '@ionic/react'
diff --git a/src/components/BlogArticle/BlogArticle.tsx b/src/components/BlogArticle/BlogArticle.tsx
index 7a7a7643..1b604f67 100644
--- a/src/components/BlogArticle/BlogArticle.tsx
+++ b/src/components/BlogArticle/BlogArticle.tsx
@@ -5,7 +5,7 @@ import ReactMarkdown from 'react-remarkable'
 import { useTranslation } from 'react-i18next'
 import { truncate } from 'lodash'
 
-import useDocumentTitle from '../../hooks/useDocumentTitle'
+import useDocumentTitle from 'src/hooks/useDocumentTitle'
 import BlogArticleStyled from './BlogArticleStyled'
 import blog from '../../data/js/blog'
 
diff --git a/src/components/BlogArticle/BlogArticleStyled.tsx b/src/components/BlogArticle/BlogArticleStyled.tsx
index ac340359..1f33e4f2 100644
--- a/src/components/BlogArticle/BlogArticleStyled.tsx
+++ b/src/components/BlogArticle/BlogArticleStyled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const BlogArticleStyled = styled.div`
     p img, p > img {
diff --git a/src/components/Country/Country.tsx b/src/components/Country/Country.tsx
index 05ca2f34..d4492d06 100644
--- a/src/components/Country/Country.tsx
+++ b/src/components/Country/Country.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import { FormControl } from 'react-bootstrap'
 import styled from 'styled-components'
 import getCountries from './countries'
-import Flag from '../Flag/Flag'
-import BaseArrow from '../Arrow/Arrow'
-import { BaseArrowProps } from '../Arrow/Arrow'
+import Flag from 'src/components/Flag/Flag'
+import BaseArrow from 'src/components/Arrow/Arrow'
+import { BaseArrowProps } from 'src/components/Arrow/Arrow'
 
 const Wrapper = styled.div`
     display: flex;
diff --git a/src/components/Country/countries.tsx b/src/components/Country/countries.tsx
index 166bb7b1..9253309d 100644
--- a/src/components/Country/countries.tsx
+++ b/src/components/Country/countries.tsx
@@ -1,5 +1,5 @@
 import isoCountries from 'i18n-iso-countries'
-import i18n from '../../i18n/i18n'
+import i18n from 'src/i18n/i18n'
 
 export default function getCountries() {
     const { language, options } = i18n
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 5ecaeef0..79e97c17 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import About from '../../documents/Instant_Visio_Keynote.pdf'
+import About from 'src/documents/Instant_Visio_Keynote.pdf'
 import FooterStyled from './FooterStyled'
-import { showPreferencesDialog } from '../../utils/gdpr'
-import NewsletterModal from '../../pages/Newsletter/NewsletterModal'
+import { showPreferencesDialog } from 'src/utils/gdpr'
+import NewsletterModal from 'src/pages/Newsletter/NewsletterModal'
 
 const Footer = () => {
     const { t } = useTranslation()
diff --git a/src/components/Footer/FooterStyled.tsx b/src/components/Footer/FooterStyled.tsx
index daf2d690..653d46ea 100644
--- a/src/components/Footer/FooterStyled.tsx
+++ b/src/components/Footer/FooterStyled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const FooterStyled = styled.footer`
     background: #222222;
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index c517d964..29000326 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -8,7 +8,7 @@ import Field from './Field'
 import CallError, { Error } from './CallError'
 import { triggerValidation, format } from './validation'
 import PhoneField from './PhoneField'
-import { getLocale } from '../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const BootstrapForm = styled(BaseForm)`
     width: 100%;
diff --git a/src/components/Form/PhoneField.tsx b/src/components/Form/PhoneField.tsx
index c69a2c4f..a5edad7a 100644
--- a/src/components/Form/PhoneField.tsx
+++ b/src/components/Form/PhoneField.tsx
@@ -2,10 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
-import Country from '../Country/Country'
+import Country from 'src/components/Country/Country'
 import Field from './Field'
 import { useField } from 'formik'
-import { getLocale } from '../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const Wrapper = styled.div`
     & .input-group-prepend {
diff --git a/src/components/FormMobile/FormMobile.tsx b/src/components/FormMobile/FormMobile.tsx
index 12448952..c3b34201 100644
--- a/src/components/FormMobile/FormMobile.tsx
+++ b/src/components/FormMobile/FormMobile.tsx
@@ -5,11 +5,11 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import Field from '../Form/Field'
-import CallError from '../Form/CallError'
-import { triggerValidation, format } from '../Form/validation'
-import PhoneField from '../Form/PhoneField'
-import { getLocale } from '../../i18n/helper'
+import Field from 'src/components/Form/Field'
+import CallError from 'src/components/Form/CallError'
+import { triggerValidation, format } from 'src/components/Form/validation'
+import PhoneField from 'src/components/Form/PhoneField'
+import { getLocale } from 'src/i18n/helper'
 
 const BootstrapForm = styled(BaseForm)`
     width: 100%;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b31e2732..260bc5e4 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -3,8 +3,8 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import { Container } from 'react-bootstrap'
 import { HeaderStyled, HeaderLogoBaseline } from './HeaderStyled'
 import { useTranslation } from 'react-i18next'
-import Logo from '../Logo/Logo'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import Logo from 'src/components/Logo/Logo'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 const Header = () => {
     const { t } = useTranslation()
diff --git a/src/components/Header/HeaderStyled.tsx b/src/components/Header/HeaderStyled.tsx
index 110b2790..dbd2eaf4 100644
--- a/src/components/Header/HeaderStyled.tsx
+++ b/src/components/Header/HeaderStyled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 export const HeaderStyled = styled.header`
     background-color: ${({ theme }) => theme.color.white};
diff --git a/src/components/Lang/Lang.tsx b/src/components/Lang/Lang.tsx
index 8c0d3b17..cc9fbc48 100644
--- a/src/components/Lang/Lang.tsx
+++ b/src/components/Lang/Lang.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 //todo get from firebase
 import config from './config.json'
-import { getLocale } from '../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const Wrapper = styled.div`
     & .btn {
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 545f8242..cc738604 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import BaseListItem from './ListItem'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const ListItem = styled(BaseListItem)``
 
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index e82eba74..44b66df8 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { authInstance, firebaseAuth } from '../firebase/firebase'
+import { authInstance, firebaseAuth } from 'src/firebase/firebase'
 import { StyledFirebaseAuth } from 'react-firebaseui'
 import { Button } from 'react-bootstrap'
 
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 7518909a..7872053c 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import homeLogo from '../../styles/assets/images/homeLogo.svg'
-import logo from '../../styles/assets/images/logo.svg'
-import logoMobile from '../../styles/assets/images/logo_mobile.svg'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import homeLogo from 'src/styles/assets/images/homeLogo.svg'
+import logo from 'src/styles/assets/images/logo.svg'
+import logoMobile from 'src/styles/assets/images/logo_mobile.svg'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 function Logo() {
     const { t } = useTranslation()
diff --git a/src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer.tsx b/src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer.tsx
index 92c2b5d3..f74eb970 100644
--- a/src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer.tsx
+++ b/src/components/SwipeableTemporaryDrawer/SwipeableTemporaryDrawer.tsx
@@ -7,7 +7,7 @@ import Divider from '@material-ui/core/Divider'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
-import Logo from '../Logo/Logo'
+import Logo from 'src/components/Logo/Logo'
 import { useTranslation } from 'react-i18next'
 
 import styled from 'styled-components'
diff --git a/src/firebase/firebase.tsx b/src/firebase/firebase.tsx
index d9a2319a..d2812465 100644
--- a/src/firebase/firebase.tsx
+++ b/src/firebase/firebase.tsx
@@ -17,6 +17,7 @@ const firebaseInstance = firebase.initializeApp(firebaseConfig)
 export const firebaseAuth = firebase.auth
 export const authInstance = firebaseInstance.auth()
 export const remoteConfig = firebase.remoteConfig()
+
 remoteConfig.settings = {
     minimumFetchIntervalMillis: 3600000,
     fetchTimeoutMillis: 60000, // default value used here: https://firebase.google.com/docs/reference/js/firebase.remoteconfig.Settings#fetchtimeoutmillis
diff --git a/src/hooks/useCameraMicrophonePermission.tsx b/src/hooks/useCameraMicrophonePermission.tsx
index 227668a9..cb6c70a2 100644
--- a/src/hooks/useCameraMicrophonePermission.tsx
+++ b/src/hooks/useCameraMicrophonePermission.tsx
@@ -3,7 +3,7 @@ import {
     STATE_DENIED,
     STATE_GRANTED,
     STATE_WAITING,
-} from '../pages/VideoCall/permissions/PermissionConstants'
+} from 'src/pages/VideoCall/permissions/PermissionConstants'
 
 export default function useCameraMicrophonePermission(name) {
     const [result, setResult] = React.useState(STATE_WAITING)
diff --git a/src/hooks/useCookiePermission.tsx b/src/hooks/useCookiePermission.tsx
index c4c2ea76..cb993f49 100644
--- a/src/hooks/useCookiePermission.tsx
+++ b/src/hooks/useCookiePermission.tsx
@@ -4,7 +4,7 @@ import {
     STATE_DENIED,
     STATE_GRANTED,
     STATE_WAITING,
-} from '../pages/VideoCall/permissions/PermissionConstants'
+} from 'src/pages/VideoCall/permissions/PermissionConstants'
 
 export default function useCookiePermission() {
     const [result, setResult] = useState(STATE_WAITING)
diff --git a/src/layout/Columns/Columns.tsx b/src/layout/Columns/Columns.tsx
index 4673c7ad..bb2aeea3 100644
--- a/src/layout/Columns/Columns.tsx
+++ b/src/layout/Columns/Columns.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import useDocumentTitle from '../../hooks/useDocumentTitle'
-import { SCREEN } from '../../styles/theme'
-import Footer from '../../components/Footer/Footer'
-import BaseLang from '../../components/Lang/Lang'
+import useDocumentTitle from 'src/hooks/useDocumentTitle'
+import { SCREEN } from 'src/styles/theme'
+import Footer from 'src/components/Footer/Footer'
+import BaseLang from 'src/components/Lang/Lang'
 
 const Lang = styled(BaseLang)`
     position: absolute;
diff --git a/src/layout/Default/Default.tsx b/src/layout/Default/Default.tsx
index c583d559..ba2f8fdc 100644
--- a/src/layout/Default/Default.tsx
+++ b/src/layout/Default/Default.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
-import useDocumentTitle from '../../hooks/useDocumentTitle'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
-import Header from '../../components/Header/Header'
-import Footer from '../../components/Footer/Footer'
-import BaseLang from '../../components/Lang/Lang'
+import { SCREEN } from 'src/styles/theme'
+import useDocumentTitle from 'src/hooks/useDocumentTitle'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
+import Header from 'src/components/Header/Header'
+import Footer from 'src/components/Footer/Footer'
+import BaseLang from 'src/components/Lang/Lang'
 
 const Lang = styled(BaseLang)`
     position: absolute;
diff --git a/src/pages/Blog/Blog.tsx b/src/pages/Blog/Blog.tsx
index c4cb77bd..8d8e2a82 100644
--- a/src/pages/Blog/Blog.tsx
+++ b/src/pages/Blog/Blog.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import DefaultLayout from '../../layout/Default/Default'
-import BlogArticle from '../../components/BlogArticle/BlogArticle'
+import DefaultLayout from 'src/layout/Default/Default'
+import BlogArticle from 'src/components/BlogArticle/BlogArticle'
 import { IonContent } from '@ionic/react'
 
 const Blog = () => {
diff --git a/src/pages/Credits/Credits.tsx b/src/pages/Credits/Credits.tsx
index 5d091e57..2c3f98a0 100644
--- a/src/pages/Credits/Credits.tsx
+++ b/src/pages/Credits/Credits.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 import CreditsStyled from './CreditsStyled'
 import data from './data.json'
 import { IonContent } from '@ionic/react'
diff --git a/src/pages/Credits/CreditsStyled.tsx b/src/pages/Credits/CreditsStyled.tsx
index 29f12494..48619417 100644
--- a/src/pages/Credits/CreditsStyled.tsx
+++ b/src/pages/Credits/CreditsStyled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 const CreditsStyled = styled.div`
     display: flex;
diff --git a/src/pages/Home/Description.tsx b/src/pages/Home/Description.tsx
index 5efe35b1..9b4381d4 100644
--- a/src/pages/Home/Description.tsx
+++ b/src/pages/Home/Description.tsx
@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 import styled, { css } from 'styled-components'
 import color from 'color'
 import { useTranslation, Trans } from 'react-i18next'
-import { SCREEN } from '../../styles/theme'
-import BaseList from '../../components/List/List'
-import Logo from '../../components/Logo/Logo'
-import BaseArrow, { BaseArrowProps } from '../../components/Arrow/Arrow'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import { SCREEN } from 'src/styles/theme'
+import BaseList from 'src/components/List/List'
+import Logo from 'src/components/Logo/Logo'
+import BaseArrow, { BaseArrowProps } from 'src/components/Arrow/Arrow'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 interface Collapsable {
     collapsed: boolean
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 49128116..af3f0339 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -2,22 +2,22 @@ import React, { useState, useRef } from 'react'
 import styled from 'styled-components'
 import { Link, Route } from 'react-router-dom'
 import { useTranslation, Trans } from 'react-i18next'
-import ColumnsLayout from '../../layout/Columns/Columns'
+import ColumnsLayout from 'src/layout/Columns/Columns'
 import { createCall } from '../../actions/createCall'
-import FormMobile from '../../components/FormMobile/FormMobile'
-import Form from '../../components/Form/Form'
-import VerticallyCenteredModal from '../../components/VerticallyCenteredModal/VerticallyCenteredModal'
+import FormMobile from 'src/components/FormMobile/FormMobile'
+import Form from 'src/components/Form/Form'
+import VerticallyCenteredModal from 'src/components/VerticallyCenteredModal/VerticallyCenteredModal'
 import Description from './Description'
 import {
     setNewCall,
     setNewCallError,
     setNewCallRedirected,
-} from '../../utils/support'
-import Logo from '../../components/Logo/Logo'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+} from 'src/utils/support'
+import Logo from 'src/components//Logo/Logo'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 import { IonContent } from '@ionic/react'
-import * as LocalStorage from '../../services/local-storage'
-import Login from '../../components/Login'
+import * as LocalStorage from 'src/services/local-storage'
+import Login from 'src/components/Login'
 
 const DataMentions = styled.div`
     .cnil {
diff --git a/src/pages/JoinVideoCall/JoinVideoCall.tsx b/src/pages/JoinVideoCall/JoinVideoCall.tsx
index 5cb851b8..7b540174 100644
--- a/src/pages/JoinVideoCall/JoinVideoCall.tsx
+++ b/src/pages/JoinVideoCall/JoinVideoCall.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 import { IonContent } from '@ionic/react'
 import { Redirect, Link } from 'react-router-dom'
-import * as LocalStorage from '../../services/local-storage'
+import * as LocalStorage from 'src/services/local-storage'
 import styled from 'styled-components'
 
 const CenteredText = styled.div`
diff --git a/src/pages/LegalMentions/LegalMentions.tsx b/src/pages/LegalMentions/LegalMentions.tsx
index 92ef4b53..25236a57 100644
--- a/src/pages/LegalMentions/LegalMentions.tsx
+++ b/src/pages/LegalMentions/LegalMentions.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-remarkable'
 import styled from 'styled-components'
-import DefaultLayout from '../../layout/Default/Default'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import DefaultLayout from 'src/layout/Default/Default'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 import { IonContent } from '@ionic/react'
 const MarkdownContainer = styled.div`
     h2 {
diff --git a/src/pages/MediaNews/MediaNews.tsx b/src/pages/MediaNews/MediaNews.tsx
index 32c74f8b..d30d1001 100644
--- a/src/pages/MediaNews/MediaNews.tsx
+++ b/src/pages/MediaNews/MediaNews.tsx
@@ -3,7 +3,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import { MediaNewsTitle, MediaNewsStyled } from './MediaNewsStyled'
 import data from './data'
 
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 
 const MediaNews = () => {
     const { t } = useTranslation('media')
diff --git a/src/pages/MediaNews/MediaNewsStyled.tsx b/src/pages/MediaNews/MediaNewsStyled.tsx
index bee395a7..78770d71 100644
--- a/src/pages/MediaNews/MediaNewsStyled.tsx
+++ b/src/pages/MediaNews/MediaNewsStyled.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 export const MediaNewsTitle = styled.h2`
     display: flex;
diff --git a/src/pages/MediaNews/data.tsx b/src/pages/MediaNews/data.tsx
index 80579cf2..89178c65 100644
--- a/src/pages/MediaNews/data.tsx
+++ b/src/pages/MediaNews/data.tsx
@@ -1,12 +1,12 @@
-import VingtMinutes from '../../styles/assets/images/media/20Minutes.jpg'
-import LesEchosStart from '../../styles/assets/images/media/LesEchosStart.jpg'
-import Maddyness from '../../styles/assets/images/media/Maddyness.jpg'
-import JCM from '../../styles/assets/images/media/JCM.jpg'
-import ticsante from '../../styles/assets/images/media/ticsante.jpg'
-import MarcheDesSeniors from '../../styles/assets/images/media/MarcheDesSeniors.jpg'
-import MedtechStrasbourg from '../../styles/assets/images/media/MedtechStrasbourg.jpg'
-import Caducee from '../../styles/assets/images/media/Caducee.jpg'
-import Makery from '../../styles/assets/images/media/Makery.jpg'
+import VingtMinutes from 'src/styles/assets/images/media/20Minutes.jpg'
+import LesEchosStart from 'src/styles/assets/images/media/LesEchosStart.jpg'
+import Maddyness from 'src/styles/assets/images/media/Maddyness.jpg'
+import JCM from 'src/styles/assets/images/media/JCM.jpg'
+import ticsante from 'src/styles/assets/images/media/ticsante.jpg'
+import MarcheDesSeniors from 'src/styles/assets/images/media/MarcheDesSeniors.jpg'
+import MedtechStrasbourg from 'src/styles/assets/images/media/MedtechStrasbourg.jpg'
+import Caducee from 'src/styles/assets/images/media/Caducee.jpg'
+import Makery from 'src/styles/assets/images/media/Makery.jpg'
 export default [
     {
         id: 1,
diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx
index d84cc4dd..47134276 100644
--- a/src/pages/NotFound/NotFound.tsx
+++ b/src/pages/NotFound/NotFound.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 import { Link } from 'react-router-dom'
 import { IonContent } from '@ionic/react'
 
diff --git a/src/pages/PersonalData/PersonalData.tsx b/src/pages/PersonalData/PersonalData.tsx
index c68d47d3..8386014d 100644
--- a/src/pages/PersonalData/PersonalData.tsx
+++ b/src/pages/PersonalData/PersonalData.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-remarkable'
 
-import DefaultLayout from '../../layout/Default/Default'
+import DefaultLayout from 'src/layout/Default/Default'
 import { IonContent } from '@ionic/react'
 
 const PersonalData = () => {
diff --git a/src/pages/VideoCall/Controls.tsx b/src/pages/VideoCall/Controls.tsx
index 563b03ea..aafb126a 100644
--- a/src/pages/VideoCall/Controls.tsx
+++ b/src/pages/VideoCall/Controls.tsx
@@ -9,7 +9,7 @@ import {
     mdiVideo,
     mdiVideoOff,
 } from '@mdi/js'
-import { toggleSupport } from '../../utils/support'
+import { toggleSupport } from 'src/utils/support'
 import { ControlsContainer } from './VideoCallComponents'
 import { useTranslation } from 'react-i18next'
 
diff --git a/src/pages/VideoCall/ErrorDialog.tsx b/src/pages/VideoCall/ErrorDialog.tsx
index 12a3ca8f..18bfb0b7 100644
--- a/src/pages/VideoCall/ErrorDialog.tsx
+++ b/src/pages/VideoCall/ErrorDialog.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Dialog from '../../components/Dialog/Dialog'
+import Dialog from 'src/components/Dialog/Dialog'
 import { useTranslation } from 'react-i18next'
 
 const ErrorDialog = ({ error, onHide }) => {
diff --git a/src/pages/VideoCall/VideoCall.tsx b/src/pages/VideoCall/VideoCall.tsx
index c52e8820..b688f843 100644
--- a/src/pages/VideoCall/VideoCall.tsx
+++ b/src/pages/VideoCall/VideoCall.tsx
@@ -4,15 +4,15 @@ import DailyIframe from '@daily-co/daily-js'
 import { useTranslation } from 'react-i18next'
 import dailyCssText from './dailyCssText'
 import { CallContainer } from './VideoCallComponents'
-import Fullscreen from '../../components/Fullscreen/Fullscreen'
+import Fullscreen from 'src/components/Fullscreen/Fullscreen'
 import sendCallLogs from '../../actions/sendCallLogs'
-import Footer from '../../components/Footer/Footer'
-import { hideSupport, setVideoCallExited } from '../../utils/support'
+import Footer from 'src/components/Footer/Footer'
+import { hideSupport, setVideoCallExited } from 'src/utils/support'
 import Controls from './Controls'
 import VideoCallFrame from './VideoCallFrame'
-import { stringHash } from '../../utils/string'
+import { stringHash } from 'src/utils/string'
 import ErrorDialog from './ErrorDialog'
-import useDetectMobileOrTablet from '../../hooks/useDetectMobileOrTablet'
+import useDetectMobileOrTablet from 'src/hooks/useDetectMobileOrTablet'
 
 // TODO Refactor: use a single Error interface
 interface Error {
diff --git a/src/pages/VideoCall/VideoCallComponents.tsx b/src/pages/VideoCall/VideoCallComponents.tsx
index 1c42763c..c3295d25 100644
--- a/src/pages/VideoCall/VideoCallComponents.tsx
+++ b/src/pages/VideoCall/VideoCallComponents.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { SCREEN } from '../../styles/theme'
+import { SCREEN } from 'src/styles/theme'
 
 export const CallContainer = styled.div`
     width: 100vw;
diff --git a/src/pages/VideoCall/VideoCallFrame.tsx b/src/pages/VideoCall/VideoCallFrame.tsx
index a2f39688..176a5d3b 100644
--- a/src/pages/VideoCall/VideoCallFrame.tsx
+++ b/src/pages/VideoCall/VideoCallFrame.tsx
@@ -3,7 +3,7 @@ import { IframeContainer } from './VideoCallComponents'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import { Redirect } from 'react-router-dom'
-import * as LocalStorage from '../../services/local-storage'
+import * as LocalStorage from 'src/services/local-storage'
 
 const VideoCallFrame = ({
     participantsNumber,
diff --git a/src/pages/VideoCall/VideoCallPrecheck.tsx b/src/pages/VideoCall/VideoCallPrecheck.tsx
index 113b1af7..0e915455 100644
--- a/src/pages/VideoCall/VideoCallPrecheck.tsx
+++ b/src/pages/VideoCall/VideoCallPrecheck.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import CapabilitiesDialog from './permissions/CapabilitiesDialog'
 import VideoCallPage from './VideoCall'
-import Footer from '../../components/Footer/Footer'
+import Footer from 'src/components/Footer/Footer'
 import { CallContainer } from './VideoCallComponents'
 
 const VideoCallPrecheck = () => {
diff --git a/src/pages/VideoCall/permissions/BrowserCheck.tsx b/src/pages/VideoCall/permissions/BrowserCheck.tsx
index 702dc896..3f0edf08 100644
--- a/src/pages/VideoCall/permissions/BrowserCheck.tsx
+++ b/src/pages/VideoCall/permissions/BrowserCheck.tsx
@@ -8,7 +8,7 @@ import {
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import DailyIframe from '@daily-co/daily-js'
-import { getLocale } from '../../../i18n/helper'
+import { getLocale } from 'src/i18n/helper'
 
 const BrowserCheck = ({ onGranted }) => {
     const { t } = useTranslation('videocall')
diff --git a/src/pages/VideoCall/permissions/CameraMicrophonePermission.tsx b/src/pages/VideoCall/permissions/CameraMicrophonePermission.tsx
index a491d13b..ba443191 100644
--- a/src/pages/VideoCall/permissions/CameraMicrophonePermission.tsx
+++ b/src/pages/VideoCall/permissions/CameraMicrophonePermission.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import Check from './Check'
-import useCameraMicrophonePermission from '../../../hooks/useCameraMicrophonePermission'
+import useCameraMicrophonePermission from 'src/hooks/useCameraMicrophonePermission'
 import { STATE_GRANTED } from './PermissionConstants'
 
 const CameraMicrophonePermission = ({ onGranted }) => {
diff --git a/src/pages/VideoCall/permissions/CookiePermission.tsx b/src/pages/VideoCall/permissions/CookiePermission.tsx
index 23430f95..778761f5 100644
--- a/src/pages/VideoCall/permissions/CookiePermission.tsx
+++ b/src/pages/VideoCall/permissions/CookiePermission.tsx
@@ -5,10 +5,10 @@ import {
     STATE_GRANTED,
     STATE_WAITING,
 } from './PermissionConstants'
-import useCookiePermission from '../../../hooks/useCookiePermission'
+import useCookiePermission from 'src/hooks/useCookiePermission'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { getCookieBot, hasCookiebot } from '../../../utils/gdpr'
+import { getCookieBot, hasCookiebot } from 'src/utils/gdpr'
 
 const CookiePermission = ({ onGranted }) => {
     const { t } = useTranslation('videocall')
diff --git a/tsconfig.json b/tsconfig.json
index 25f97727..10148536 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,