diff --git a/src/App.tsx b/src/App.tsx
index 9870b3d..0826eff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,13 @@
 import React, { FC } from 'react';
-import { Link } from 'react-router-dom';
 
 import Router from './Router';
-import logo from './assets/logo.svg';
+import { Header } from './components/Header';
 
 const App: FC = () => (
-  <div>
-    <header>
-      <nav>
-        <img src={logo} alt="logo" width="50px" />
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/about">About</Link>
-          </li>
-        </ul>
-      </nav>
-    </header>
+  <>
+    <Header />
     <Router />
-  </div>
+  </>
 );
 
 export default App;
diff --git a/src/Router.tsx b/src/Router.tsx
index f93f42d..3b2cdc6 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,20 +1,16 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import profileImg from './assets/about/profile.jpg';
+import { Home } from './components/Home';
+import { About } from './components/About';
 
 const Router: FC = () => (
   <Switch>
     <Route exact path="/">
-      <div>Hello</div>
+      <Home />
     </Route>
     <Route exact path="/about">
-      <div>
-        <h1>About</h1>
-        <div>
-          <img src={profileImg} alt="profile" width="100%" />
-        </div>
-      </div>
+      <About />
     </Route>
   </Switch>
 );
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..4ceb5cc
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+
+import profileImg from '../assets/about/profile.jpg';
+
+export const About: FC = () => (
+  <div>
+    <h1>About</h1>
+    <div>
+      <img src={profileImg} alt="profile" width="100%" />
+    </div>
+  </div>
+);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..b6ecef1
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import logo from '../assets/logo.svg';
+
+export const Header: FC = () => (
+  <header>
+    <nav>
+      <img src={logo} alt="logo" width="50px" />
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+      </ul>
+    </nav>
+  </header>
+);
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
new file mode 100644
index 0000000..4e1dda8
--- /dev/null
+++ b/src/components/Home.tsx
@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+
+export const Home: FC = () => (
+  <div>
+    <h1>Hello</h1>
+    <p>Hi there!</p>
+  </div>
+);