diff --git a/js/CommonComponents.js b/js/CommonComponents.js
deleted file mode 100644
index b32d412..0000000
--- a/js/CommonComponents.js
+++ /dev/null
@@ -1,282 +0,0 @@
-import {
-    Badge,
-    Button,
-    ButtonGroup,
-    Card,
-    CardBody,
-    Container,
-    Collapse,
-    Form,
-    FormGroup,
-    Nav,
-    Navbar,
-    NavbarBrand,
-    NavbarToggler,
-    NavItem,
-    NavLink,
-    Input,
-    Label
-} from 'reactstrap';
-
-import { connect } from 'react-redux';
-
-import React from 'react';
-
-import { login, logout } from './api';
-
-export function BigImage(props) {
-    return (
-        <div className="big-image">
-            <h1 className="display-1">{props.text}</h1>
-        </div>
-    );
-}
-
-export class TurniereNavigation extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        this.toggle = this.toggle.bind(this);
-
-        this.state = {
-            collapsed: true
-        };
-    }
-
-    toggle() {
-        this.setState({
-            collapsed: !this.state.collapsed
-        });
-    }
-
-    render() {
-        return (
-            <Navbar color="light" light expand="lg">
-                <NavbarBrand href="/">turnie.re</NavbarBrand>
-                <Betabadge/>
-                <NavbarToggler onClick={this.toggle} />
-                <Collapse isOpen={!this.state.collapsed} navbar>
-                    <Nav navbar className="mr-auto">
-                        <Navlink target="/create" text="Turnier erstellen"/>
-                        <Navlink target="/list" text="Öffentliche Turniere"/>
-                        <Navlink target="/faq" text="FAQ"/>
-                    </Nav>
-                    <LoginLogoutButtons/>
-                </Collapse>
-            </Navbar>
-        );
-    }
-}
-
-function Navlink(props) {
-    return (
-        <NavItem active={true}>
-            <NavLink href={props.target}>{props.text}</NavLink>
-        </NavItem>
-    );
-}
-
-function Betabadge() {
-    return (<Badge color="danger" className="mr-2">BETA</Badge>);
-}
-
-class InvisibleLoginLogoutButtons extends React.Component {
-
-    render() {
-        const { isSignedIn, username } = this.props;
-
-        if(isSignedIn) {
-            return (
-                <ButtonGroup className="nav-item">
-                    <Button outline color="success"  href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
-                    <Button outline color="success" onClick={logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
-                </ButtonGroup>
-            );
-        } else {
-            return (
-                <ButtonGroup className="nav-item">
-                    <Button outline color="success" href="/login" className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
-                    <Button outline color="success" href="/register" className="navbar-btn my-2 my-sm-0 px-5">Registrieren</Button>
-                </ButtonGroup>
-            );
-        }
-    }
-}
-
-const mapStateToLoginLogoutButtonProperties = (state) => {
-    const { isSignedIn, username } = state.userinfo;
-    return { isSignedIn, username };
-};
-
-const LoginLogoutButtons = connect(
-    mapStateToLoginLogoutButtonProperties
-)(InvisibleLoginLogoutButtons);
-
-export function Footer() {
-    return (
-        <footer className="footer mt-5 bg-dark text-light">
-            <div className="container py-3">
-                <div className="row">
-                    <div className="col-md-6 text-center">
-                        &copy; 2018 turnie.re &middot;
-                        <a className="text-white" href="/privacy"> Datenschutzerklärung </a>
-                        &middot;
-                        <a className="text-white" href="/imprint"> Impressum</a>
-                    </div>
-                    <div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
-                </div>
-            </div>
-        </footer>
-    );
-}
-
-/**
- * This component works just like a switch statement, although the conditions of the first items
- * are checked first, and the first component with a condition that is true will be shown.
- * 
- * For single conditions and options any kind of component can be taken, while the Option-component
- * is dedicated for this job. The only important thing is that this component has to have a condition property.
- *
- * You should also give a default option with a condition that always evaluates to true.
- *
- * A quick example would be some content that is only to be shown when the user is logged in:
- *
- * function SomeRestrictedContent(props) {
- *     const { isSignedIn } = props;
- *     
- *     return (
- *         <UserRestrictor>
- *             <Option condition={isSignedIn}>
- *                 < The restricted content >
- *             </Option>
- *             <Option condition={true}>
- *                 < Some default content; in this case some kind of login >
- *             </Option>
- *         </UserRestrictor>
- *     );
- * }
- *
- * In the example you'll have to note that the default option is at the bottom of all the options
- * since it would always be taken otherwise (the options' conditions are checked from top to bottom)
- */
-export class UserRestrictor extends React.Component {
-
-    render() {
-        const { children } = this.props;
-
-        for(var i in children) {
-            var c = children[i];
-            
-            if(c.props.condition) {
-                return c;
-            }
-        }
-
-        return null;
-    }
-}
-
-export function Option(props) {
-    return props.children;
-}
-
-export function Login(props) {
-    return (
-        <Container className="py-5">
-            <Card className="shadow">
-                <CardBody>
-                    <h1 className="custom-font">Login</h1>
-                    <Hint hint={props.hint}/>
-                    <LoginForm/>
-                    <div className="mt-3">
-                        <a href="/register" className="mr-3">Account anlegen</a>
-                        <a href="/register#account-requirement">Warum ist ein Account nötig?</a>
-                    </div>
-                </CardBody>
-            </Card>
-        </Container>
-    );
-}
-
-class LoginErrorList extends React.Component {
-    render() {
-        const { error, errorMessages } = this.props;
-        if(error) {
-            return (
-                <ul>
-                    { errorMessages.map((message, index) => 
-                        <li key={index}>
-                            <style jsx>{`
-                                li {
-                                    color:red;
-                                }
-                            `}</style>
-                            {message}
-                        </li>
-
-                    ) }
-                </ul>
-            );
-        } else {
-            return null;
-        }
-    }
-}
-
-const mapStateToErrorMessages = (state) => {
-    const { errorMessages, error } = state.userinfo;
-    return { errorMessages, error };
-};
-
-const VisibleLoginErrorList = connect(
-    mapStateToErrorMessages
-)(LoginErrorList);
-
-
-class LoginForm extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            email : '',
-            password : ''
-        };
-    }
-
-    render() {
-        return (
-            <Form>
-                <FormGroup>
-                    <Label for="username">E-Mail-Adresse</Label>
-                    <Input type="email" name="username" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
-                </FormGroup>
-                <FormGroup>
-                    <Label for="password">Passwort</Label>
-                    <Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
-                </FormGroup>
-                <Button onClick={login.bind(this, this.state.email, this.state.password)} color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
-                <VisibleLoginErrorList/>
-            </Form>
-        );
-    }
-
-    handlePasswordInput(input) {
-        this.setState({ password : input.target.value });
-    }
-
-    handleEmailInput(input) {
-        this.setState({ email : input.target.value });
-    }
-}
-
-function Hint(props) {
-    if(props.hint != null) {
-        return (
-            <h3>{ props.hint }</h3>
-        );
-    } else {
-        return null;
-    }
-}
diff --git a/js/components/ErrorComponents.js b/js/components/ErrorComponents.js
index 2e84ee9..8515ec2 100644
--- a/js/components/ErrorComponents.js
+++ b/js/components/ErrorComponents.js
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
-import {Footer, TurniereNavigation} from '../CommonComponents';
+import { TurniereNavigation } from './Navigation';
+import { Footer } from './Footer'
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Container} from 'reactstrap';
 import '../../static/everypage.css';
diff --git a/js/components/Footer.js b/js/components/Footer.js
new file mode 100644
index 0000000..9d39ad7
--- /dev/null
+++ b/js/components/Footer.js
@@ -0,0 +1,19 @@
+
+
+export function Footer() {
+    return (
+        <footer className="footer mt-5 bg-dark text-light">
+            <div className="container py-3">
+                <div className="row">
+                    <div className="col-md-6 text-center">
+                        &copy; 2018 turnie.re &middot;
+                        <a className="text-white" href="/privacy"> Datenschutzerklärung </a>
+                        &middot;
+                        <a className="text-white" href="/imprint"> Impressum</a>
+                    </div>
+                    <div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
+                </div>
+            </div>
+        </footer>
+    );
+}
diff --git a/js/components/Login.js b/js/components/Login.js
new file mode 100644
index 0000000..13861fa
--- /dev/null
+++ b/js/components/Login.js
@@ -0,0 +1,112 @@
+import {
+    Container,
+    Card,
+    CardBody,
+    Form,
+    FormGroup,
+    Label,
+    Input,
+    Button
+} from 'reactstrap';
+import React from 'react';
+import { connect } from 'react-redux';
+import { login } from '../api';
+
+export function Login(props) {
+    return (
+        <Container className="py-5">
+            <Card className="shadow">
+                <CardBody>
+                    <h1 className="custom-font">Login</h1>
+                    <Hint hint={props.hint}/>
+                    <LoginForm/>
+                    <div className="mt-3">
+                        <a href="/register" className="mr-3">Account anlegen</a>
+                        <a href="/register#account-requirement">Warum ist ein Account nötig?</a>
+                    </div>
+                </CardBody>
+            </Card>
+        </Container>
+    );
+}
+
+class LoginErrorList extends React.Component {
+    render() {
+        const { error, errorMessages } = this.props;
+        if(error) {
+            return (
+                <ul>
+                    { errorMessages.map((message, index) => 
+                        <li key={index}>
+                            <style jsx>{`
+                                li {
+                                    color:red;
+                                }
+                            `}</style>
+                            {message}
+                        </li>
+
+                    ) }
+                </ul>
+            );
+        } else {
+            return null;
+        }
+    }
+}
+
+const mapStateToErrorMessages = (state) => {
+    const { errorMessages, error } = state.userinfo;
+    return { errorMessages, error };
+};
+
+const VisibleLoginErrorList = connect(
+    mapStateToErrorMessages
+)(LoginErrorList);
+
+class LoginForm extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            email : '',
+            password : ''
+        };
+    }
+
+    render() {
+        return (
+            <Form>
+                <FormGroup>
+                    <Label for="username">E-Mail-Adresse</Label>
+                    <Input type="email" name="username" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
+                </FormGroup>
+                <FormGroup>
+                    <Label for="password">Passwort</Label>
+                    <Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
+                </FormGroup>
+                <Button onClick={login.bind(this, this.state.email, this.state.password)} color="success" size="lg" className="w-100 shadow-sm">Anmelden</Button>
+                <VisibleLoginErrorList/>
+            </Form>
+        );
+    }
+
+    handlePasswordInput(input) {
+        this.setState({ password : input.target.value });
+    }
+
+    handleEmailInput(input) {
+        this.setState({ email : input.target.value });
+    }
+}
+
+function Hint(props) {
+    if(props.hint != null) {
+        return (
+            <h3>{ props.hint }</h3>
+        );
+    } else {
+        return null;
+    }
+}
diff --git a/js/components/Navigation.js b/js/components/Navigation.js
new file mode 100644
index 0000000..69a5e11
--- /dev/null
+++ b/js/components/Navigation.js
@@ -0,0 +1,97 @@
+import {
+    Badge,
+    Button,
+    ButtonGroup,
+    Collapse,
+    Nav,
+    Navbar,
+    NavbarBrand,
+    NavbarToggler,
+    NavItem,
+    NavLink
+} from 'reactstrap';
+import { connect } from 'react-redux';
+import React from 'react';
+import { login, logout } from '../api';
+
+export class TurniereNavigation extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.toggle = this.toggle.bind(this);
+
+        this.state = {
+            collapsed: true
+        };
+    }
+
+    toggle() {
+        this.setState({
+            collapsed: !this.state.collapsed
+        });
+    }
+
+    render() {
+        return (
+            <Navbar color="light" light expand="lg">
+                <NavbarBrand href="/">turnie.re</NavbarBrand>
+                <Betabadge/>
+                <NavbarToggler onClick={this.toggle} />
+                <Collapse isOpen={!this.state.collapsed} navbar>
+                    <Nav navbar className="mr-auto">
+                        <Navlink target="/create" text="Turnier erstellen"/>
+                        <Navlink target="/list" text="Öffentliche Turniere"/>
+                        <Navlink target="/faq" text="FAQ"/>
+                    </Nav>
+                    <LoginLogoutButtons/>
+                </Collapse>
+            </Navbar>
+        );
+    }
+}
+
+function Navlink(props) {
+    return (
+        <NavItem active={true}>
+            <NavLink href={props.target}>{props.text}</NavLink>
+        </NavItem>
+    );
+}
+
+function Betabadge() {
+    return (<Badge color="danger" className="mr-2">BETA</Badge>);
+}
+
+class InvisibleLoginLogoutButtons extends React.Component {
+
+    render() {
+        const { isSignedIn, username } = this.props;
+
+        if(isSignedIn) {
+            return (
+                <ButtonGroup className="nav-item">
+                    <Button outline color="success"  href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
+                    <Button outline color="success" onClick={logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
+                </ButtonGroup>
+            );
+        } else {
+            return (
+                <ButtonGroup className="nav-item">
+                    <Button outline color="success" href="/login" className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
+                    <Button outline color="success" href="/register" className="navbar-btn my-2 my-sm-0 px-5">Registrieren</Button>
+                </ButtonGroup>
+            );
+        }
+    }
+}
+
+const mapStateToLoginLogoutButtonProperties = (state) => {
+    const { isSignedIn, username } = state.userinfo;
+    return { isSignedIn, username };
+};
+
+const LoginLogoutButtons = connect(
+    mapStateToLoginLogoutButtonProperties
+)(InvisibleLoginLogoutButtons);
+
diff --git a/js/components/UserRestrictor.js b/js/components/UserRestrictor.js
new file mode 100644
index 0000000..84daeb7
--- /dev/null
+++ b/js/components/UserRestrictor.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+/**
+ * This component works just like a switch statement, although the conditions of the first items
+ * are checked first, and the first component with a condition that is true will be shown.
+ * 
+ * For single conditions and options any kind of component can be taken, while the Option-component
+ * is dedicated for this job. The only important thing is that this component has to have a condition property.
+ *
+ * You should also give a default option with a condition that always evaluates to true.
+ *
+ * A quick example would be some content that is only to be shown when the user is logged in:
+ *
+ * function SomeRestrictedContent(props) {
+ *     const { isSignedIn } = props;
+ *     
+ *     return (
+ *         <UserRestrictor>
+ *             <Option condition={isSignedIn}>
+ *                 < The restricted content >
+ *             </Option>
+ *             <Option condition={true}>
+ *                 < Some default content; in this case some kind of login >
+ *             </Option>
+ *         </UserRestrictor>
+ *     );
+ * }
+ *
+ * In the example you'll have to note that the default option is at the bottom of all the options
+ * since it would always be taken otherwise (the options' conditions are checked from top to bottom)
+ */
+export class UserRestrictor extends React.Component {
+
+    render() {
+        const { children } = this.props;
+
+        for(var i in children) {
+            var c = children[i];
+            
+            if(c.props.condition) {
+                return c;
+            }
+        }
+
+        return null;
+    }
+}
+
+export function Option(props) {
+    return props.children;
+}
diff --git a/pages/create.js b/pages/create.js
index 3a25a0b..6fb0992 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -1,6 +1,9 @@
 import Head from 'next/head';
 import '../static/everypage.css';
-import { Footer, TurniereNavigation, UserRestrictor, Option, Login } from '../js/CommonComponents';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer.js';
+import { UserRestrictor, Option } from '../js/components/UserRestrictor';
+import { Login } from '../js/components/Login.js';
 import React from 'react';
 import { connect } from 'react-redux';
 
diff --git a/pages/faq.js b/pages/faq.js
index d747e7d..b00056b 100644
--- a/pages/faq.js
+++ b/pages/faq.js
@@ -2,7 +2,9 @@ import Head from 'next/head';
 import React from 'react';
 import {Col, Container, Row} from 'reactstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer.js';
 import '../static/everypage.css';
 
 import {
diff --git a/pages/imprint.js b/pages/imprint.js
index 34fb942..c0e7628 100644
--- a/pages/imprint.js
+++ b/pages/imprint.js
@@ -2,7 +2,9 @@ import Head from 'next/head';
 import React from 'react';
 import {Container} from 'reactstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer.js';
 import '../static/everypage.css';
 
 import {
diff --git a/pages/index.js b/pages/index.js
index b49f80d..3bcbbd1 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,9 @@ import { Alert, Button, Card, CardBody } from 'reactstrap';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer.js';
 
 import '../static/everypage.css';
 import '../static/css/index.css';
diff --git a/pages/list.js b/pages/list.js
index 200e412..9a3c015 100644
--- a/pages/list.js
+++ b/pages/list.js
@@ -2,7 +2,8 @@ import Head from 'next/head';
 import React from 'react';
 import { Card, CardBody, Container } from 'reactstrap';
 
-import { Footer, TurniereNavigation } from '../js/CommonComponents';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer.js';
 import {
     getRequest,
     getState,
diff --git a/pages/login.js b/pages/login.js
index aa43fa5..6edb1dd 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -1,6 +1,8 @@
 import Head from 'next/head';
 import '../static/everypage.css';
-import { Footer, TurniereNavigation, Login } from '../js/CommonComponents';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer.js';
+import { Login } from '../js/components/Login.js';
 import React from 'react';
 
 import {
diff --git a/pages/privacy.js b/pages/privacy.js
index e4263eb..a5c4250 100644
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -2,7 +2,9 @@ import Head from 'next/head';
 import React from 'react';
 import {Container} from 'reactstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { Footer } from '../js/components/Footer.js';
 import '../static/everypage.css';
 
 import {
diff --git a/pages/register.js b/pages/register.js
index 096d6c1..a5ce015 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import '../static/everypage.css';
-import {Footer, TurniereNavigation} from '../js/CommonComponents';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { Footer } from '../js/components/Footer.js';
 import React from 'react';
 import { Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label } from 'reactstrap';
 import { register } from '../js/api';
diff --git a/pages/tournament-edit.js b/pages/tournament-edit.js
index 1d147c1..2614b19 100644
--- a/pages/tournament-edit.js
+++ b/pages/tournament-edit.js
@@ -5,7 +5,11 @@ import { connect } from 'react-redux';
 import { notify } from 'react-notify-toast';
 
 import { requestTournament } from '../js/api';
-import { BigImage, Footer, TurniereNavigation, Login, UserRestrictor, Option } from '../js/CommonComponents.js';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
+import { UserRestrictor, Option } from '../js/components/UserRestrictor.js';
+import { Footer } from '../js/components/Footer.js';
+import { Login } from '../js/components/Login.js';
 import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
 
 import {
diff --git a/pages/tournament.js b/pages/tournament.js
index 779a0ba..d753724 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -19,8 +19,10 @@ import {
     Table
 } from 'reactstrap';
 import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
+import { Footer } from '../js/components/Footer.js';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
+import { TurniereNavigation } from '../js/components/Navigation';
+import { BigImage } from '../js/components/BigImage';
 import '../static/everypage.css';
 import '../static/css/tournament.css';
 import { connect } from 'react-redux';