diff --git a/components/config/Checkbox.jsx b/components/config/Checkbox.jsx
index 382d040..dc430fb 100644
--- a/components/config/Checkbox.jsx
+++ b/components/config/Checkbox.jsx
@@ -1,17 +1,20 @@
 import React from "react";
 import styles from "../../styles/components/config/Config.module.css";
+import { Config } from "../../util/config";
 
 export class Checkbox extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      activated: "false",
+      activated: false,
     };
+    this.config = new Config()
   }
 
   componentDidMount() {
-    this.setState({ activated: localStorage.getItem(this.props.item) });
+    this.config.load()
+    this.setState({ activated: this.config.get(this.props.item) });
   }
 
   render() {
@@ -25,22 +28,22 @@ export class Checkbox extends React.Component {
         <div className={styles.box}>
           <p
             className={
-              this.state.activated == "true" ? styles.offBox : undefined
+              this.state.activated ? styles.offBox : undefined
             }
             onClick={() => {
-              this.setState({ activated: "false" });
-              localStorage.setItem(this.props.item, "false");
+              this.setState({ activated: false });
+              this.config.set(this.props.item, false);
             }}
           >
             Disable
           </p>
           <p
             className={
-              this.state.activated != "true" ? styles.offBox : undefined
+              !this.state.activated ? styles.offBox : undefined
             }
             onClick={() => {
-              this.setState({ activated: "true" });
-              localStorage.setItem(this.props.item, "true");
+              this.setState({ activated: true });
+              this.config.set(this.props.item, true);
             }}
           >
             Activate
diff --git a/components/config/Mode.jsx b/components/config/Mode.jsx
index e3a8823..102dba8 100644
--- a/components/config/Mode.jsx
+++ b/components/config/Mode.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "../../styles/components/config/Config.module.css";
+import { Config } from "../../util/config";
 
 export class Mode extends React.Component {
   constructor(props) {
@@ -9,12 +10,13 @@ export class Mode extends React.Component {
       values: props.values,
       currentValue: props.values[0],
     };
+    this.config = new Config()
   }
 
   componentDidMount() {
-    if (localStorage.getItem(this.props.item))
-      this.setState({ currentValue: localStorage.getItem(this.props.item) });
-    else localStorage.setItem(this.props.item, this.state.values[0]);
+    this.config.load()
+
+    this.setState({ currentValue: this.config.get(this.props.item) });
   }
 
   render() {
@@ -26,7 +28,7 @@ export class Mode extends React.Component {
           }
           onClick={() => {
             this.setState({ currentValue: value });
-            localStorage.setItem(this.props.item, value);
+            this.config.set(this.props.item, value);
           }}
         >
           {value}
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index 07fd593..cc223e6 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -7,6 +7,8 @@ import { initSounds, playSound } from "../../util/sound/sound-handler.js";
 import { calculate } from "../../util/logic/type-logic.js";
 import { db, auth } from "../../util/firebase/firebase.js";
 
+import { Config } from "../../util/config.js";
+
 export class Input extends React.Component {
   constructor(props) {
     super(props);
@@ -32,7 +34,8 @@ export class Input extends React.Component {
       rawData: [],
       number: [],
     };
-    this.timer = undefined
+    this.timer = undefined;
+    this.config = new Config();
   }
 
   /**
@@ -69,15 +72,13 @@ export class Input extends React.Component {
         }
       }
 
-      if (localStorage.getItem("mode")) {
-        if (localStorage.getItem("mode") !== "Time") {
-          if (
-            this.state.time >=
-            parseInt(localStorage.getItem("mode").substring(0, 2)) * 1000
-          ) {
-            clearInterval(this.timer);
-            await this.handleFinish();
-          }
+      if (this.config.get("mode") !== "Time") {
+        if (
+          this.state.time >=
+          parseInt(this.config.get("mode").substring(0, 2)) * 1000
+        ) {
+          clearInterval(this.timer);
+          await this.handleFinish();
         }
       }
     }, 1);
@@ -85,38 +86,21 @@ export class Input extends React.Component {
 
   /**
    * Sets all states that are important for the component
-   * TODO: Clean this shitty peace of code and
-   * TODO: use a json object in the localstorage
    */
   async setupConfig() {
-    let language = localStorage.getItem("language")
-      ? localStorage.getItem("language")
-      : "english";
-
-    this.state.unit = localStorage.getItem("unit")
-      ? localStorage.getItem("unit")
-      : "WPM";
-
-    if (!localStorage.getItem("mode")) localStorage.setItem("mode", "15s");
-
-    if (localStorage.getItem("mode") !== "Text")
-      this.setState({ timeText: " / " + localStorage.getItem("mode") });
+    let language = this.config.get("language");
 
-    if (!localStorage.getItem("font-size"))
-      localStorage.setItem("font-size", "15px");
+    this.state.unit = this.config.get("unit");
 
-    this.setState({ fontSize: localStorage.getItem("font-size") });
+    if (this.config.get("mode") !== "Text")
+      this.setState({ timeText: " / " + this.config.get("mode") });
 
-    if (!localStorage.getItem("font-family"))
-      localStorage.setItem("font-family", "Arial");
-
-    this.setState({ font: localStorage.getItem("font-family") });
+    this.setState({
+      fontSize: this.config.get("fontSize"),
+      font: this.config.get("fontFamily"),
+    });
 
-    if (
-      localStorage.getItem("input_mode")
-        ? localStorage.getItem("input_mode") == "Quotes"
-        : true
-    ) {
+    if (this.config.get("inputMode") === "Quotes") {
       let quote = await getQuote(language);
 
       this.setState({
@@ -158,12 +142,12 @@ export class Input extends React.Component {
   async handleValidInput(event) {
     if (this.state.index == 0) this.startTimer();
 
-    if (localStorage.getItem("click_sounds") === "true")
+    if (this.config.get("clickSounds"))
       playSound("click_sounds");
 
     if (event.key !== this.state.fullText[this.state.index]) {
       this.setState({ errorCount: this.state.errorCount + 1 });
-      if (localStorage.getItem("error_sounds") === "true")
+      if (this.config.get("errorSounds"))
         playSound("error_sounds");
     }
 
@@ -182,12 +166,11 @@ export class Input extends React.Component {
   }
 
   /**
-   * Handles a restart request by the user, and basically just 
+   * Handles a restart request by the user, and basically just
    * sets all states to the default and inits the config
    */
   handRestart() {
-    if(this.timer) 
-      clearInterval(this.timer)
+    if (this.timer) clearInterval(this.timer);
 
     this.setState({
       index: 0,
@@ -204,10 +187,10 @@ export class Input extends React.Component {
       restartSelected: false,
       wpmData: [],
       rawData: [],
-      number: []
-    })
+      number: [],
+    });
 
-    this.setupConfig()
+    this.setupConfig();
   }
 
   /**
@@ -288,7 +271,7 @@ export class Input extends React.Component {
         else if (event.keyCode == 8 && this.state.index > 0)
           this.handleBackspace();
         else if (event.keyCode == 13 && this.state.restartSelected)
-          this.handRestart()
+          this.handRestart();
         else if (event.keyCode == 9) {
           event.preventDefault();
           this.setState({ restartSelected: true });
diff --git a/pages/config/index.js b/pages/config/index.js
index f883ec0..6919c6f 100644
--- a/pages/config/index.js
+++ b/pages/config/index.js
@@ -1,19 +1,21 @@
 import { Checkbox } from "../../components/config/Checkbox.jsx"
 import { Mode } from "../../components/config/Mode.jsx"
 import MovingLayout from "../../components/layout/Moving-Layout.js"
+import { Config } from "../../util/config";
+
 
 export default function Home() {
   return (
     <>
-      <Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not recommend on Macbook's)" item="error_sounds" />
-      <Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not recommend on Macbook's)" item="click_sounds" />
-      <Mode title="Input Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="input_mode" values={["Words", "Quotes"]} />
+      <Checkbox title="Error Sound" description="If this is enabled, you will hear a sound, every time you type a error. (Not recommend on Macbook's)" item="errorSounds" />
+      <Checkbox title="Click Sound" description="If this is enabled, you will hear a sound, every time you press a key. (Not recommend on Macbook's)" item="clickSounds" />
+      <Mode title="Input Mode" description="If you want to type quotes in you selected language, or just randomly placed words." item="inputMode" values={["Words", "Quotes"]} />
       <Mode title="Unit" description="If you want to see your wpm or your cpm." item="unit" values={["WPM", "CPM"]} />
       <Mode title="Mode" description="If you want to play in time, or just write a text." item="mode" values={["Text", "10s", "15s", "30s", "60s"]} />
       <Mode title="Language" description="The Language, in which you want to type in" item="language" values={["English", "German", "France", "Russia"]} />
-      <Mode title="Font-Size" description="The size of the font" item="font-size" values={["15px", "20px", "25px", "30px"]} />
-      <Mode title="Font" description="The font" item="font-family" values={["'Arial'", "monospace", "'Roboto'", "Source Code Pro"]} />
-   </>
+      <Mode title="Font-Size" description="The size of the font" item="fontSize" values={["15px", "20px", "25px", "30px"]} />
+      <Mode title="Font" description="The font" item="fontFamily" values={["'Arial'", "monospace", "'Roboto'", "Source Code Pro"]} />
+    </>
   )
 }
 
diff --git a/util/config.js b/util/config.js
index 6adec41..15241d6 100644
--- a/util/config.js
+++ b/util/config.js
@@ -1,16 +1,60 @@
-let currentConfig = {
-    mode: "",
-    language: "",
-    clickSounds: false,
-    errorSounds: false
-}
-
-export function load() {
-    if (localStorage.getItem("config"))
-        this.currentConfig = JSON.parse(localStorage.getItem("config"))
-    else this.save()
-}
-
-export function save() {
-    localStorage.setItem("config", currentConfig)
+export class Config {
+    constructor() {
+        this.currentConfig = new Map()
+    }
+
+    /**
+     * Sets a value instantly saves the config
+     */
+    set(key, value) {
+        this.load()
+        this.currentConfig.set(key, value)
+        this.save()
+    }
+
+    /**
+     * Gets a value from the config
+     */
+    get(key) {
+        this.load()
+        return this.currentConfig.get(key)
+    }
+
+    /**
+     * Saves the current config, or if no config is loaded, 
+     * it loads the default config
+     */
+    save() {
+        localStorage.clear()
+
+        if (this.currentConfig.size !== 0) {
+            localStorage.setItem("config", JSON.stringify(Object.fromEntries(this.currentConfig)))
+
+            console.log("gg ")
+            console.log(this.currentConfig)
+        } else {
+
+            console.log("fff")
+
+            // Loading the default config here
+            this.currentConfig.set("inputMode", "words")
+            this.currentConfig.set("language", "english")
+            this.currentConfig.set("clickSounds", false)
+            this.currentConfig.set("errorSounds", false)
+            this.currentConfig.set("unit", "wpm")
+            this.currentConfig.set("mode", "15s")
+            this.currentConfig.set("fontSize", "30px")
+            this.currentConfig.set("fontFamily", "Source Code Pro")
+            localStorage.setItem("config", JSON.stringify(Object.fromEntries(this.currentConfig)))
+        }
+    }
+
+    /**
+     * Loads the Config
+     */
+    load() {
+        if (localStorage.getItem("config") !== null)
+            this.currentConfig = new Map(Object.entries(JSON.parse(localStorage.getItem("config"))))
+        else this.save()
+    }
 }
\ No newline at end of file