diff --git a/bro.config.js b/bro.config.js
index 4e05c83..0a4234f 100644
--- a/bro.config.js
+++ b/bro.config.js
@@ -12,7 +12,7 @@ module.exports = {
     "nav1.main": "/nav1",
     "link.nav1.about": "/",
     "link.nav1.profile": "/my-best-profile-page-ever/:userId/:projectId",
-    "nav2.main": "/nav2",
+    'link.nav1.to.nav2.profile': '/by/:userId'
   },
   features: {
     "nav1": {
diff --git a/src/app.tsx b/src/app.tsx
index 49dd6f2..20c10cf 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { BrowserRouter, HashRouter } from 'react-router-dom';
-import { ThemeProvider } from '@emotion/react'
+import React from "react";
+import { BrowserRouter, HashRouter } from "react-router-dom";
+import { ThemeProvider } from "@emotion/react";
 
-import { Dashboard } from './dashboard';
+import { Dashboard } from "./dashboard";
 
 const App = () => {
   return (
-    <ThemeProvider theme={{ colors: { main: 'green' } }}>
+    <ThemeProvider theme={{ colors: { main: "green" } }}>
       <BrowserRouter>
         <Dashboard />
       </BrowserRouter>
diff --git a/src/pages/about/about.style.ts b/src/pages/about/about.style.ts
index 2d998ad..3087fa8 100644
--- a/src/pages/about/about.style.ts
+++ b/src/pages/about/about.style.ts
@@ -9,10 +9,6 @@ export const StyledHeader = styled(Header)`
 export const Wrapper = styled.div<{ red?: boolean }>`
     max-width: 800px;
     margin: 0 auto;
-    background-color: ${(props) => props.red ? 'red' : props.theme.colors.main};
-
-    ${StyledHeader.toString()} {
-        color: palevioletred;
-    }
+    background-color: ${(props) => props.red ? 'red' : props.theme.colors?.main};
 `;
 
diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx
index 5ab04e7..605e1ae 100644
--- a/src/pages/profile/profile.tsx
+++ b/src/pages/profile/profile.tsx
@@ -1,16 +1,17 @@
 import React from "react";
-import { Link, useParams } from "react-router-dom";
+import { generatePath, Link, useParams } from "react-router-dom";
 import { getHistory } from '@brojs/cli'
 import { getNavigationsValue } from "@brojs/cli";
 
 import { URLs } from "../../__data__/urls";
 
 const history = getHistory();
+const nav2ByUrl = getNavigationsValue('link.nav1.to.nav2.profile')
 
 export const ProfilePage = () => {
   const handletoNav2Click = (event) => {
     event.preventDefault()
-    history.push(getNavigationsValue('nav2.main'));
+    history.push(generatePath(nav2ByUrl, { userId: 'some-user-id' }));
   }
 
   const params = useParams<{ userId: string, prodileId: string }>();
@@ -21,7 +22,7 @@ export const ProfilePage = () => {
       <Link to={URLs.about.getUrl()}>go to about page</Link>
 
       <div>
-        <a onClick={handletoNav2Click} href={getNavigationsValue('nav2.main')}>edit profile</a>
+        <a onClick={handletoNav2Click} href={generatePath(nav2ByUrl, { userId: 'some-user-id' })}>edit my profile</a>
       </div>
 
       <pre>{JSON.stringify(params as Required<typeof params>, null, 4)}</pre>
diff --git a/tsconfig.json b/tsconfig.json
index 7bf2474..7e8e7cc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
         "moduleResolution": "node",
         "target": "es6",
         "jsx": "react",
-        "typeRoots": ["node_modules/@types", "src/typings"],
+        "typeRoots": ["node_modules/@types", "src/typings", "./types"],
         "types" : ["webpack-env", "node"],
         "resolveJsonModule": true
     },