diff --git a/package-lock.json b/package-lock.json
index 2724b72..53c2857 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "numeral": "^2.0.6",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-router-dom": "^6.18.0",
         "react-scripts": "5.0.1",
         "react-spinners": "^0.13.8",
         "styled-components": "^6.0.7",
@@ -2786,6 +2787,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
+      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -11896,6 +11905,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
+      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+      "dependencies": {
+        "@remix-run/router": "1.11.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
+      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+      "dependencies": {
+        "@remix-run/router": "1.11.0",
+        "react-router": "6.18.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -16600,6 +16639,11 @@
         }
       }
     },
+    "@remix-run/router": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
+      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -23142,6 +23186,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
+      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+      "requires": {
+        "@remix-run/router": "1.11.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
+      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+      "requires": {
+        "@remix-run/router": "1.11.0",
+        "react-router": "6.18.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index c4e80c2..0aa9b1e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "numeral": "^2.0.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.0.7",
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 3291392..dbaf0b6 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,13 +1,21 @@
-// import TweetsPage from 'pages/TweetsPage';
+import TweetsPage from 'pages/TweetsPage';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import './App.css';
-import Tweet from './Tweet/Tweet';
+import Layout from './Layout/Layout';
+import Home from './Home/Home';
+// import Tweet from './Tweet/Tweet';
 
 const App = () => {
   return (
-    <div>
-      {/* <TweetsPage /> */}
-      <Tweet />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route path="tweets" element={<TweetsPage />} />
+          <Route path="" element={<Home />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </BrowserRouter>
   );
 };
 
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
new file mode 100644
index 0000000..38c74e9
--- /dev/null
+++ b/src/components/Home/Home.jsx
@@ -0,0 +1,7 @@
+import { Wrapper } from './Home.styled';
+
+const Home = () => {
+  return <Wrapper>Welcome to the tweets site!</Wrapper>;
+};
+
+export default Home;
diff --git a/src/components/Home/Home.styled.js b/src/components/Home/Home.styled.js
new file mode 100644
index 0000000..d06747e
--- /dev/null
+++ b/src/components/Home/Home.styled.js
@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const Wrapper = styled.h1`
+  font-size: 2.5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #333;
+  margin-bottom: 2rem;
+  animation: fadeIn 2s ease-in-out;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
\ No newline at end of file
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index e69de29..fc2a183 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom';
+import { AppNav, NavItem, NavLinkStyled, NavLinks } from './Layout.styled';
+
+const Layout = () => {
+  return (
+    <>
+      <AppNav>
+        <NavLinks>
+          <NavItem>
+            <NavLinkStyled to="/">Home</NavLinkStyled>
+          </NavItem>
+          <NavItem>
+            <NavLinkStyled to="/tweets">Tweets</NavLinkStyled>
+          </NavItem>
+        </NavLinks>
+      </AppNav>
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/components/MainButton/MainButton.jsx b/src/components/MainButton/MainButton.jsx
new file mode 100644
index 0000000..bd34d14
--- /dev/null
+++ b/src/components/MainButton/MainButton.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledButton } from './MainButton.styled';
+
+const MainButton = ({ to }) => {
+  return <StyledButton to={to}> main</StyledButton>;
+};
+
+export default MainButton;
diff --git a/src/components/MainButton/MainButton.styled.js b/src/components/MainButton/MainButton.styled.js
new file mode 100644
index 0000000..0080b99
--- /dev/null
+++ b/src/components/MainButton/MainButton.styled.js
@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+import { NavLink } from 'react-router-dom';
+
+export const StyledButton = styled(NavLink)`
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 0.8rem 1.5rem;
+  text-align: center;
+  text-decoration: none;
+  display: block;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  margin: 10px;
+  margin-right: auto;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  text-transform: uppercase;
+  width: 50px;
+
+  &:hover {
+    background-color: #3e8e41;
+    color: white;
+  }
+`;