diff --git a/api/videoload.php b/api/videoload.php
index 282aff0..fced3d9 100755
--- a/api/videoload.php
+++ b/api/videoload.php
@@ -11,7 +11,7 @@ if (isset($_POST['action'])) {
             $query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date ASC, movie_name ASC";
             if (isset($_POST['tag'])) {
                 $tag = $_POST['tag'];
-                if($_POST['tag'] != "all"){
+                if ($_POST['tag'] != "all") {
                     $query = "SELECT movie_id,movie_name FROM videos 
                             INNER JOIN video_tags vt on videos.movie_id = vt.video_id
                             INNER JOIN tags t on vt.tag_id = t.tag_id
@@ -28,7 +28,7 @@ if (isset($_POST['action'])) {
             echo(json_encode($rows));
             break;
         case "getRandomMovies":
-            $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT ".$_POST['number'];
+            $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT " . $_POST['number'];
             $result = $conn->query($query);
             $rows = array();
             while ($r = mysqli_fetch_assoc($result)) {
@@ -38,13 +38,14 @@ if (isset($_POST['action'])) {
             echo(json_encode($rows));
             break;
         case "loadVideo":
-            $query = "SELECT movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
+            $query = "SELECT movie_name,movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
 
             $result = $conn->query($query);
             $row = $result->fetch_assoc();
 
             $arr = array();
             $arr["thumbnail"] = $row["thumbnail"];
+            $arr["movie_name"] = $row["movie_name"];
             $arr["movie_url"] = $row["movie_url"];
             $arr["likes"] = $row["likes"];
             $arr["quality"] = $row["quality"];
@@ -75,7 +76,6 @@ if (isset($_POST['action'])) {
             echo($row["thumbnail"]);
 
             break;
-
         case "getTags":
             $movieid = $_POST['movieid'];
 
@@ -104,6 +104,52 @@ if (isset($_POST['action'])) {
                 echo('{"result":"' . $conn->error . '"}');
             }
             break;
+        case "getStartData":
+            $query = "SELECT COUNT(*) as nr FROM videos";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+
+            $arr = array();
+            $arr['total'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['tagged'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='hd'";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['hd'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='fullhd'";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['fullhd'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='lowquality'";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['sd'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM tags";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['tags'] = $r['nr'];
+
+            echo(json_encode($arr));
+            break;
     }
 } else {
     echo('{"data":"error"}');
diff --git a/src/App.js b/src/App.js
index d52be75..ec1eb14 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import MainBody from "./MainBody";
 import "./css/App.css"
+import HomePage from "./HomePage";
+import RandomPage from "./RandomPage";
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -15,6 +16,28 @@ class App extends React.Component {
         this.hideVideo = this.hideVideo.bind(this);
     }
 
+    videoelement = null;
+
+    MainBody() {
+        let page;
+        if (this.state.page === "default") {
+            page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            this.mypage = page;
+        } else if (this.state.page === "random") {
+            page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            this.mypage = page;
+        } else if (this.state.page === "video") {
+            // show videoelement if neccessary
+            page = this.videoelement;
+        } else if (this.state.page === "lastpage") {
+            // return back to last page
+            page = this.mypage;
+        } else {
+            page = <div>unimplemented yet!</div>;
+        }
+        return (page);
+    }
+
     render() {
         return (
             <div className="App">
@@ -42,8 +65,7 @@ class App extends React.Component {
                         </li>
                     </ul>
                 </nav>
-                <MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
-                          videoelement={this.element}/>
+                {this.MainBody()}
             </div>
         );
     }
@@ -68,7 +90,7 @@ class App extends React.Component {
             page: "video"
         });
 
-        this.element = element;
+        this.videoelement = element;
     }
 
     hideVideo() {
diff --git a/src/HomePage.js b/src/HomePage.js
index 7b56431..56f222c 100644
--- a/src/HomePage.js
+++ b/src/HomePage.js
@@ -1,6 +1,9 @@
 import React from "react";
 import Preview from "./Preview";
+import SideBar from "./SideBar";
+
 import "./css/HomePage.css"
+import "./css/DefaultPage.css"
 
 class HomePage extends React.Component {
     // stores all available movies
@@ -15,9 +18,10 @@ class HomePage extends React.Component {
             loadeditems: [],
             sideinfo: {
                 videonr: null,
+                fullhdvideonr: null,
                 hdvideonr: null,
                 sdvideonr: null,
-                categorynr: null
+                tagnr: null
             },
             tag: "all"
         };
@@ -27,6 +31,7 @@ class HomePage extends React.Component {
         document.addEventListener('scroll', this.trackScrolling);
         // initial get of all videos
         this.fetchVideoData("all");
+        this.fetchStartData();
     }
 
     // this function clears all preview elements an reloads gravity with tag
@@ -41,7 +46,7 @@ class HomePage extends React.Component {
                 .then((result) => {
                     this.data = result;
                     this.setState({loadeditems: []});
-                    this.loadindex=0;
+                    this.loadindex = 0;
                     this.loadPreviewBlock(12);
                 }))
             .catch(() => {
@@ -49,6 +54,28 @@ class HomePage extends React.Component {
             });
     }
 
+    fetchStartData() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getStartData');
+
+        // fetch all videos available
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({
+                        sideinfo: {
+                            videonr: result['total'],
+                            fullhdvideonr: result['fullhd'],
+                            hdvideonr: result['hd'],
+                            sdvideonr: result['sd'],
+                            tagnr: result['tags']
+                        }});
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+
     componentWillUnmount() {
         this.setState({});
         document.removeEventListener('scroll', this.trackScrolling);
@@ -57,32 +84,26 @@ class HomePage extends React.Component {
     render() {
         return (
             <div>
-                <div><h1>Home page</h1></div>
-                <div className='sideinfo'>
-                    Infos:
-                    <div>Total Number of Videos: {this.state.sideinfo.videonr}</div>
-                    <div>HD Videos: {this.state.sideinfo.hdvideonr}</div>
-                    <div>SD Videos: {this.state.sideinfo.sdvideonr}</div>
-                    <div>Total Number of Categories: {this.state.sideinfo.categorynr}</div>
-
-                    <div>default tags:</div>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("fullhd");
-                    }}>FullHd
-                    </button>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("all");
-                    }}>All
-                    </button>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("lowquality");
-                    }}>LowQuality
-                    </button>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("hd");
-                    }}>HD
-                    </button>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Home Page</span>
+                    <span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
+                    <hr/>
                 </div>
+                <SideBar>
+                    <div className='sidebartitle'>Infos:</div>
+                    <hr/>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
+                    <hr/>
+                    <div className='sidebartitle'>Default Tags:</div>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                </SideBar>
                 <div className='maincontent'>
                     {this.state.loadeditems.map(elem => (
                         <Preview
@@ -122,7 +143,9 @@ class HomePage extends React.Component {
     }
 
     trackScrolling = () => {
-        if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
+        // comparison if current scroll position is on bottom
+        // 200 stands for bottom offset to trigger load
+        if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
             this.loadPreviewBlock(6);
         }
     }
diff --git a/src/MainBody.js b/src/MainBody.js
deleted file mode 100644
index 66019ff..0000000
--- a/src/MainBody.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import HomePage from "./HomePage";
-import RandomPage from "./RandomPage";
-
-class MainBody extends React.Component {
-    constructor(props) {
-        super(props);
-        this.props = props;
-    }
-
-    render() {
-        let page;
-        if (this.props.page === "default") {
-            page = <HomePage viewbinding={this.props.viewbinding}/>;
-            this.mypage = page;
-        } else if (this.props.page === "random"){
-            page = <RandomPage viewbinding={this.props.viewbinding}/>;
-            this.mypage = page;
-        }else if (this.props.page === "video") {
-            // show videoelement if neccessary
-            page = this.props.videoelement;
-        }else if (this.props.page === "lastpage") {
-            // return back to last page
-            page = this.mypage;
-        } else {
-            page = <div>unimplemented yet!</div>;
-        }
-        return (page);
-    }
-}
-
-export default MainBody;
diff --git a/src/Player.js b/src/Player.js
index 1145af3..20c61a0 100644
--- a/src/Player.js
+++ b/src/Player.js
@@ -1,6 +1,7 @@
 import React from "react";
 import "./css/Player.css"
 import {PlyrComponent} from 'plyr-react';
+import SideBar from "./SideBar";
 
 
 class Player extends React.Component {
@@ -36,50 +37,38 @@ class Player extends React.Component {
     render() {
         return (
             <div id='videocontainer'>
-                <div className="row">
-                    <div className="col-sm-2">
-                        <div className="videoleftbanner">
-                            <div className="likefield">Likes: {this.state.likes}</div>
-                            <div className="likefield">Quality: {this.state.quality}p</div>
-                            <div className="likefield">Length in Minutes: {this.state.length}</div>
-                        </div>
-                    </div>
-                    <div className="col-sm-8">
-                        <div className="videowrapper">
-                            <div className='myvideo'>
-                                {this.state.sources ? <PlyrComponent
-                                        sources={this.state.sources}
-                                        options={this.options}/> :
-                                    <div>not loaded yet</div>}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-sm-2">
-                        <div className="closebutton" onClick={() => {
-                            this.closebtn()
-                        }}>Close
-                        </div>
-                        <div className="videorightbanner"></div>
-                    </div>
-                </div>
-                <div className="row">
-                    <div className="col-sm-5">
-
-
-                    </div>
-                    <div className="col-sm-2">
-                        <button className='btn btn-primary' onClick={() => {
-                            this.likebtn()
-                        }}>Like it!
-                        </button>
-                        <button className='btn btn-info' id="tagbutton">Tag it!</button>
-
-                    </div>
-                    <div className="col-sm-5">
-
-
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Watch</span>
+                    <span className='pageheadersubtitle'>{this.state.movie_name}</span>
+                    <hr/>
+                </div>
+                <SideBar>
+                    <div className='sidebartitle'>Infos:</div>
+                    <hr/>
+                    <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
+                    <div className='sidebarinfo'><b> {this.state.quality}p</b> Quality!</div>
+                    <div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
+                    <hr/>
+                    <div className='sidebartitle'>Tags:</div>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                </SideBar>
+
+                <div className="videowrapper">
+                    {/* video component is added here */}
+                    {this.state.sources ? <PlyrComponent
+                            className='myvideo'
+                            sources={this.state.sources}
+                            options={this.options}/> :
+                        <div>not loaded yet</div>}
+                    <div className='videoactions'>
+                        <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
+                        <button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
                     </div>
                 </div>
+                <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
             </div>
         );
     }
@@ -104,6 +93,7 @@ class Player extends React.Component {
                         ],
                         poster: result.thumbnail
                     },
+                    movie_name: result.movie_name,
                     likes: result.likes,
                     quality: result.quality,
                     length: result.length
@@ -131,8 +121,6 @@ class Player extends React.Component {
     }
 
     closebtn() {
-        // todo go back to correct page here!
-        // have a catch to <Route>
         this.props.viewbinding.hideVideo();
     }
 }
diff --git a/src/RandomPage.js b/src/RandomPage.js
index a574ee6..7412280 100644
--- a/src/RandomPage.js
+++ b/src/RandomPage.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Preview from "./Preview";
 import "./css/RandomPage.css"
+import SideBar from "./SideBar";
 
 class RandomPage extends React.Component {
     constructor(props, context) {
@@ -16,31 +17,35 @@ class RandomPage extends React.Component {
     }
 
     render() {
-        return (<div>
-            <div><h1>Random Videos</h1></div>
-            <div className='sideinfo'>
-                todo here.
-            </div>
-            <div className='maincontent'>
-                {this.state.videos.map(elem => (
-                    <Preview
-                        key={elem.movie_id}
-                        name={elem.movie_name}
-                        movie_id={elem.movie_id}
-                        viewbinding={this.props.viewbinding}/>
-                ))}
-            </div>
-            <div className='rightinfo'>
-                right
-            </div>
-            <div className='Shufflebutton'>
-                <button onClick={() => {
-                    this.shuffleclick()
-                }} className='btn btn-success'>Shuffle
-                </button>
-            </div>
+        return (
+            <div>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Random Videos</span>
+                    <span className='pageheadersubtitle'>6pc</span>
+                    <hr/>
+                </div>
+                <SideBar>
+                    <div className='sidebartitle'>Visible Tags:</div>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                </SideBar>
 
-        </div>);
+                <div className='maincontent'>
+                    {this.state.videos.map(elem => (
+                        <Preview
+                            key={elem.movie_id}
+                            name={elem.movie_name}
+                            movie_id={elem.movie_id}
+                            viewbinding={this.props.viewbinding}/>
+                    ))}
+                    <div className='Shufflebutton'>
+                        <button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     shuffleclick() {
diff --git a/src/SideBar.js b/src/SideBar.js
new file mode 100644
index 0000000..5c06447
--- /dev/null
+++ b/src/SideBar.js
@@ -0,0 +1,12 @@
+import React from "react";
+import "./css/SideBar.css"
+
+class SideBar extends React.Component {
+    render() {
+        return (<div className='sideinfo'>
+            {this.props.children}
+        </div>);
+    }
+}
+
+export default SideBar;
diff --git a/src/css/App.css b/src/css/App.css
index c00403f..af62d60 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -1,11 +1,12 @@
-.nav-item{
+.nav-item {
     cursor: pointer;
 }
-.nav-link{
-    color: rgba(255,255,255,.5);
+
+.nav-link {
+    color: rgba(255, 255, 255, .5);
     font-weight: bold;
 }
 
-.nav-link:hover{
-    color: rgba(255,255,255,1);
-}
\ No newline at end of file
+.nav-link:hover {
+    color: rgba(255, 255, 255, 1);
+}
diff --git a/src/css/DefaultPage.css b/src/css/DefaultPage.css
new file mode 100644
index 0000000..5f6d3da
--- /dev/null
+++ b/src/css/DefaultPage.css
@@ -0,0 +1,18 @@
+.pageheader {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding-left: 22%;
+    padding-right: 12%;
+}
+
+.pageheadertitle {
+    font-size: 40pt;
+    font-weight: bold;
+}
+
+.pageheadersubtitle {
+    margin-left: 20px;
+    font-size: 23pt;
+    opacity: 0.6;
+}
+
diff --git a/src/css/HomePage.css b/src/css/HomePage.css
index bf3660e..af62c3d 100644
--- a/src/css/HomePage.css
+++ b/src/css/HomePage.css
@@ -1,14 +1,9 @@
-.sideinfo{
-    width: 20%;
-    float: left;
-}
-
-.maincontent{
+.maincontent {
     float: left;
     width: 70%;
 }
 
-.rightinfo{
+.rightinfo {
     float: left;
     width: 10%;
-}
\ No newline at end of file
+}
diff --git a/src/css/Player.css b/src/css/Player.css
index 0f5b83c..dbbb649 100644
--- a/src/css/Player.css
+++ b/src/css/Player.css
@@ -1,26 +1,14 @@
 .closebutton {
     color: white;
-    height: 35px;
-    width: 90px;
-    margin-right: 80px;
-    float: right;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
     background-color: #FF0000;
-    cursor: pointer;
+    margin-top: 25px;
+    margin-left: 25px;
 }
 
-.myvideo {
-    width: 100%;
-    float: left;
-}
-
-.videoleftbanner{
-    float: left;
-    width: 100%;
-    height: 100%;
-    background-color: #e5e5ff;
-    border-radius: 40px;
-}
-.likefield{
+.likefield {
     margin-top: 15px;
     margin-left: 15px;
     margin-right: 15px;
@@ -29,5 +17,16 @@
     border-radius: 10px;
     text-align: center;
     color: white;
-
+}
+
+.videowrapper {
+    margin-left: 20px;
+    display: block;
+    float: left;
+    width: 60%;
+    margin-top: 25px;
+}
+
+.videoactions{
+    margin-top: 15px;
 }
diff --git a/src/css/Preview.css b/src/css/Preview.css
index 863f7c1..8b4ae62 100644
--- a/src/css/Preview.css
+++ b/src/css/Preview.css
@@ -1,7 +1,8 @@
 .previewtitle {
     height: 10%;
-    color: white;
+    color: #3d3d3d;
     text-align: center;
+    font-weight: bold;
 }
 
 .previewpic {
@@ -17,8 +18,10 @@
     height: 300px;
     width: 30%;
     float: left;
-    margin: 1%;
-    background-color: #7F7F7F;
+    margin-left: 25px;
+    margin-top: 25px;
+    /*background-color: #7F7F7F;*/
+    background-color: #a8c3ff;
     cursor: pointer;
     opacity: 0.9;
     border: 10px;
@@ -29,10 +32,3 @@
     opacity: 1;
     transition: opacity 0.5s;
 }
-
-/* todo check if neccessary*/
-.previewcontainer {
-    margin-left: 10%;
-    width: 80%;
-    margin-right: 10%;
-}
diff --git a/src/css/RandomPage.css b/src/css/RandomPage.css
index d8a06ac..d6a2e15 100644
--- a/src/css/RandomPage.css
+++ b/src/css/RandomPage.css
@@ -1,4 +1,21 @@
-.Shufflebutton{
+.Shufflebutton {
     width: 100%;
     align-content: center;
-}
\ No newline at end of file
+}
+
+.btnshuffle{
+    background-color: #39a945;
+
+    color: white;
+    margin-top: 20px;
+    margin-left: 45%;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 25px 15px 25px;
+    font-weight: bold;
+    font-size: larger;
+}
+
+.btnshuffle:focus{
+    outline: none;
+}
diff --git a/src/css/SideBar.css b/src/css/SideBar.css
new file mode 100644
index 0000000..3083984
--- /dev/null
+++ b/src/css/SideBar.css
@@ -0,0 +1,43 @@
+.sideinfo {
+    width: 20%;
+    float: left;
+    padding: 20px;
+    margin-top: 25px;
+    margin-left: 15px;
+    background-color: #b4c7fe;
+    border-radius: 20px;
+    border: 2px #3574fe solid;
+}
+
+.tagbtn {
+    color: white;
+    margin: 10px;
+    background-color: #3574fe;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
+    /*font-weight: bold;*/
+    display: block;
+}
+
+.tagbtn:focus {
+    background-color: #004eff;
+    outline: none;
+}
+
+.tagbtn:hover {
+    background-color: #004eff;
+}
+
+.sidebartitle {
+    font-weight: bold;
+    font-size: larger;
+}
+
+.sidebarinfo {
+    margin-top: 5px;
+    background-color: #8ca3fc;
+    border-radius: 5px;
+    padding: 2px 10px 2px 15px;
+    width: 60%;
+}
diff --git a/src/index.js b/src/index.js
index b2bd394..b8d3abb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,10 +5,10 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <React.StrictMode>
+        <App/>
+    </React.StrictMode>,
+    document.getElementById('root')
 );
 
 // If you want your app to work offline and load faster, you can change
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index b04b771..e583a40 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -11,131 +11,131 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+    window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
 );
 
 export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+        // The URL constructor is available in all browsers that support SW.
+        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+        if (publicUrl.origin !== window.location.origin) {
+            // Our service worker won't work if PUBLIC_URL is on a different origin
+            // from what our page is served on. This might happen if a CDN is used to
+            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+            return;
+        }
 
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+        window.addEventListener('load', () => {
+            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+            if (isLocalhost) {
+                // This is running on localhost. Let's check if a service worker still exists or not.
+                checkValidServiceWorker(swUrl, config);
 
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
+                // Add some additional logging to localhost, pointing developers to the
+                // service worker/PWA documentation.
+                navigator.serviceWorker.ready.then(() => {
+                    console.log(
+                        'This web app is being served cache-first by a service ' +
+                        'worker. To learn more, visit https://bit.ly/CRA-PWA'
+                    );
+                });
+            } else {
+                // Is not localhost. Just register service worker
+                registerValidSW(swUrl, config);
+            }
         });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
+    }
 }
 
 function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
+    navigator.serviceWorker
+        .register(swUrl)
+        .then(registration => {
+            registration.onupdatefound = () => {
+                const installingWorker = registration.installing;
+                if (installingWorker == null) {
+                    return;
+                }
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === 'installed') {
+                        if (navigator.serviceWorker.controller) {
+                            // At this point, the updated precached content has been fetched,
+                            // but the previous service worker will still serve the older
+                            // content until all client tabs are closed.
+                            console.log(
+                                'New content is available and will be used when all ' +
+                                'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                            );
 
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+                            // Execute callback
+                            if (config && config.onUpdate) {
+                                config.onUpdate(registration);
+                            }
+                        } else {
+                            // At this point, everything has been precached.
+                            // It's the perfect time to display a
+                            // "Content is cached for offline use." message.
+                            console.log('Content is cached for offline use.');
 
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+                            // Execute callback
+                            if (config && config.onSuccess) {
+                                config.onSuccess(registration);
+                            }
+                        }
+                    }
+                };
+            };
+        })
+        .catch(error => {
+            console.error('Error during service worker registration:', error);
+        });
 }
 
 function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+        headers: {'Service-Worker': 'script'},
     })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
+        .then(response => {
+            // Ensure service worker exists, and that we really are getting a JS file.
+            const contentType = response.headers.get('content-type');
+            if (
+                response.status === 404 ||
+                (contentType != null && contentType.indexOf('javascript') === -1)
+            ) {
+                // No service worker found. Probably a different app. Reload the page.
+                navigator.serviceWorker.ready.then(registration => {
+                    registration.unregister().then(() => {
+                        window.location.reload();
+                    });
+                });
+            } else {
+                // Service worker found. Proceed as normal.
+                registerValidSW(swUrl, config);
+            }
+        })
+        .catch(() => {
+            console.log(
+                'No internet connection found. App is running in offline mode.'
+            );
+        });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then(registration => {
-        registration.unregister();
-      })
-      .catch(error => {
-        console.error(error.message);
-      });
-  }
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.ready
+            .then(registration => {
+                registration.unregister();
+            })
+            .catch(error => {
+                console.error(error.message);
+            });
+    }
 }