diff --git a/src/components/items/InspirationWindow.vue b/src/components/items/InspirationWindow.vue
index f52c9f1..ffd1611 100644
--- a/src/components/items/InspirationWindow.vue
+++ b/src/components/items/InspirationWindow.vue
@@ -1,31 +1,43 @@
 <template>
-   <div class="inspirationDiv">
-      <div class="inspirationTitle">
-         <h1>Inspiration</h1>
-      </div>
-      <transition-group
-         tag="ul"
-         name="inspirationList"
-         class="inspirationList"
-         ref="inspirationList"
-      >
-         <li v-for="game in allGamesList" class="inspirationEntry" :key="game">
-            {{ game }}
-         </li>
-      </transition-group>
-   </div>
+    <div class="inspirationDiv">
+        <div class="inspirationHeader">
+            <div class="inspirationTitle">
+                <h1>Inspiration</h1>
+            </div>
+            <div  class="searchInput">
+                <input
+                    v-model="searchInputText"
+                    type="text"
+                    @input="searchGame()"
+                    ref="inputField"
+                />
+            </div>
+        </div>
+        <transition-group
+            tag="ul"
+            name="inspirationList"
+            class="inspirationList"
+            ref="inspirationList"
+        >
+            <li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
+                {{ game }}
+            </li>
+        </transition-group>
+    </div>
 </template>
 
 <script>
 import arne from '../../arne.js'
 import {mapState} from "vuex";
 export default {
-   data() {
-      return {
-         allGamesList: [],
-         scrollDown: true,
-      };
-   },
+    data() {
+        return {
+            allGamesList: [],
+            showingGamesList: [],
+            scrollDown: true,
+            searchInputText: "",
+        };
+    },
     computed: {
         ...mapState(["reloadGamesList"]),
     },
@@ -37,78 +49,117 @@ export default {
             }
         }
     },
-   methods: {
-      scrollInspiration() {
-         let inspirationListDOM = document.querySelector(".inspirationList");
-         let scrollSpeed = 1;
-         let currentScrollLocation = 0;
+    methods: {
+        searchGame() {
+            this.showingGamesList = [];
+            for (const game of this.allGamesList) {
+                if (this.searchInputText === "" ||
+                    game.toLowerCase().replace(/\s/g, "")
+                        .includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
+                    this.showingGamesList.push(game);
+                }
+            }
+            if (this.searchInputText.replace(/\s/g, "") !== "") {
+                this.showingGamesList.sort((n1, n2) => {
+                    if (n1 > n2) {
+                        return 1;
+                    }
+                    if (n1 < n2) {
+                        return -1;
+                    }
+                    return 0;
+                });
+            }
+        },
+        scrollInspiration() {
+            let inspirationListDOM = document.querySelector(".inspirationList");
+            let scrollSpeed = 1;
+            let currentScrollLocation = 0;
 
-         currentScrollLocation = inspirationListDOM.scrollTop;
-         this.scrollDown
-            ? inspirationListDOM.scrollBy(0, scrollSpeed)
-            : inspirationListDOM.scrollBy(0, -scrollSpeed);
+            currentScrollLocation = inspirationListDOM.scrollTop;
+            this.scrollDown
+                ? inspirationListDOM.scrollBy(0, scrollSpeed)
+                : inspirationListDOM.scrollBy(0, -scrollSpeed);
 
-         if (currentScrollLocation === inspirationListDOM.scrollTop) {
-            this.scrollDown = !this.scrollDown;
-         }
-      },
-       reloadGames() {
-           this.axios({
-               method: "get",
-               url: `${arne.hostname}/music/all`,
-           })
-               .then((response) => {
-                   this.allGamesList = response.data;
-                   this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
-               })
-               .catch(function(error) {
-                   console.log(error);
-               });
-       }
-   },
-   mounted() {
-       this.reloadGames();
-       window.setInterval(() => {
-           this.scrollInspiration();
-       }, 40);
-   },
+            if (currentScrollLocation === inspirationListDOM.scrollTop) {
+                this.scrollDown = !this.scrollDown;
+            }
+        },
+        reloadGames() {
+            this.axios({
+                method: "get",
+                url: `${arne.hostname}/music/all`,
+            })
+                .then((response) => {
+                    this.allGamesList = response.data;
+                    this.searchInputText = "";
+                    this.searchGame();
+                    this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
+                })
+                .catch(function(error) {
+                    console.log(error);
+                });
+        }
+    },
+    mounted() {
+        this.reloadGames();
+        window.setInterval(() => {
+            this.scrollInspiration();
+        }, 40);
+    },
 };
 </script>
 
 <style scoped>
 .inspirationDiv {
-   width: 38vw;
-   height: 20vh;
-   color: white;
+    width: 38vw;
+    height: 20vh;
+    color: white;
 }
 
 .inspirationTitle {
-   display: flex;
-   background-color: #333;
-   height: 5vh;
-   justify-content: center;
-   align-items: center;
+    display: flex;
+    flex: auto;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 5px 10px;
+}
+
+.searchInput {
+    display: flex;
+    flex: auto;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 0 10px;
+}
+
+.inspirationHeader {
+    display: flex;
+    background-color: #333;
+    height: 5vh;
+    justify-content: center;
+    align-items: center;
 }
 
 .inspirationList {
-   display: inline-block;
-   background-color: rgb(66, 66, 66);
-   width: 38vw;
-   height: 22vh;
-   list-style: none;
-   overflow: hidden;
+    display: inline-block;
+    background-color: rgb(66, 66, 66);
+    width: 38vw;
+    height: 22vh;
+    list-style: none;
+    overflow: hidden;
 }
 
 .inspirationEntry {
-   width: 100%;
-   max-width: 38vw;
-   padding: 0.3vh 0.8vh;
-   font-size: 1.2rem;
+    width: 100%;
+    max-width: 38vw;
+    padding: 0.3vh 0.8vh;
+    font-size: 1.2rem;
 }
 
 @media only screen and (max-width: 1000px) {
-   .inspirationDiv {
-      display: none;
-   }
+    .inspirationDiv {
+        display: none;
+    }
 }
 </style>
diff --git a/src/components/items/extraButtons.vue b/src/components/items/extraButtons.vue
index 4f23296..4e54646 100644
--- a/src/components/items/extraButtons.vue
+++ b/src/components/items/extraButtons.vue
@@ -1,109 +1,111 @@
 <template>
-   <div class="extraButtonsDiv">
-      <button @click="resetPlaylist">Reset playlist</button>
-      <button @click="resetPoints">Reset points</button>
-      <button @click="syncGames">Sync games</button>
-      <button @click="startSoundTest">Sound test</button>
-   </div>
+    <div class="extraButtonsDiv">
+        <button @click="resetPlaylist">Reset playlist</button>
+        <button @click="resetPoints">Reset points</button>
+        <button @click="syncGames">Sync games</button>
+        <button @click="startSoundTest">Sound test</button>
+    </div>
 </template>
 
 <script>
 import arne from '../../arne.js'
 export default {
-   data() {
-      return {
-         emptyPlaylist: [],
-      };
-   },
-   methods: {
-      async resetPoints() {
-         this.$store.dispatch("resetPlayerScore");
-         this.$store.dispatch("resetPlayerWelcomed");
-         this.$store.dispatch("setRoundStarted", false);
-      },
-      async resetPlaylist() {
-         await this.APIresetPlaylist();
-         this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
-         this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
-         this.$store.dispatch("setCurrentTrackHidden", false);
-      },
-     async syncGames() {
-         await this.APIsyncGames();
-         await this.APIresetPlaylist();
-         this.$store.dispatch("resetPlayerScore");
-         this.$store.dispatch("resetPlayerWelcomed");
-         this.$store.dispatch("setRoundStarted", false);
-         this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
-         this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
-         this.$store.dispatch("setCurrentTrackHidden", false);
-         this.$store.dispatch("reloadGamesList", true);
-     },
-      startSoundTest() {
-         this.$emit("start-sound-test");
-      },
-      APIresetPlaylist() {
-         return new Promise((resolve, reject) => {
-            this.axios({
-               method: "get",
-               url: `${arne.hostname}/music/reset`,
-            })
-               .then(() => {
-                  resolve();
-               })
-               .catch(function(error) {
-                  console.log(error);
-                  reject();
-               });
-         });
-      },
-       APIsyncGames() {
-         return new Promise((resolve, reject) => {
-            this.axios({
-               method: "get",
-               url: `${arne.hostname}/sync`,
-            })
-               .then(() => {
-                  resolve();
-               })
-               .catch(function(error) {
-                  console.log(error);
-                  reject();
-               });
-         });
-      },
-   },
+    data() {
+        return {
+            emptyPlaylist: [],
+        };
+    },
+    methods: {
+        async resetPoints() {
+            this.$store.dispatch("resetPlayerScore");
+            this.$store.dispatch("resetPlayerWelcomed");
+            this.$store.dispatch("resetPlayerMatchPoint");
+            this.$store.dispatch("setRoundStarted", false);
+        },
+        async resetPlaylist() {
+            await this.APIresetPlaylist();
+            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
+            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
+            this.$store.dispatch("setCurrentTrackHidden", false);
+        },
+        async syncGames() {
+            await this.APIsyncGames();
+            await this.APIresetPlaylist();
+            this.$store.dispatch("resetPlayerScore");
+            this.$store.dispatch("resetPlayerWelcomed");
+            this.$store.dispatch("resetPlayerMatchPoint");
+            this.$store.dispatch("setRoundStarted", false);
+            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
+            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
+            this.$store.dispatch("setCurrentTrackHidden", false);
+            this.$store.dispatch("reloadGamesList", true);
+        },
+        startSoundTest() {
+            this.$emit("start-sound-test");
+        },
+        APIresetPlaylist() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${arne.hostname}/music/reset`,
+                })
+                    .then(() => {
+                        resolve();
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIsyncGames() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${arne.hostname}/sync`,
+                })
+                    .then(() => {
+                        resolve();
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+    },
 };
 </script>
 
 <style scoped>
 .extraButtonsDiv {
-   display: flex;
-   margin-top: 2px;
-   margin-left: 10px;
+    display: flex;
+    margin-top: 2px;
+    margin-left: 10px;
 }
 
 button {
-   display: flex;
-   align-items: center;
-   height: 65%;
-   margin-right: 0.4vw;
-   border-radius: 10px;
-   border-width: 1px;
+    display: flex;
+    align-items: center;
+    height: 65%;
+    margin-right: 0.4vw;
+    border-radius: 10px;
+    border-width: 1px;
 }
 
 @media only screen and (max-width: 1000px) {
-   .extraButtonsDiv {
-      display: flex;
-      position: relative;
-      flex-wrap: wrap;
-      justify-content: center;
-   }
+    .extraButtonsDiv {
+        display: flex;
+        position: relative;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
 
-   button {
-      width: 51vw;
-      height: 40px;
-      margin-bottom: 10px;
-      justify-content: center;
-   }
+    button {
+        width: 51vw;
+        height: 40px;
+        margin-bottom: 10px;
+        justify-content: center;
+    }
 }
 </style>
diff --git a/src/components/items/playersWindow.vue b/src/components/items/playersWindow.vue
index 331e825..5dfe650 100644
--- a/src/components/items/playersWindow.vue
+++ b/src/components/items/playersWindow.vue
@@ -1,46 +1,46 @@
 <template>
-   <div class="playersWindowDiv">
-      <div @click="toggleDisplay" class="playerListTitle">
-         <img v-if="display" class="arrow arrowToggle" src="keyboard_arrow_up-black-36dp.svg" />
-         <img v-else class="arrow arrowToggle" src="keyboard_arrow_down-black-36dp.svg" />
-         <h1>Players</h1>
-         <img
-            src="person_add_alt_1-black-36dp.svg"
-            alt="addPlayer"
-            class="addPlayerIMG"
-            @click="toggleNewPlayerInput()"
-         />
-      </div>
-      <transition-group tag="div" v-if="display" name="playerList" class="playerList">
-         <div class="player" v-for="player in listOfPlayers" :key="player.playerName">
-            <p>{{ player.playerName }}: {{ player.score }}</p>
+    <div class="playersWindowDiv">
+        <div @click="toggleDisplay" class="playerListTitle">
+            <img v-if="display" class="arrow arrowToggle" src="keyboard_arrow_up-black-36dp.svg" />
+            <img v-else class="arrow arrowToggle" src="keyboard_arrow_down-black-36dp.svg" />
+            <h1>Players</h1>
             <img
-               class="profilePicture"
-               :src="player.profile"
-               @click="openCharacterModal(player.playerName)"
+                src="person_add_alt_1-black-36dp.svg"
+                alt="addPlayer"
+                class="addPlayerIMG"
+                @click="toggleNewPlayerInput()"
             />
-            <button @click="changeScore(player.playerName, 1)">+1</button>
-            <button @click="changeScore(player.playerName, -1)">-1</button>
-            <img
-               src="person_remove-black-36dp.svg"
-               @click="removePlayer(player.playerName)"
-               alt=""
-            />
-         </div>
-         <div class="newPlayerInput" v-if="showNewPlayerInput === true">
-            <input
-               v-model="newPlayerInputText"
-               type="text"
-               @keypress.enter="addNewPlayer()"
-               ref="inputField"
-               placeholder="Player name"
-            />
-            <button @click="addNewPlayer()">Add</button>
-         </div>
-      </transition-group>
-      <winning-modal ref="winningModal"></winning-modal>
-      <character-modal ref="characterModal"></character-modal>
-   </div>
+        </div>
+        <transition-group tag="div" v-if="display" name="playerList" class="playerList">
+            <div class="player" v-for="player in listOfPlayers" :key="player.playerName">
+                <p>{{ player.playerName }}: {{ player.score }}</p>
+                <img
+                    class="profilePicture"
+                    :src="player.profile"
+                    @click="openCharacterModal(player.playerName)"
+                />
+                <button @click="changeScore(player.playerName, 1)">+1</button>
+                <button @click="changeScore(player.playerName, -1)">-1</button>
+                <img
+                    src="person_remove-black-36dp.svg"
+                    @click="removePlayer(player.playerName)"
+                    alt=""
+                />
+            </div>
+            <div class="newPlayerInput" v-if="showNewPlayerInput === true">
+                <input
+                    v-model="newPlayerInputText"
+                    type="text"
+                    @keypress.enter="addNewPlayer()"
+                    ref="inputField"
+                    placeholder="Player name"
+                />
+                <button @click="addNewPlayer()">Add</button>
+            </div>
+        </transition-group>
+        <winning-modal ref="winningModal"></winning-modal>
+        <character-modal ref="characterModal"></character-modal>
+    </div>
 </template>
 
 <script>
@@ -48,298 +48,307 @@ import { mapState } from "vuex";
 import winningModal from "../items/winningModal.vue";
 import characterModal from "../items/characterModal.vue";
 export default {
-   components: {
-      winningModal,
-      characterModal,
-   },
-   data() {
-      return {
-         showNewPlayerInput: false,
-         newPlayerInputText: "",
-         display: true,
-      };
-   },
-   computed: {
-      ...mapState(["listOfPlayers", "winningScore"]),
-   },
-   methods: {
-      removePlayer(playerName) {
-         this.$store.dispatch("removePlayer", playerName);
-      },
-      newPlayerValidation() {
-         /* Validation variables */
-         let errors = [];
-         let newName = this.newPlayerInputText;
+    components: {
+        winningModal,
+        characterModal,
+    },
+    data() {
+        return {
+            showNewPlayerInput: false,
+            newPlayerInputText: "",
+            display: true,
+        };
+    },
+    computed: {
+        ...mapState(["listOfPlayers", "winningScore"]),
+    },
+    methods: {
+        removePlayer(playerName) {
+            this.$store.dispatch("removePlayer", playerName);
+        },
+        newPlayerValidation() {
+            /* Validation variables */
+            let errors = [];
+            let newName = this.newPlayerInputText;
 
-         /* Check for empty value */
-         if (newName.trim() === "") {
-            errors.push("No player name was entered");
-         }
-
-         /* Prepare data of players and check for already entered ones */
-         let copyOfPlayerList = this.listOfPlayers;
-         let arrayOfPlayers = copyOfPlayerList.map((player) => player.playerName.toLowerCase());
-         if (arrayOfPlayers.includes(newName.toLowerCase())) {
-            errors.push("This player already exists");
-         }
-
-         /* Check amount of players */
-         if (arrayOfPlayers.length > 6) {
-            errors.push("Too many players already exists");
-         }
-
-         /* If everything went fine, return an empty  */
-         return errors;
-      },
-      addNewPlayer() {
-         let errors = this.newPlayerValidation();
-         if (errors.length === 0) {
-            this.$store.dispatch("addNewPlayer", this.newPlayerInputText);
-            this.newPlayerInputText = "";
-         } else {
-            console.log(errors);
-         }
-      },
-      toggleNewPlayerInput() {
-         this.showNewPlayerInput = !this.showNewPlayerInput;
-         if (this.showNewPlayerInput === true) {
-            this.$nextTick(() => this.$refs.inputField.focus());
-         }
-      },
-      changeScore(playerName, score) {
-         let payload = {
-            playerName: playerName,
-            score: score,
-         };
-         this.$store.dispatch("changePlayerScore", payload);
-         for (let i = 0; i < this.listOfPlayers.length; i++) {
-            /* If a player received their first point */
-            if (this.listOfPlayers[i].score == 1 && this.listOfPlayers[i].welcomed === false) {
-               let payload = {
-                  playerName: playerName,
-                  welcomeSet: true,
-               };
-               this.$store.dispatch("changePlayerWelcomed", payload);
-               this.$emit("play-welcome-sound");
+            /* Check for empty value */
+            if (newName.trim() === "") {
+                errors.push("No player name was entered");
             }
-            /* If a player won */
-            if (this.listOfPlayers[i].score === this.winningScore) {
-               this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName);
-               this.$emit("play-winning-sound");
+
+            /* Prepare data of players and check for already entered ones */
+            let copyOfPlayerList = this.listOfPlayers;
+            let arrayOfPlayers = copyOfPlayerList.map((player) => player.playerName.toLowerCase());
+            if (arrayOfPlayers.includes(newName.toLowerCase())) {
+                errors.push("This player already exists");
             }
-         }
-      },
-      openCharacterModal(playerName) {
-         this.$refs.characterModal.openModal(playerName);
-      },
-      getProfileSrc(profileToGet) {
-         console.log(this.listOfPlayers[0]);
-         let src = `characters/${profileToGet}`;
-         console.log(src);
-         return src;
-      },
-      toggleDisplay(event) {
-         if (event.target.classList[0] != "addPlayerIMG") {
-            if (window.innerWidth < 600) {
-               this.display = !this.display;
+
+            /* Check amount of players */
+            if (arrayOfPlayers.length > 6) {
+                errors.push("Too many players already exists");
             }
-         }
-      },
-   },
+
+            /* If everything went fine, return an empty  */
+            return errors;
+        },
+        addNewPlayer() {
+            let errors = this.newPlayerValidation();
+            if (errors.length === 0) {
+                this.$store.dispatch("addNewPlayer", this.newPlayerInputText);
+                this.newPlayerInputText = "";
+            } else {
+                console.log(errors);
+            }
+        },
+        toggleNewPlayerInput() {
+            this.showNewPlayerInput = !this.showNewPlayerInput;
+            if (this.showNewPlayerInput === true) {
+                this.$nextTick(() => this.$refs.inputField.focus());
+            }
+        },
+        changeScore(playerName, score) {
+            let payload = {
+                playerName: playerName,
+                score: score,
+            };
+            this.$store.dispatch("changePlayerScore", payload);
+            for (let i = 0; i < this.listOfPlayers.length; i++) {
+                /* If a player received their first point */
+                if (this.listOfPlayers[i].score == 1 && this.listOfPlayers[i].welcomed === false) {
+                    let payload = {
+                        playerName: playerName,
+                        welcomeSet: true,
+                    };
+                    this.$store.dispatch("changePlayerWelcomed", payload);
+                    this.$emit("play-welcome-sound");
+                }
+                /* If a player reach match point */
+                if (this.listOfPlayers[i].score === this.winningScore-1) {
+                    let payload = {
+                        playerName: playerName,
+                        matchPointSet: true,
+                    };
+                    this.$store.dispatch("changePlayerMatchPoint", payload);
+                    this.$emit("play-match-point-sound");
+                }
+                /* If a player won */
+                if (this.listOfPlayers[i].score === this.winningScore) {
+                    this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName);
+                    this.$emit("play-winning-sound");
+                }
+            }
+        },
+        openCharacterModal(playerName) {
+            this.$refs.characterModal.openModal(playerName);
+        },
+        getProfileSrc(profileToGet) {
+            console.log(this.listOfPlayers[0]);
+            let src = `characters/${profileToGet}`;
+            console.log(src);
+            return src;
+        },
+        toggleDisplay(event) {
+            if (event.target.classList[0] != "addPlayerIMG") {
+                if (window.innerWidth < 600) {
+                    this.display = !this.display;
+                }
+            }
+        },
+    },
 };
 </script>
 
 <style scoped>
 .playerList-enter-from,
 .playerList-leave-to {
-   opacity: 0;
+    opacity: 0;
 }
 .playerList-enter-to,
 .playerList-leave-from {
-   opacity: 1;
+    opacity: 1;
 }
 .playerList-enter-active {
-   transition: all 0.5s ease-out;
+    transition: all 0.5s ease-out;
 }
 .playerList-leave-active {
-   position: absolute;
-   transition: all 0.2s ease-in;
+    position: absolute;
+    transition: all 0.2s ease-in;
 }
 .playerList-move {
-   transition: 0.25s;
-   transition-property: transform, opacity;
+    transition: 0.25s;
+    transition-property: transform, opacity;
 }
 .playerList-move.newPlayerInput {
-   transition: 0.2s;
-   transition-property: transform;
+    transition: 0.2s;
+    transition-property: transform;
 }
 /* End of Animation block */
 
 .playersWindowDiv {
-   display: inline-block;
-   width: 38vw;
-   color: white;
+    display: inline-block;
+    width: 38vw;
+    color: white;
 }
 .playerListTitle {
-   display: flex;
-   width: 100%;
-   background-color: #333;
-   height: 5vh;
-   align-content: center;
-   align-items: center;
-   text-align: center;
+    display: flex;
+    width: 100%;
+    background-color: #333;
+    height: 5vh;
+    align-content: center;
+    align-items: center;
+    text-align: center;
 }
 .playerListTitle h1 {
-   text-align: center;
-   position: relative;
-   margin-left: auto;
-   margin-right: auto;
-   flex-grow: 100;
+    text-align: center;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    flex-grow: 100;
 }
 .playerListTitle .addPlayerIMG {
-   justify-self: flex-end;
-   margin-left: auto;
-   margin-right: 5px;
-   flex-grow: 1;
-   filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
+    justify-self: flex-end;
+    margin-left: auto;
+    margin-right: 5px;
+    flex-grow: 1;
+    filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
 }
 .playerListTitle .arrow {
-   flex-grow: 1;
+    flex-grow: 1;
 }
 .playerListTitle .arrowToggle {
-   display: none;
+    display: none;
 }
 .playerList {
-   display: inline-block;
-   background-color: rgb(66, 66, 66);
-   min-height: 37vh;
+    display: inline-block;
+    background-color: rgb(66, 66, 66);
+    min-height: 37vh;
 }
 .playerList .player {
-   display: flex;
-   flex-wrap: nowrap;
-   justify-content: flex-end;
-   width: 38vw;
-   height: 6vh;
-   font-size: 1.8rem;
-   align-content: center;
-   align-items: center;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    width: 38vw;
+    height: 6vh;
+    font-size: 1.8rem;
+    align-content: center;
+    align-items: center;
 }
 
 .playerList .player p {
-   margin-left: 5px;
-   margin-right: auto;
+    margin-left: 5px;
+    margin-right: auto;
 }
 
 .playerList .player .profilePicture {
-   width: 100px;
-   height: 50px;
-   background-color: red;
-   margin-right: 2vw;
-   cursor: pointer;
+    width: 100px;
+    height: 50px;
+    background-color: red;
+    margin-right: 2vw;
+    cursor: pointer;
 }
 
 .playerList .player button {
-   align-content: center;
-   padding: 3px;
-   width: 50px;
-   height: 4vh;
-   margin-right: 0.6vw;
-   line-height: 0;
+    align-content: center;
+    padding: 3px;
+    width: 50px;
+    height: 4vh;
+    margin-right: 0.6vw;
+    line-height: 0;
 }
 
 .playerList .player button:last-of-type {
-   margin-right: 3vw;
+    margin-right: 3vw;
 }
 
 .playerList .player img {
-   margin-right: 5px;
+    margin-right: 5px;
 }
 
 .newPlayerInput {
-   display: flex;
-   width: 38vw;
-   height: 50px;
-   align-items: center;
-   justify-content: center;
-   padding: 5px 0;
-   background-color: rgb(107, 106, 106);
+    display: flex;
+    width: 38vw;
+    height: 50px;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0;
+    background-color: rgb(107, 106, 106);
 }
 
 .newPlayerInput p {
-   font-size: 1.3rem;
-   flex-grow: 1;
-   text-align: center;
+    font-size: 1.3rem;
+    flex-grow: 1;
+    text-align: center;
 }
 
 .newPlayerInput input {
-   height: 70%;
-   width: 250px;
-   font-size: 1.5rem;
-   margin: 0 5px;
-   text-align: center;
+    height: 70%;
+    width: 250px;
+    font-size: 1.5rem;
+    margin: 0 5px;
+    text-align: center;
 }
 
 .newPlayerInput button {
-   margin: 0 10px;
-   height: 80%;
-   align-self: center;
+    margin: 0 10px;
+    height: 80%;
+    align-self: center;
 }
 
 @media only screen and (max-width: 1000px) {
-   .playersWindowDiv {
-      width: 100%;
-   }
-   .playerListTitle {
-      height: 10vw;
-      font-size: 0.8rem;
-   }
-   .playerListTitle .addPlayerIMG {
-      height: 9vw;
-   }
-   .playerListTitle .arrowToggle {
-      display: block;
-      max-height: 100%;
-      left: 0;
-      filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
-   }
-   .playerList {
-      width: 100%;
-      height: 60vw;
-      min-height: 190px;
-      overflow: scroll;
-   }
-   .playerList .player {
-      width: 100vw;
-      height: 12vw;
-      font-size: 1rem;
-   }
-   .playerList .player .profilePicture {
-      width: 60px;
-      height: 30px;
-      margin-right: 1.5vw;
-   }
-   .playerList .player button {
-      align-content: center;
-      padding: 3px;
-      width: 45px;
-      height: 10vw;
-      margin-right: 1vw;
-      line-height: 0;
-   }
+    .playersWindowDiv {
+        width: 100%;
+    }
+    .playerListTitle {
+        height: 10vw;
+        font-size: 0.8rem;
+    }
+    .playerListTitle .addPlayerIMG {
+        height: 9vw;
+    }
+    .playerListTitle .arrowToggle {
+        display: block;
+        max-height: 100%;
+        left: 0;
+        filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
+    }
+    .playerList {
+        width: 100%;
+        height: 60vw;
+        min-height: 190px;
+        overflow: scroll;
+    }
+    .playerList .player {
+        width: 100vw;
+        height: 12vw;
+        font-size: 1rem;
+    }
+    .playerList .player .profilePicture {
+        width: 60px;
+        height: 30px;
+        margin-right: 1.5vw;
+    }
+    .playerList .player button {
+        align-content: center;
+        padding: 3px;
+        width: 45px;
+        height: 10vw;
+        margin-right: 1vw;
+        line-height: 0;
+    }
 
-   .newPlayerInput {
-      width: 100%;
-      height: 30px;
-   }
-   .newPlayerInput input {
-      height: 90%;
-      width: 200px;
-      font-size: 1.2rem;
-   }
-   .newPlayerInput button {
-      margin: 0 10px;
-      height: 40px;
-      border-radius: 2px;
-   }
+    .newPlayerInput {
+        width: 100%;
+        height: 30px;
+    }
+    .newPlayerInput input {
+        height: 90%;
+        width: 200px;
+        font-size: 1.2rem;
+    }
+    .newPlayerInput button {
+        margin: 0 10px;
+        height: 40px;
+        border-radius: 2px;
+    }
 }
 </style>
diff --git a/src/components/items/settingsModal.vue b/src/components/items/settingsModal.vue
index d9a9005..9b6e3ff 100644
--- a/src/components/items/settingsModal.vue
+++ b/src/components/items/settingsModal.vue
@@ -32,6 +32,16 @@
                         />
                         <label for="hideTitle">Hide next track</label>
                     </div>
+                    <div class="checkboxDiv">
+                        <input
+                            type="checkbox"
+                            name="addPlayed"
+                            id="addPlayed"
+                            v-model="checkboxAddPlayed"
+                            @change="updateOptionAddPlayed"
+                        />
+                        <label for="addPlayed">Turn on played to database</label>
+                    </div>
                     <div class="checkboxDiv">
                         <input
                             type="checkbox"
@@ -74,11 +84,12 @@ export default {
             show: false,
             checkboxStopAfterCurrent: false,
             checkboxHideTitle: false,
+            checkboxAddPlayed: false,
             checkboxLowPlayed: false,
         };
     },
     computed: {
-        ...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "lowPlayed"]),
+        ...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "addPlayed", "lowPlayed"]),
     },
     methods: {
         closeModal() {
@@ -99,6 +110,13 @@ export default {
                 this.$store.dispatch("updateHideNextTitle", false);
             }
         },
+        updateOptionAddPlayed() {
+            if (this.checkboxAddPlayed) {
+                this.$store.dispatch("updateAddPlayed", true);
+            } else {
+                this.$store.dispatch("updateAddPlayed", false);
+            }
+        },
         updateOptionLowPlayed() {
             if (this.checkboxLowPlayed) {
                 this.$store.dispatch("updateLowPlayed", true);
@@ -124,6 +142,7 @@ export default {
     mounted() {
         this.checkboxStopAfterCurrent = this.stopAfterCurrent;
         this.checkboxHideTitle = this.hideNextTrack;
+        this.checkboxAddPlayed = this.addPlayed;
         this.checkboxLowPlayed = this.lowPlayed;
     },
 };
diff --git a/src/components/layout/TheFooter.vue b/src/components/layout/TheFooter.vue
index 258e453..f128aca 100644
--- a/src/components/layout/TheFooter.vue
+++ b/src/components/layout/TheFooter.vue
@@ -44,6 +44,7 @@ export default {
             "hideNextTrack",
             "roundStarted",
             "specialTrackIsPlaying",
+            "addPlayed",
             "lowPlayed",
         ]),
     },
@@ -65,6 +66,9 @@ export default {
                 } else {
                     await this.APIgetRandomizedTrack();
                 }
+                if (this.addPlayed) {
+                    await this.APIaddPlayed();
+                }
                 await this.APIaddToQue();
                 trackAddedToQue = true;
             }
@@ -72,8 +76,9 @@ export default {
             this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
             /*          this.$nextTick(() => {}); */
             if (!trackAddedToQue) {
-                await this.APIaddToQue();
+                await this.APIaddPlayed();
             }
+            await this.APIaddToQue();
             await this.APIgetPlaylistHistory();
 
             this.$refs.audioPlayer.play();
@@ -139,6 +144,15 @@ export default {
                 this.$refs.audioPlayer.play();
             });
         },
+        playMatchSound() {
+            this.$refs.audioPlayer.pause();
+            this.currentTrackSrcFile = "sounds/sound0.mp3";
+            this.$store.dispatch("setSpecialTrackIsPlaying", true);
+            this.$nextTick(() => {
+                this.$refs.audioPlayer.currentTime = 0;
+                this.$refs.audioPlayer.play();
+            });
+        },
         playWinningSound() {
             this.$refs.audioPlayer.pause();
             this.currentTrackSrcFile = "sounds/winning.mp3";
@@ -208,6 +222,21 @@ export default {
                     });
             });
         },
+        APIaddPlayed() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${arne.hostname}/music/addPlayed`,
+                })
+                    .then(() => {
+                        resolve(false);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
         APIaddToQue() {
             return new Promise((resolve, reject) => {
                 this.axios({
diff --git a/src/components/layout/TheMain.vue b/src/components/layout/TheMain.vue
index fa9b7c0..986d16f 100644
--- a/src/components/layout/TheMain.vue
+++ b/src/components/layout/TheMain.vue
@@ -1,29 +1,30 @@
 <template>
-   <div class="theMainDiv">
-      <div class="mainFirstRow">
-         <currently-playing></currently-playing>
-         <inspiration-window></inspiration-window>
-      </div>
-      <div class="mainSecondRow">
-         <playlist-history
-            ref="playlistHistory"
-            @play-selected-track="playSelectedTrack"
-         ></playlist-history>
-         <players-window
-            @play-welcome-sound="playWelcomeSound"
-            @play-winning-sound="playWinningSound"
-         ></players-window>
-      </div>
-      <extra-buttons
-         v-if="$parent.displayWhenDesktop"
-         @start-sound-test="startSoundTest"
-      ></extra-buttons>
-      <the-footer
-         ref="theFooter"
-         @scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
-      ></the-footer>
-      <!-- <the-footer ref="theFooter"></the-footer> -->
-   </div>
+    <div class="theMainDiv">
+        <div class="mainFirstRow">
+            <currently-playing></currently-playing>
+            <inspiration-window></inspiration-window>
+        </div>
+        <div class="mainSecondRow">
+            <playlist-history
+                ref="playlistHistory"
+                @play-selected-track="playSelectedTrack"
+            ></playlist-history>
+            <players-window
+                @play-welcome-sound="playWelcomeSound"
+                @play-match-point-sound="playMatchSound"
+                @play-winning-sound="playWinningSound"
+            ></players-window>
+        </div>
+        <extra-buttons
+            v-if="$parent.displayWhenDesktop"
+            @start-sound-test="startSoundTest"
+        ></extra-buttons>
+        <the-footer
+            ref="theFooter"
+            @scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
+        ></the-footer>
+        <!-- <the-footer ref="theFooter"></the-footer> -->
+    </div>
 </template>
 
 <script>
@@ -35,65 +36,68 @@ import extraButtons from "../items/extraButtons.vue";
 import theFooter from "./TheFooter.vue";
 
 export default {
-   components: {
-      currentlyPlaying,
-      playersWindow,
-      playlistHistory,
-      inspirationWindow,
-      extraButtons,
-      theFooter,
-   },
-   methods: {
-      playSelectedTrack(track) {
-         this.$refs.theFooter.playSpecificTrack(track);
-      },
-      scrollToBottomPlaylistHistory() {
-         this.$refs.playlistHistory.scrollToBottom();
-      },
-      startSoundTest() {
-         this.$refs.theFooter.startSoundTest();
-      },
-      playWelcomeSound() {
-         this.$refs.theFooter.playWelcomeSound();
-      },
-      playWinningSound() {
-         this.$refs.theFooter.playWinningSound();
-      },
-   },
+    components: {
+        currentlyPlaying,
+        playersWindow,
+        playlistHistory,
+        inspirationWindow,
+        extraButtons,
+        theFooter,
+    },
+    methods: {
+        playSelectedTrack(track) {
+            this.$refs.theFooter.playSpecificTrack(track);
+        },
+        scrollToBottomPlaylistHistory() {
+            this.$refs.playlistHistory.scrollToBottom();
+        },
+        startSoundTest() {
+            this.$refs.theFooter.startSoundTest();
+        },
+        playWelcomeSound() {
+            this.$refs.theFooter.playWelcomeSound();
+        },
+        playMatchSound() {
+            this.$refs.theFooter.playMatchSound();
+        },
+        playWinningSound() {
+            this.$refs.theFooter.playWinningSound();
+        },
+    },
 };
 </script>
 
 <style scoped>
 .theMainDiv {
-   display: flex;
-   flex-wrap: wrap;
-   width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
 }
 
 .mainFirstRow {
-   display: flex;
-   flex-wrap: nowrap;
-   width: 100%;
-   margin: 0.5vw;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    margin: 0.5vw;
 }
 .mainSecondRow {
-   display: flex;
-   flex-wrap: nowrap;
-   width: 100%;
-   margin: 0 0.5vw;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    margin: 0 0.5vw;
 }
 
 @media only screen and (max-width: 1000px) {
-   .mainFirstRow {
-      margin: 0;
-      margin-top: 0.5vw;
-   }
-   .mainSecondRow {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-      margin: 0;
-      margin-top: 0.5vw;
-   }
+    .mainFirstRow {
+        margin: 0;
+        margin-top: 0.5vw;
+    }
+    .mainSecondRow {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        margin: 0;
+        margin-top: 0.5vw;
+    }
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 25094a8..5970a49 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,6 +30,7 @@ const store = createStore({
             /* Options */
             stopAfterCurrent: true,
             hideNextTrack: true,
+            addPlayed: true,
             lowPlayed: false,
         };
     },
@@ -67,6 +68,9 @@ const store = createStore({
         changePlayerWelcomed(state, payload) {
             state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse;
         },
+        changePlayerMatchPoint(state, payload) {
+            state.listOfPlayers[payload.indexOfPlayer].matchPoint = payload.playerMatchPointTrueOrFalse;
+        },
         changePlayerProfile(state, payload) {
             state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
         },
@@ -76,6 +80,9 @@ const store = createStore({
         resetPlayerWelcomed(state, payload) {
             state.listOfPlayers = payload;
         },
+        resetPlayerMatchPoint(state, payload) {
+            state.listOfPlayers = payload;
+        },
         updateLocalPlaylist(state, payload) {
             state.localPlaylist.push(payload);
         },
@@ -94,6 +101,9 @@ const store = createStore({
         updateHideNextTitle(state, payload) {
             state.hideNextTrack = payload;
         },
+        updateAddPlayed(state, payload) {
+            state.addPlayed = payload;
+        },
         updateLowPlayed(state, payload) {
             state.lowPlayed = payload;
         },
@@ -135,6 +145,7 @@ const store = createStore({
                 playerName: payload,
                 score: 0,
                 welcomed: false,
+                matchPoint: false,
                 profile: "characters/noCharacter.png",
             };
             newPlayerList.push(newPlayer);
@@ -162,6 +173,17 @@ const store = createStore({
                 playerWelcomeTrueOrFalse,
             });
         },
+        changePlayerMatchPoint(context, payload) {
+            let copyOfPlayerList = this.state.listOfPlayers;
+            let indexOfPlayer = copyOfPlayerList.findIndex(
+                (player) => player.playerName === payload.playerName
+            );
+            let playerMatchPointTrueOrFalse = payload.matchPointSet;
+            context.commit("changePlayerMatchPoint", {
+                indexOfPlayer,
+                playerMatchPointTrueOrFalse,
+            });
+        },
         changePlayerProfile(context, payload) {
             let copyOfPlayerList = this.state.listOfPlayers;
             let indexOfPlayer = copyOfPlayerList.findIndex(
@@ -189,6 +211,14 @@ const store = createStore({
             }
             context.commit("resetPlayerWelcomed", copyOfPlayerList);
         },
+        resetPlayerMatchPoint(context) {
+            /* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
+            let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
+            for (let i = 0; i < copyOfPlayerList.length; i++) {
+                copyOfPlayerList[i].matchPoint = false;
+            }
+            context.commit("resetPlayerMatchPoint", copyOfPlayerList);
+        },
         updateLocalPlaylist(context, payload) {
             context.commit("updateLocalPlaylist", payload);
         },
@@ -207,6 +237,9 @@ const store = createStore({
         updateHideNextTitle(context, payload) {
             context.commit("updateHideNextTitle", payload);
         },
+        updateAddPlayed(context, payload) {
+            context.commit("updateAddPlayed", payload);
+        },
         updateLowPlayed(context, payload) {
             context.commit("updateLowPlayed", payload);
         },