diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
new file mode 100644
index 0000000..e33d38f
--- /dev/null
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+class GeneralSettings extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    render() {
+        return (
+            <>
+                Generalsettings here
+            </>
+        );
+    }
+}
+
+export default GeneralSettings;
\ No newline at end of file
diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js
new file mode 100644
index 0000000..88d2f6a
--- /dev/null
+++ b/src/pages/SettingsPage/GeneralSettings.test.js
@@ -0,0 +1,20 @@
+import {shallow} from "enzyme";
+import React from "react";
+import GeneralSettings from "./GeneralSettings";
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise,
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<GeneralSettings/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<GeneralSettings/>);
+        wrapper.unmount();
+    });
+
+    
+});
diff --git a/src/pages/SettingsPage/MovieSettings.js b/src/pages/SettingsPage/MovieSettings.js
new file mode 100644
index 0000000..5ff54aa
--- /dev/null
+++ b/src/pages/SettingsPage/MovieSettings.js
@@ -0,0 +1,77 @@
+import React from "react";
+
+class MovieSettings extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            text: []
+        };
+    }
+
+    componentDidMount() {
+        if (this.myinterval) {
+            clearInterval(this.myinterval);
+        }
+        this.myinterval = setInterval(this.updateStatus, 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.myinterval);
+    }
+
+    render() {
+        return (
+            <>
+                <button className='reindexbtn btn btn-success' onClick={() => {
+                    this.startReindex()
+                }}>Reindex Movies
+                </button>
+                <div className='indextextarea'>{this.state.text.map(m => (
+                    <div className='textarea-element'>{m}</div>
+                ))}</div>
+            </>
+        );
+    }
+
+    startReindex() {
+        console.log("starting");
+        const updateRequest = new FormData();
+        // fetch all videos available
+        fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    console.log("returned");
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+        if (this.myinterval) {
+            clearInterval(this.myinterval);
+        }
+        this.myinterval = setInterval(this.updateStatus, 1000);
+        console.log("sent");
+    }
+
+    updateStatus = () => {
+        const updateRequest = new FormData();
+        fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    if (result.contentAvailable === true) {
+                        console.log(result);
+                        this.setState({
+                            text: [...result.message.split("\n"),
+                                ...this.state.text]
+                        });
+                    } else {
+                        clearInterval(this.myinterval);
+                    }
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    };
+}
+
+export default MovieSettings;
\ No newline at end of file
diff --git a/src/pages/SettingsPage/MovieSettings.test.js b/src/pages/SettingsPage/MovieSettings.test.js
new file mode 100644
index 0000000..61d7821
--- /dev/null
+++ b/src/pages/SettingsPage/MovieSettings.test.js
@@ -0,0 +1,20 @@
+import {shallow} from "enzyme";
+import React from "react";
+import MovieSettings from "./MovieSettings";
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise,
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<MovieSettings/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<MovieSettings/>);
+        wrapper.unmount();
+    });
+
+
+});
diff --git a/src/pages/SettingsPage/SettingsPage.css b/src/pages/SettingsPage/SettingsPage.css
new file mode 100644
index 0000000..216e5e2
--- /dev/null
+++ b/src/pages/SettingsPage/SettingsPage.css
@@ -0,0 +1,39 @@
+.SettingsSidebar {
+    padding-top: 20px;
+    float: left;
+    width: 10%;
+    background-color: #d3dcef;
+    min-height: calc(100vh - 56px);
+    min-width: 110px;
+}
+
+.SettingsSidebarTitle {
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: larger;
+    margin-bottom: 25px;
+}
+
+.SettingsContent {
+    float: left;
+    width: 80%;
+    padding-left: 30px;
+    padding-top: 30px;
+}
+
+.SettingSidebarElement {
+    margin: 10px 5px 5px;
+    padding: 5px;
+    background-color: #a8b2de;
+    text-align: center;
+    font-weight: bold;
+}
+
+.SettingSidebarElement:hover {
+    font-weight: bolder;
+    background-color: #7d8dd4;
+    box-shadow: #7d8dd4 0 0 0 5px;
+    transition: all 300ms;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index 776dae8..44aa747 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/src/pages/SettingsPage/SettingsPage.js
@@ -1,82 +1,50 @@
 import React from "react";
-import PageTitle from "../../elements/PageTitle/PageTitle";
+import MovieSettings from "./MovieSettings";
+import GeneralSettings from "./GeneralSettings";
+import "./SettingsPage.css"
 
 
 class SettingsPage extends React.Component {
     constructor(props, context) {
         super(props, context);
+
         this.state = {
-            text: []
+            currentpage: "general"
         };
     }
 
-    updateStatus = () => {
-        const updateRequest = new FormData();
-        fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    if (result.contentAvailable === true) {
-                        console.log(result);
-                        this.setState({
-                            text: [...result.message.split("\n"),
-                                ...this.state.text]
-                        });
-                    } else {
-                        clearInterval(this.myinterval);
-                    }
-                }))
-            .catch(() => {
-                console.log("no connection to backend");
-            });
-    };
-
-    componentDidMount() {
-        if (this.myinterval) {
-            clearInterval(this.myinterval);
+    getContent() {
+        switch (this.state.currentpage) {
+            case "general":
+                return <GeneralSettings/>;
+            case "movies":
+                return <MovieSettings/>;
+            default:
+                return "unknown button clicked";
         }
-        this.myinterval = setInterval(this.updateStatus, 1000);
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.myinterval);
     }
 
     render() {
         return (
             <div>
-                <PageTitle
-                    title='Settings Page'
-                    subtitle='todo'/>
-
-                <button className='reindexbtn btn btn-success' onClick={() => {
-                    this.startReindex()
-                }}>Reindex Movies
-                </button>
-                <div className='indextextarea'>{this.state.text.map(m => (
-                    <div className='textarea-element'>{m}</div>
-                ))}</div>
+                <div className='SettingsSidebar'>
+                    <div className='SettingsSidebarTitle'>Settings</div>
+                    <div onClick={() => this.setState({currentpage: "general"})}
+                         className='SettingSidebarElement'>General
+                    </div>
+                    <div onClick={() => this.setState({currentpage: "movies"})}
+                         className='SettingSidebarElement'>Movies
+                    </div>
+                    <div onClick={() => this.setState({currentpage: "tv"})}
+                         className='SettingSidebarElement'>TV Shows
+                    </div>
+                </div>
+                <div className='SettingsContent'>
+                    {this.getContent()}
+                </div>
             </div>
         );
     }
-
-    startReindex() {
-        console.log("starting");
-        const updateRequest = new FormData();
-        // fetch all videos available
-        fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    console.log("returned");
-                }))
-            .catch(() => {
-                console.log("no connection to backend");
-            });
-        if (this.myinterval) {
-            clearInterval(this.myinterval);
-        }
-        this.myinterval = setInterval(this.updateStatus, 1000);
-        console.log("sent");
-    }
 }
 
 export default SettingsPage;