diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 19cb73275a..d8eaabb7d8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -75,4 +75,13 @@ First we need to extract the message from our source code using `yarn i18n:extra
 Crowdin CLI is command-line tool for management of your localization projects on Crowdin. According to https://crowdin.github.io/crowdin-cli/installation you can install crowdin in os or install globally with command `npm i -g @crowdin/cli`. With Crowdin CLI, you can upload source files by using `yarn i18n:push` and download translations by using `i18n:pull` for keep your localized content up-to-date.
 The language code standard used is ISO 639-1. For more details and a list of codes, please refer to the https://www.loc.gov/standards/iso639-2/php/code_list.php .
 
-In the `crowdin.yml` file, you will find the `project_id` and `api_token` values used for synchronizing translations with Crowdin. These values are read from the environment variables `REACT_APP_CROWDIN_PROJECT_ID` and `REACT_APP_CROWDIN_API_KEY` defined in the `.env` file.
\ No newline at end of file
+In the `crowdin.yml` file, you will find the `project_id` and `api_token` values used for synchronizing translations with Crowdin. These values are read from the environment variables `REACT_APP_CROWDIN_PROJECT_ID` and `REACT_APP_CROWDIN_API_KEY` defined in the `.env` file.
+
+
+
+## Technical Notes
+
+### How we handle urls in embedded?
+
+`embedded` is importing in different enviroments (iframe, import as react component and a separate `app`). When it's being used as a react component we let the dApp to use it inside its router and they can load the widget in a separate route (not root `/`, e.g. `/swaps`). In this context we can not use absolute paths because we don't know the basename set by user, so we need to always use relative paths. Relative paths has been defined in [URL spec](https://url.spec.whatwg.org/#urls) so we can be sure it's a long term solution and will work in future or by changing our router librart (e.g. `react-router`).
+
diff --git a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
index 5b1e2181a2..4d954c491b 100644
--- a/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
+++ b/widget/embedded/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx
@@ -19,7 +19,6 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { getQuoteErrorMessage } from '../../constants/errors';
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
@@ -244,7 +243,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
-          navigate(navigationRoutes.home, { replace: true });
+          const home = '../';
+          navigate(home, { replace: true });
         }
         onClose();
       }}
diff --git a/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx b/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx
index ecf3c868dc..6b6a22a3b7 100644
--- a/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx
+++ b/widget/embedded/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx
@@ -33,7 +33,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         <Button
           size="small"
           variant="ghost"
-          onClick={() => navigate('/' + navigationRoutes.settings)}>
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
           <Typography variant="label" size="medium" color="$neutral900">
             {i18n.t('Change settings')}
           </Typography>
diff --git a/widget/embedded/src/components/SwapDetails/SwapDetails.tsx b/widget/embedded/src/components/SwapDetails/SwapDetails.tsx
index 58e78a2846..fb52d03b14 100644
--- a/widget/embedded/src/components/SwapDetails/SwapDetails.tsx
+++ b/widget/embedded/src/components/SwapDetails/SwapDetails.tsx
@@ -22,7 +22,6 @@ import { useWallets } from '@rango-dev/wallets-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -262,7 +261,8 @@ export function SwapDetails(props: SwapDetailsProps) {
             onClick={() => {
               retry(swap, { blockchains: blockchains, tokens: tokens });
               setTimeout(() => {
-                navigate(navigationRoutes.home);
+                const home = '../../';
+                navigate(home);
               }, 0);
             }}>
             {i18n.t('Try again')}
diff --git a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx
index 736efbc296..a17fb49747 100644
--- a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx
+++ b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx
@@ -12,8 +12,6 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -70,7 +68,10 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           variant="contained"
           type="primary"
           size="large"
-          onClick={() => navigate(navigationRoutes.home)}>
+          onClick={() => {
+            const home = '../../';
+            navigate(home);
+          }}>
           <Typography variant="title" size="medium" color="neutral100">
             {i18n.t('Done')}
           </Typography>
diff --git a/widget/embedded/src/pages/ConfirmSwapPage.tsx b/widget/embedded/src/pages/ConfirmSwapPage.tsx
index ec8bf20255..b3dbbf2b7b 100644
--- a/widget/embedded/src/pages/ConfirmSwapPage.tsx
+++ b/widget/embedded/src/pages/ConfirmSwapPage.tsx
@@ -119,12 +119,11 @@ export function ConfirmSwapPage() {
           { id: confirmSwapResult.swap.requestId }
         );
         setSelectedSwap(confirmSwapResult.swap.requestId);
-        navigate(
-          '/' + navigationRoutes.swaps + `/${confirmSwapResult.swap.requestId}`,
-          {
-            replace: true,
-          }
-        );
+
+        const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
+        navigate(swap_url, {
+          replace: true,
+        });
         setTimeout(() => {
           setInputAmount('');
         }, 0);
@@ -251,7 +250,7 @@ export function ConfirmSwapPage() {
             <HeaderButton
               size="small"
               variant="ghost"
-              onClick={() => navigate('/' + navigationRoutes.settings)}>
+              onClick={() => navigate('../' + navigationRoutes.settings)}>
               <SettingsIcon size={18} color="black" />
             </HeaderButton>
           </Tooltip>