diff --git a/e-commerce-app/src/App.test.tsx b/e-commerce-app/src/App.test.tsx
index 2a68616..f099b2b 100644
--- a/e-commerce-app/src/App.test.tsx
+++ b/e-commerce-app/src/App.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import { App } from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+    render(<App />);
+    const linkElement = screen.getByText(/learn react/i);
+    expect(linkElement).toBeInTheDocument();
 });
diff --git a/e-commerce-app/src/App.tsx b/e-commerce-app/src/App.tsx
index a53698a..8cf4099 100644
--- a/e-commerce-app/src/App.tsx
+++ b/e-commerce-app/src/App.tsx
@@ -1,26 +1,48 @@
-import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
+import { HomePage } from './pages/HomePage/HomePage';
+import { AboutPage } from './pages/AbouPage/AboutPage';
+import { ErrorPage } from './pages/ErrorPage/ErrorPage';
+import { BasketPage } from './pages/BasketPage/BasketPage';
+import { LoginPage } from './pages/LoginPage/LoginPage';
+import { RegistrationPage } from './pages/RegistrationPage/RegistrationPage';
+import { UserPage } from './pages/UserPage/UserPage';
+import { ProductPage } from './pages/ProductPage/ProductPage';
+import { ProductsPage } from './pages/ProductsPage/ProductsPage';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+export const App = () => {
 
-export default App;
+    return (
+        <Router>
+            <div className="App">
+                <header className="App-header">
+                    <img src={logo} className="App-logo" alt="logo" />
+                    <p>
+                        Edit <code>src/App.tsx</code> and save to reload.
+                    </p>
+                    <NavLink to="/">Home</NavLink>
+                    <NavLink to="/about">About</NavLink>
+                    <NavLink to="/basket">Basket</NavLink>
+                    <NavLink to="/login">Login</NavLink>
+                    <NavLink to="/registration">Registration</NavLink>
+                    <NavLink to="/user">User</NavLink>
+                    <NavLink to="/product">Product</NavLink>
+                    <NavLink to="/products">Products</NavLink>
+                    <NavLink to="*">Error</NavLink>
+                </header>
+            </div>
+            <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/about" element={<AboutPage />} />
+                <Route path="/basket" element={<BasketPage />} />
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/registration" element={<RegistrationPage />} />
+                <Route path="/user" element={<UserPage />} />
+                <Route path="/product" element={<ProductPage />} />
+                <Route path="/products" element={<ProductsPage />} />
+                <Route path="*" element={<ErrorPage />} />
+            </Routes>
+        </Router>
+    );
+}
\ No newline at end of file
diff --git a/e-commerce-app/src/index.tsx b/e-commerce-app/src/index.tsx
index 032464f..4886063 100644
--- a/e-commerce-app/src/index.tsx
+++ b/e-commerce-app/src/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import { App } from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/e-commerce-app/src/pages/AbouPage/AboutPage.tsx b/e-commerce-app/src/pages/AbouPage/AboutPage.tsx
new file mode 100644
index 0000000..e70a4c2
--- /dev/null
+++ b/e-commerce-app/src/pages/AbouPage/AboutPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const AboutPage: React.FC = () => {
+    return <div>About Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/BasketPage/BasketPage.tsx b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
new file mode 100644
index 0000000..cd8de28
--- /dev/null
+++ b/e-commerce-app/src/pages/BasketPage/BasketPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const BasketPage: React.FC = () => {
+    return <div>Basket Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/ErrorPage/ErrorPage.tsx b/e-commerce-app/src/pages/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000..0784910
--- /dev/null
+++ b/e-commerce-app/src/pages/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ErrorPage: React.FC = () => {
+    return <div>Error Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/HomePage/HomePage.tsx b/e-commerce-app/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..320ee44
--- /dev/null
+++ b/e-commerce-app/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const HomePage: React.FC = () => {
+    return <div>Home Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/LoginPage/LoginPage.tsx b/e-commerce-app/src/pages/LoginPage/LoginPage.tsx
new file mode 100644
index 0000000..de4bf68
--- /dev/null
+++ b/e-commerce-app/src/pages/LoginPage/LoginPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const LoginPage: React.FC = () => {
+    return <div>Login Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/ProductPage/ProductPage.tsx b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
new file mode 100644
index 0000000..7e30ca4
--- /dev/null
+++ b/e-commerce-app/src/pages/ProductPage/ProductPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ProductPage: React.FC = () => {
+    return <div>Product Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/ProductsPage/ProductsPage.tsx b/e-commerce-app/src/pages/ProductsPage/ProductsPage.tsx
new file mode 100644
index 0000000..3c5b727
--- /dev/null
+++ b/e-commerce-app/src/pages/ProductsPage/ProductsPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ProductsPage: React.FC = () => {
+    return <div>Products Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/RegistrationPage/RegistrationPage.tsx b/e-commerce-app/src/pages/RegistrationPage/RegistrationPage.tsx
new file mode 100644
index 0000000..5010469
--- /dev/null
+++ b/e-commerce-app/src/pages/RegistrationPage/RegistrationPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const RegistrationPage: React.FC = () => {
+    return <div>Registration Page</div>;
+};
\ No newline at end of file
diff --git a/e-commerce-app/src/pages/UserPage/UserPage.tsx b/e-commerce-app/src/pages/UserPage/UserPage.tsx
new file mode 100644
index 0000000..8ef6492
--- /dev/null
+++ b/e-commerce-app/src/pages/UserPage/UserPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const UserPage: React.FC = () => {
+    return <div>User Page</div>;
+};
\ No newline at end of file