diff --git a/package-lock.json b/package-lock.json
index 83e05ecba575807a392a98369b0a2fd44d70da34..e773c0cfddafea0c40a3b2cee65dec5d71c51cb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1603,6 +1603,11 @@
         "chalk": "1.1.3"
       }
     },
+    "classnames": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
+      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+    },
     "clean-css": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
@@ -5601,6 +5606,11 @@
         "pretty-format": "20.0.3"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.2.tgz",
@@ -8894,6 +8904,26 @@
         "node-forge": "0.6.33"
       }
     },
+    "semantic-ui-css": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.2.12.tgz",
+      "integrity": "sha512-RrA3k6hya+kEMDmVLT38SBTDQD8FgdnFi16eMPuQ1N1xUOoBxKzr+HZASb7Zo3xlMvkYqEWvPIp58Wjl6Zcsfg==",
+      "requires": {
+        "jquery": "3.3.1"
+      }
+    },
+    "semantic-ui-react": {
+      "version": "0.77.2",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.77.2.tgz",
+      "integrity": "sha512-VwxY6oGLrBO2xoJiAW/vn40GL4WGZYWxtbrHIKYE1xChTOFlDxyIULMdnuAHOTbrbOYbLQ0X7LpdvEEYmieiJw==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "classnames": "2.2.5",
+        "fbjs": "0.8.16",
+        "lodash": "4.17.4",
+        "prop-types": "15.6.0"
+      }
+    },
     "semver": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
diff --git a/src/components/App.js b/src/components/App.js
index cc988fb0016590c2bc7b8456926e3324a9639b85..12b55b4f537bd2d58dc6812db10c001f8bf14efb 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,12 +1,11 @@
-import React from 'react';
-import Header from './Header';
-import Main from './Main';
-import Profile from './Profile'
+import React from "react";
+import Header from "./Header";
+import Main from "./Main";
 
 const App = () => (
   <div>
-    {/*<Header />*/}
-    <Profile />
+    <Header />
+    <Main />
   </div>
 );
 
diff --git a/src/components/Header.js b/src/components/Header.js
index 0ac6f1dc77e21e90a9f749187917e55c09e393c4..7d2d389dd2e7a207a31ec0eaf2f18ae4f14b8baa 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,16 +1,28 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Menu, Container, Button, Segment } from "semantic-ui-react";
 
 const Header = () => (
-  <header>
-    <nav>
-      <ul>
-        <li><Link to='/'>Home</Link></li>
-        <li><Link to='/roster'>Roster</Link></li>
-        <li><Link to='/schedule'>Schedule</Link></li>
-      </ul>
-    </nav>
-  </header>
+  <Segment inverted textAlign="center" vertical>
+    <Container>
+      <Menu inverted secondary size="large">
+        <Menu.Item as={NavLink} to="/home">
+          Főoldal
+        </Menu.Item>
+        <Menu.Item as={NavLink} to="/trainers">
+          Képzők
+        </Menu.Item>
+        <Menu.Item as={NavLink} to="/schedule">
+          Ütemterv
+        </Menu.Item>
+        <Menu.Item position="right">
+          <Button as="a" href="/api/v1/login/authsch/" inverted>
+            BejelentkezĂŠs
+          </Button>
+        </Menu.Item>
+      </Menu>
+    </Container>
+  </Segment>
 );
 
 export default Header;
diff --git a/src/components/Main.js b/src/components/Main.js
index 552be51d4ae6cc81ecb53929772393cb6183bcd5..8c744711e444a8f320fce38862ceaf3a1a6415f7 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,242 +1,20 @@
-import React, { Component } from "react";
-import { NavLink } from "react-router-dom";
-import {
-  Button,
-  Container,
-  Divider,
-  Grid,
-  Header,
-  Icon,
-  Image,
-  List,
-  Menu,
-  Segment,
-  Visibility
-} from "semantic-ui-react";
-
-const FixedMenu = () => (
-  <Menu fixed="top" size="large">
-    <Container>
-      <Menu.Item as={NavLink} to="/home">
-        Home
-      </Menu.Item>
-      <Menu.Item as={NavLink} to="/roster">
-        Roster
-      </Menu.Item>
-      <Menu.Item as={NavLink} to="/schedule">
-        Schedule
-      </Menu.Item>
-      <Menu.Menu position="right">
-        <Menu.Item className="item">
-          <Button>Log in</Button>
-        </Menu.Item>
-      </Menu.Menu>
-    </Container>
-  </Menu>
+import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
+import Home from "./pages/Home";
+import Trainers from "./pages/Trainers";
+import Schedule from "./pages/Schedule";
+import NotFound from "./pages/NotFound";
+
+const Main = () => (
+  <main>
+    <Switch>
+      <Redirect exact from="/" to="/home" />
+      <Route exact path="/home" component={Home} />
+      <Route path="/trainers" component={Trainers} />
+      <Route path="/schedule" component={Schedule} />
+      <Route component={NotFound} />
+    </Switch>
+  </main>
 );
 
-export default class HomepageLayout extends Component {
-  state = {};
-
-  hideFixedMenu = () => this.setState({ visible: false });
-  showFixedMenu = () => this.setState({ visible: true });
-
-  render() {
-    const { visible } = this.state;
-
-    return (
-      <div>
-        {visible ? <FixedMenu /> : null}
-
-        <Visibility
-          onBottomPassed={this.showFixedMenu}
-          onBottomVisible={this.hideFixedMenu}
-          once={false}
-        >
-          <Segment
-            inverted
-            textAlign="center"
-            style={{ minHeight: 700, padding: "1em 0em" }}
-            vertical
-          >
-            <Container>
-              <Menu inverted pointing secondary size="large">
-                <Menu.Item as={NavLink} to="/home">
-                  Home
-                </Menu.Item>
-                <Menu.Item as={NavLink} to="/roster">
-                  Roster
-                </Menu.Item>
-                <Menu.Item as={NavLink} to="/schedule">
-                  Schedule
-                </Menu.Item>
-                <Menu.Item position="right">
-                  <Button as="a" href='/api/v1/login/authsch/' inverted>
-                    Log in
-                  </Button>
-                </Menu.Item>
-              </Menu>
-            </Container>
-
-            <Container text>
-              <Header
-                as="h1"
-                content="KSZK"
-                inverted
-                style={{
-                  fontSize: "4em",
-                  fontWeight: "normal",
-                  marginBottom: 0,
-                  marginTop: "3em"
-                }}
-              />
-              <Header
-                as="h2"
-                content="Do whatever you want when you want to."
-                inverted
-                style={{ fontSize: "1.7em", fontWeight: "normal" }}
-              />
-              <Button primary size="huge">
-                Get Started
-                <Icon name="right arrow" />
-              </Button>
-            </Container>
-          </Segment>
-        </Visibility>
-
-        <Segment style={{ padding: "8em 0em" }} vertical>
-          <Grid container stackable verticalAlign="middle">
-            <Grid.Row>
-              <Grid.Column width={8}>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  We Help Companies and Companions
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  We can give your company superpowers to do things that they
-                  never thought possible. Let us delight your customers and
-                  empower your needs... through pure data analytics.
-                </p>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  We Make Bananas That Can Dance
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  Yes that's right, you thought it was the stuff of dreams, but
-                  even bananas can be bioengineered.
-                </p>
-              </Grid.Column>
-              <Grid.Column floated="right" width={6}>
-                <Image
-                  bordered
-                  rounded
-                  size="large"
-                  src="/assets/images/wireframe/white-image.png"
-                />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row>
-              <Grid.Column textAlign="center">
-                <Button size="huge">Check Them Out</Button>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-
-        <Segment style={{ padding: "0em" }} vertical>
-          <Grid celled="internally" columns="equal" stackable>
-            <Grid.Row textAlign="center">
-              <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  "What a Company"
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  That is what they all say about us
-                </p>
-              </Grid.Column>
-              <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  "I shouldn't have gone with their competitor."
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  <Image avatar src="/assets/images/avatar/large/nan.jpg" />
-                  <b>Nan</b> Chief Fun Officer Acme Toys
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-
-        <Segment style={{ padding: "8em 0em" }} vertical>
-          <Container text>
-            <Header as="h3" style={{ fontSize: "2em" }}>
-              Breaking The Grid, Grabs Your Attention
-            </Header>
-            <p style={{ fontSize: "1.33em" }}>
-              Instead of focusing on content creation and hard work, we have
-              learned how to master the art of doing nothing by providing
-              massive amounts of whitespace and generic content that can seem
-              massive, monolithic and worth your attention.
-            </p>
-            <Button as="a" size="large">
-              Read More
-            </Button>
-
-            <Divider
-              as="h4"
-              className="header"
-              horizontal
-              style={{ margin: "3em 0em", textTransform: "uppercase" }}
-            >
-              <a href="#">Case Studies</a>
-            </Divider>
-
-            <Header as="h3" style={{ fontSize: "2em" }}>
-              Did We Tell You About Our Bananas?
-            </Header>
-            <p style={{ fontSize: "1.33em" }}>
-              Yes I know you probably disregarded the earlier boasts as
-              non-sequitur filler content, but it's really true. It took years
-              of gene splicing and combinatory DNA research, but our bananas can
-              really dance.
-            </p>
-            <Button as="a" size="large">
-              I'm Still Quite Interested
-            </Button>
-          </Container>
-        </Segment>
-
-        <Segment inverted vertical style={{ padding: "5em 0em" }}>
-          <Container>
-            <Grid divided inverted stackable>
-              <Grid.Row>
-                <Grid.Column width={3}>
-                  <Header inverted as="h4" content="About" />
-                  <List link inverted>
-                    <List.Item as="a">Sitemap</List.Item>
-                    <List.Item as="a">Contact Us</List.Item>
-                    <List.Item as="a">Religious Ceremonies</List.Item>
-                    <List.Item as="a">Gazebo Plans</List.Item>
-                  </List>
-                </Grid.Column>
-                <Grid.Column width={3}>
-                  <Header inverted as="h4" content="Services" />
-                  <List link inverted>
-                    <List.Item as="a">Banana Pre-Order</List.Item>
-                    <List.Item as="a">DNA FAQ</List.Item>
-                    <List.Item as="a">How To Access</List.Item>
-                    <List.Item as="a">Favorite X-Men</List.Item>
-                  </List>
-                </Grid.Column>
-                <Grid.Column width={7}>
-                  <Header as="h4" inverted>
-                    Footer Header
-                  </Header>
-                  <p>Created by DevTeam 2017.</p>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Container>
-        </Segment>
-      </div>
-    );
-  }
-}
+export default Main;
diff --git a/src/components/Profile.js b/src/components/Profile.js
deleted file mode 100644
index d101d58d556246c515418c0a0813c7de91897625..0000000000000000000000000000000000000000
--- a/src/components/Profile.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { Component } from "react";
-import { NavLink } from "react-router-dom";
-import {
-  Button,
-  Container,
-  Divider,
-  Grid,
-  Header,
-  Icon,
-  Image,
-  List,
-  Menu,
-  Segment,
-  Visibility
-} from "semantic-ui-react";
-
-const FixedMenu = () => (
-  <Menu fixed="top" size="large">
-    <Container>
-      <Menu.Item as={NavLink} to="/home">
-        Home
-      </Menu.Item>
-      <Menu.Item as={NavLink} to="/roster">
-        Roster
-      </Menu.Item>
-      <Menu.Item as={NavLink} to="/schedule">
-        Schedule
-      </Menu.Item>
-      <Menu.Menu position="right">
-        <Menu.Item className="item">
-          <Button>Log in</Button>
-        </Menu.Item>
-      </Menu.Menu>
-    </Container>
-  </Menu>
-);
-
-export default class HomepageLayout extends Component {
-  state = {};
-
-  hideFixedMenu = () => this.setState({ visible: false });
-  showFixedMenu = () => this.setState({ visible: true });
-
-  render() {
-    const { visible } = this.state;
-
-    return (
-      <div>
-        {visible ? <FixedMenu /> : null}
-
-        <Visibility
-          onBottomPassed={this.showFixedMenu}
-          onBottomVisible={this.hideFixedMenu}
-          once={false}
-        >
-          <Segment
-            inverted
-            textAlign="center"
-            style={{ minHeight: 700, padding: "1em 0em" }}
-            vertical
-          >
-            <Container>
-              <Menu inverted pointing secondary size="large">
-                <Menu.Item as={NavLink} to="/home">
-                  Home
-                </Menu.Item>
-                <Menu.Item as={NavLink} to="/roster">
-                  Roster
-                </Menu.Item>
-                <Menu.Item as={NavLink} to="/schedule">
-                  Schedule
-                </Menu.Item>
-                <Menu.Item position="right">
-                  <Button as="a" inverted>
-                    Log in
-                  </Button>
-                </Menu.Item>
-              </Menu>
-            </Container>
-
-            <Container text>
-              <Header
-                as="h1"
-                content="Profil"
-                inverted
-                style={{
-                  fontSize: "4em",
-                  fontWeight: "normal",
-                  marginBottom: 0,
-                  marginTop: "3em"
-                }}
-              />
-              <Header
-                as="h2"
-                content="Do whatever you want when you want to."
-                inverted
-                style={{ fontSize: "1.7em", fontWeight: "normal" }}
-              />
-              <Button primary size="huge">
-                Get Started
-                <Icon name="right arrow" />
-              </Button>
-            </Container>
-          </Segment>
-        </Visibility>
-
-        <Segment style={{ padding: "8em 0em" }} vertical>
-          <Grid container stackable verticalAlign="middle">
-            <Grid.Row>
-              <Grid.Column width={8}>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  We Help Companies and Companions
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  We can give your company superpowers to do things that they
-                  never thought possible. Let us delight your customers and
-                  empower your needs... through pure data analytics.
-                </p>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  We Make Bananas That Can Dance
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  Yes that's right, you thought it was the stuff of dreams, but
-                  even bananas can be bioengineered.
-                </p>
-              </Grid.Column>
-              <Grid.Column floated="right" width={6}>
-                <Image
-                  bordered
-                  rounded
-                  size="large"
-                  src="/assets/images/wireframe/white-image.png"
-                />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row>
-              <Grid.Column textAlign="center">
-                <Button size="huge">Check Them Out</Button>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-
-        <Segment style={{ padding: "0em" }} vertical>
-          <Grid celled="internally" columns="equal" stackable>
-            <Grid.Row textAlign="center">
-              <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  "What a Company"
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  That is what they all say about us
-                </p>
-              </Grid.Column>
-              <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
-                <Header as="h3" style={{ fontSize: "2em" }}>
-                  "I shouldn't have gone with their competitor."
-                </Header>
-                <p style={{ fontSize: "1.33em" }}>
-                  <Image avatar src="/assets/images/avatar/large/nan.jpg" />
-                  <b>Nan</b> Chief Fun Officer Acme Toys
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-
-        <Segment style={{ padding: "8em 0em" }} vertical>
-          <Container text>
-            <Header as="h3" style={{ fontSize: "2em" }}>
-              Breaking The Grid, Grabs Your Attention
-            </Header>
-            <p style={{ fontSize: "1.33em" }}>
-              Instead of focusing on content creation and hard work, we have
-              learned how to master the art of doing nothing by providing
-              massive amounts of whitespace and generic content that can seem
-              massive, monolithic and worth your attention.
-            </p>
-            <Button as="a" size="large">
-              Read More
-            </Button>
-
-            <Divider
-              as="h4"
-              className="header"
-              horizontal
-              style={{ margin: "3em 0em", textTransform: "uppercase" }}
-            >
-              <a href="#">Case Studies</a>
-            </Divider>
-
-            <Header as="h3" style={{ fontSize: "2em" }}>
-              Did We Tell You About Our Bananas?
-            </Header>
-            <p style={{ fontSize: "1.33em" }}>
-              Yes I know you probably disregarded the earlier boasts as
-              non-sequitur filler content, but it's really true. It took years
-              of gene splicing and combinatory DNA research, but our bananas can
-              really dance.
-            </p>
-            <Button as="a" size="large">
-              I'm Still Quite Interested
-            </Button>
-          </Container>
-        </Segment>
-
-        <Segment inverted vertical style={{ padding: "5em 0em" }}>
-          <Container>
-            <Grid divided inverted stackable>
-              <Grid.Row>
-                <Grid.Column width={3}>
-                  <Header inverted as="h4" content="About" />
-                  <List link inverted>
-                    <List.Item as="a">Sitemap</List.Item>
-                    <List.Item as="a">Contact Us</List.Item>
-                    <List.Item as="a">Religious Ceremonies</List.Item>
-                    <List.Item as="a">Gazebo Plans</List.Item>
-                  </List>
-                </Grid.Column>
-                <Grid.Column width={3}>
-                  <Header inverted as="h4" content="Services" />
-                  <List link inverted>
-                    <List.Item as="a">Banana Pre-Order</List.Item>
-                    <List.Item as="a">DNA FAQ</List.Item>
-                    <List.Item as="a">How To Access</List.Item>
-                    <List.Item as="a">Favorite X-Men</List.Item>
-                  </List>
-                </Grid.Column>
-                <Grid.Column width={7}>
-                  <Header as="h4" inverted>
-                    Footer Header
-                  </Header>
-                  <p>Created by DevTeam 2017.</p>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Container>
-        </Segment>
-      </div>
-    );
-  }
-}
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
index be5d6327b57b1e2a21f87654a756b22bc9254f89..f16a091314df60fff23497ee185b3224cc057406 100644
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
@@ -1,9 +1,121 @@
-import React from 'react';
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  Button,
+  Container,
+  Grid,
+  Header,
+  Icon,
+  List,
+  Menu,
+  Segment,
+  Visibility
+} from "semantic-ui-react";
 
-const Home = () => (
-  <div>
-    <h1>Welcome to the Tornadoes Website!</h1>
-  </div>
+const FixedMenu = () => (
+  <Menu fixed="top" size="large">
+    <Container>
+      <Menu.Item as={NavLink} to="/home">
+        Home
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/roster">
+        Roster
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/schedule">
+        Schedule
+      </Menu.Item>
+      <Menu.Menu position="right">
+        <Menu.Item className="item">
+          <Button>Log in</Button>
+        </Menu.Item>
+      </Menu.Menu>
+    </Container>
+  </Menu>
 );
 
-export default Home;
+export default class Home extends Component {
+  state = {};
+
+  hideFixedMenu = () => this.setState({ visible: false });
+  showFixedMenu = () => this.setState({ visible: true });
+
+  render() {
+    const { visible } = this.state;
+
+    return (
+      <div>
+        {visible ? <FixedMenu /> : null}
+
+        <Visibility
+          onBottomPassed={this.showFixedMenu}
+          onBottomVisible={this.hideFixedMenu}
+          once={false}
+        >
+          <Segment
+            inverted
+            textAlign="center"
+            style={{ minHeight: 700, padding: "1em 0em" }}
+            vertical
+          >
+            <Container text>
+              <Header
+                as="h1"
+                content="KSZK"
+                inverted
+                style={{
+                  fontSize: "4em",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "3em"
+                }}
+              />
+              <Header
+                as="h2"
+                content="Főoldal"
+                inverted
+                style={{ fontSize: "1.7em", fontWeight: "normal" }}
+              />
+              <Button primary size="huge">
+                Get Started
+                <Icon name="right arrow" />
+              </Button>
+            </Container>
+          </Segment>
+        </Visibility>
+
+        <Segment inverted vertical style={{ padding: "5em 0em" }}>
+          <Container>
+            <Grid divided inverted stackable>
+              <Grid.Row>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="About" />
+                  <List link inverted>
+                    <List.Item as="a">Sitemap</List.Item>
+                    <List.Item as="a">Contact Us</List.Item>
+                    <List.Item as="a">Religious Ceremonies</List.Item>
+                    <List.Item as="a">Gazebo Plans</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="Services" />
+                  <List link inverted>
+                    <List.Item as="a">Banana Pre-Order</List.Item>
+                    <List.Item as="a">DNA FAQ</List.Item>
+                    <List.Item as="a">How To Access</List.Item>
+                    <List.Item as="a">Favorite X-Men</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={7}>
+                  <Header as="h4" inverted>
+                    Footer Header
+                  </Header>
+                  <p>Created by DevTeam 2017.</p>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
diff --git a/src/components/pages/NotFound.js b/src/components/pages/NotFound.js
index 78aba0dc316410f609b8b1901666bb596e9a18ec..69d438b04f430f02543c6b069e1edb7135dc605b 100644
--- a/src/components/pages/NotFound.js
+++ b/src/components/pages/NotFound.js
@@ -1,9 +1,121 @@
-import React from 'react';
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  Button,
+  Container,
+  Grid,
+  Header,
+  Icon,
+  List,
+  Menu,
+  Segment,
+  Visibility
+} from "semantic-ui-react";
 
-const NotFound = () => (
-  <div>
-    <p>404: Page not found</p>
-  </div>
+const FixedMenu = () => (
+  <Menu fixed="top" size="large">
+    <Container>
+      <Menu.Item as={NavLink} to="/home">
+        Home
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/roster">
+        Roster
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/schedule">
+        Schedule
+      </Menu.Item>
+      <Menu.Menu position="right">
+        <Menu.Item className="item">
+          <Button>Log in</Button>
+        </Menu.Item>
+      </Menu.Menu>
+    </Container>
+  </Menu>
 );
 
-export default NotFound;
+export default class NotFound extends Component {
+  state = {};
+
+  hideFixedMenu = () => this.setState({ visible: false });
+  showFixedMenu = () => this.setState({ visible: true });
+
+  render() {
+    const { visible } = this.state;
+
+    return (
+      <div>
+        {visible ? <FixedMenu /> : null}
+
+        <Visibility
+          onBottomPassed={this.showFixedMenu}
+          onBottomVisible={this.hideFixedMenu}
+          once={false}
+        >
+          <Segment
+            inverted
+            textAlign="center"
+            style={{ minHeight: 700, padding: "1em 0em" }}
+            vertical
+          >
+            <Container text>
+              <Header
+                as="h1"
+                content="KSZK"
+                inverted
+                style={{
+                  fontSize: "4em",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "3em"
+                }}
+              />
+              <Header
+                as="h2"
+                content="404"
+                inverted
+                style={{ fontSize: "1.7em", fontWeight: "normal" }}
+              />
+              <Button primary size="huge">
+                Get Started
+                <Icon name="right arrow" />
+              </Button>
+            </Container>
+          </Segment>
+        </Visibility>
+
+        <Segment inverted vertical style={{ padding: "5em 0em" }}>
+          <Container>
+            <Grid divided inverted stackable>
+              <Grid.Row>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="About" />
+                  <List link inverted>
+                    <List.Item as="a">Sitemap</List.Item>
+                    <List.Item as="a">Contact Us</List.Item>
+                    <List.Item as="a">Religious Ceremonies</List.Item>
+                    <List.Item as="a">Gazebo Plans</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="Services" />
+                  <List link inverted>
+                    <List.Item as="a">Banana Pre-Order</List.Item>
+                    <List.Item as="a">DNA FAQ</List.Item>
+                    <List.Item as="a">How To Access</List.Item>
+                    <List.Item as="a">Favorite X-Men</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={7}>
+                  <Header as="h4" inverted>
+                    Footer Header
+                  </Header>
+                  <p>Created by DevTeam 2017.</p>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
diff --git a/src/components/pages/Profile.js b/src/components/pages/Profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..c23e15919754a10996d37f76f2501e917befa44e
--- /dev/null
+++ b/src/components/pages/Profile.js
@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  Button,
+  Container,
+  Grid,
+  Header,
+  Icon,
+  List,
+  Menu,
+  Segment,
+  Visibility
+} from "semantic-ui-react";
+
+const FixedMenu = () => (
+  <Menu fixed="top" size="large">
+    <Container>
+      <Menu.Item as={NavLink} to="/home">
+        Home
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/roster">
+        Roster
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/schedule">
+        Schedule
+      </Menu.Item>
+      <Menu.Menu position="right">
+        <Menu.Item className="item">
+          <Button>Log in</Button>
+        </Menu.Item>
+      </Menu.Menu>
+    </Container>
+  </Menu>
+);
+
+export default class Profile extends Component {
+  state = {};
+
+  hideFixedMenu = () => this.setState({ visible: false });
+  showFixedMenu = () => this.setState({ visible: true });
+
+  render() {
+    const { visible } = this.state;
+
+    return (
+      <div>
+        {visible ? <FixedMenu /> : null}
+
+        <Visibility
+          onBottomPassed={this.showFixedMenu}
+          onBottomVisible={this.hideFixedMenu}
+          once={false}
+        >
+          <Segment
+            inverted
+            textAlign="center"
+            style={{ minHeight: 700, padding: "1em 0em" }}
+            vertical
+          >
+            <Container text>
+              <Header
+                as="h1"
+                content="KSZK"
+                inverted
+                style={{
+                  fontSize: "4em",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "3em"
+                }}
+              />
+              <Header
+                as="h2"
+                content="Profil"
+                inverted
+                style={{ fontSize: "1.7em", fontWeight: "normal" }}
+              />
+              <Button primary size="huge">
+                Get Started
+                <Icon name="right arrow" />
+              </Button>
+            </Container>
+          </Segment>
+        </Visibility>
+
+        <Segment inverted vertical style={{ padding: "5em 0em" }}>
+          <Container>
+            <Grid divided inverted stackable>
+              <Grid.Row>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="About" />
+                  <List link inverted>
+                    <List.Item as="a">Sitemap</List.Item>
+                    <List.Item as="a">Contact Us</List.Item>
+                    <List.Item as="a">Religious Ceremonies</List.Item>
+                    <List.Item as="a">Gazebo Plans</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="Services" />
+                  <List link inverted>
+                    <List.Item as="a">Banana Pre-Order</List.Item>
+                    <List.Item as="a">DNA FAQ</List.Item>
+                    <List.Item as="a">How To Access</List.Item>
+                    <List.Item as="a">Favorite X-Men</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={7}>
+                  <Header as="h4" inverted>
+                    Footer Header
+                  </Header>
+                  <p>Created by DevTeam 2017.</p>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
diff --git a/src/components/pages/Roster.js b/src/components/pages/Roster.js
deleted file mode 100644
index 6a5793393f3266f292947b82bc6c844ddc503513..0000000000000000000000000000000000000000
--- a/src/components/pages/Roster.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import FullRoster from './roster/FullRoster';
-import Player from './roster/Player';
-
-const Roster = () => (
-  <Switch>
-    <Route exact path='/roster' component={FullRoster} />
-    <Route path='/roster/:number' component={Player} />
-  </Switch>
-);
-
-
-export default Roster;
diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js
index 4332ee0981d4ffd67a5c49abd9f5694c97a2c078..2c20022aa19bd23d6b416421b6124ee2418143d5 100644
--- a/src/components/pages/Schedule.js
+++ b/src/components/pages/Schedule.js
@@ -1,13 +1,121 @@
-import React from 'react';
-
-const Schedule = () => (
-  <div>
-    <ul>
-      <li>6/5 @ Evergreens</li>
-      <li>6/8 vs Kickers</li>
-      <li>6/14 @ United</li>
-    </ul>
-  </div>
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  Button,
+  Container,
+  Grid,
+  Header,
+  Icon,
+  List,
+  Menu,
+  Segment,
+  Visibility
+} from "semantic-ui-react";
+
+const FixedMenu = () => (
+  <Menu fixed="top" size="large">
+    <Container>
+      <Menu.Item as={NavLink} to="/home">
+        Home
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/roster">
+        Roster
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/schedule">
+        Schedule
+      </Menu.Item>
+      <Menu.Menu position="right">
+        <Menu.Item className="item">
+          <Button>Log in</Button>
+        </Menu.Item>
+      </Menu.Menu>
+    </Container>
+  </Menu>
 );
 
-export default Schedule;
+export default class Schedule extends Component {
+  state = {};
+
+  hideFixedMenu = () => this.setState({ visible: false });
+  showFixedMenu = () => this.setState({ visible: true });
+
+  render() {
+    const { visible } = this.state;
+
+    return (
+      <div>
+        {visible ? <FixedMenu /> : null}
+
+        <Visibility
+          onBottomPassed={this.showFixedMenu}
+          onBottomVisible={this.hideFixedMenu}
+          once={false}
+        >
+          <Segment
+            inverted
+            textAlign="center"
+            style={{ minHeight: 700, padding: "1em 0em" }}
+            vertical
+          >
+            <Container text>
+              <Header
+                as="h1"
+                content="KSZK"
+                inverted
+                style={{
+                  fontSize: "4em",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "3em"
+                }}
+              />
+              <Header
+                as="h2"
+                content="Ütemterv"
+                inverted
+                style={{ fontSize: "1.7em", fontWeight: "normal" }}
+              />
+              <Button primary size="huge">
+                Get Started
+                <Icon name="right arrow" />
+              </Button>
+            </Container>
+          </Segment>
+        </Visibility>
+
+        <Segment inverted vertical style={{ padding: "5em 0em" }}>
+          <Container>
+            <Grid divided inverted stackable>
+              <Grid.Row>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="About" />
+                  <List link inverted>
+                    <List.Item as="a">Sitemap</List.Item>
+                    <List.Item as="a">Contact Us</List.Item>
+                    <List.Item as="a">Religious Ceremonies</List.Item>
+                    <List.Item as="a">Gazebo Plans</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="Services" />
+                  <List link inverted>
+                    <List.Item as="a">Banana Pre-Order</List.Item>
+                    <List.Item as="a">DNA FAQ</List.Item>
+                    <List.Item as="a">How To Access</List.Item>
+                    <List.Item as="a">Favorite X-Men</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={7}>
+                  <Header as="h4" inverted>
+                    Footer Header
+                  </Header>
+                  <p>Created by DevTeam 2017.</p>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
diff --git a/src/components/pages/Trainers.js b/src/components/pages/Trainers.js
new file mode 100644
index 0000000000000000000000000000000000000000..c69eab71d50b69e10d83663a5a89d3e9afd6b8e8
--- /dev/null
+++ b/src/components/pages/Trainers.js
@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  Button,
+  Container,
+  Grid,
+  Header,
+  Icon,
+  List,
+  Menu,
+  Segment,
+  Visibility
+} from "semantic-ui-react";
+
+const FixedMenu = () => (
+  <Menu fixed="top" size="large">
+    <Container>
+      <Menu.Item as={NavLink} to="/home">
+        Home
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/roster">
+        Roster
+      </Menu.Item>
+      <Menu.Item as={NavLink} to="/schedule">
+        Schedule
+      </Menu.Item>
+      <Menu.Menu position="right">
+        <Menu.Item className="item">
+          <Button>Log in</Button>
+        </Menu.Item>
+      </Menu.Menu>
+    </Container>
+  </Menu>
+);
+
+export default class Trainers extends Component {
+  state = {};
+
+  hideFixedMenu = () => this.setState({ visible: false });
+  showFixedMenu = () => this.setState({ visible: true });
+
+  render() {
+    const { visible } = this.state;
+
+    return (
+      <div>
+        {visible ? <FixedMenu /> : null}
+
+        <Visibility
+          onBottomPassed={this.showFixedMenu}
+          onBottomVisible={this.hideFixedMenu}
+          once={false}
+        >
+          <Segment
+            inverted
+            textAlign="center"
+            style={{ minHeight: 700, padding: "1em 0em" }}
+            vertical
+          >
+            <Container text>
+              <Header
+                as="h1"
+                content="KSZK"
+                inverted
+                style={{
+                  fontSize: "4em",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "3em"
+                }}
+              />
+              <Header
+                as="h2"
+                content="Képzők"
+                inverted
+                style={{ fontSize: "1.7em", fontWeight: "normal" }}
+              />
+              <Button primary size="huge">
+                Get Started
+                <Icon name="right arrow" />
+              </Button>
+            </Container>
+          </Segment>
+        </Visibility>
+
+        <Segment inverted vertical style={{ padding: "5em 0em" }}>
+          <Container>
+            <Grid divided inverted stackable>
+              <Grid.Row>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="About" />
+                  <List link inverted>
+                    <List.Item as="a">Sitemap</List.Item>
+                    <List.Item as="a">Contact Us</List.Item>
+                    <List.Item as="a">Religious Ceremonies</List.Item>
+                    <List.Item as="a">Gazebo Plans</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={3}>
+                  <Header inverted as="h4" content="Services" />
+                  <List link inverted>
+                    <List.Item as="a">Banana Pre-Order</List.Item>
+                    <List.Item as="a">DNA FAQ</List.Item>
+                    <List.Item as="a">How To Access</List.Item>
+                    <List.Item as="a">Favorite X-Men</List.Item>
+                  </List>
+                </Grid.Column>
+                <Grid.Column width={7}>
+                  <Header as="h4" inverted>
+                    Footer Header
+                  </Header>
+                  <p>Created by DevTeam 2017.</p>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
diff --git a/src/components/pages/roster/FullRoster.js b/src/components/pages/roster/FullRoster.js
deleted file mode 100644
index e30a39b91fa682740eef85cdd2ec454b740ddbbe..0000000000000000000000000000000000000000
--- a/src/components/pages/roster/FullRoster.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const FullRoster = () => (
-  <div>
-    <ul>
-      <Link to={'/roster/0'}>0</Link>
-    </ul>
-  </div>
-);
-
-export default FullRoster;
diff --git a/src/components/pages/roster/Player.js b/src/components/pages/roster/Player.js
deleted file mode 100644
index 55d49b7e556bddf23da79e9efc7b346c92faad2b..0000000000000000000000000000000000000000
--- a/src/components/pages/roster/Player.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const Player = () => (
-  <div>
-    Sorry
-    <Link to='/roster'>Back</Link>
-  </div>
-);
-
-export default Player;