diff --git a/frontend/static/css/game.css b/frontend/static/css/game.css
index 2435b4d..ee729c9 100644
--- a/frontend/static/css/game.css
+++ b/frontend/static/css/game.css
@@ -5,3 +5,4 @@
     margin-left: auto;
     margin-right: auto;
 }
+
diff --git a/frontend/static/css/gameOffline.css b/frontend/static/css/gameOffline.css
new file mode 100644
index 0000000..afcbed8
--- /dev/null
+++ b/frontend/static/css/gameOffline.css
@@ -0,0 +1,19 @@
+#gameCanvas {
+	display: block;
+}
+
+#up1:active, #down1:active, #up2:active, #down2:active {
+	color: red;
+}
+
+#up1, #down1, #up2, #down2 {
+	min-height: 60px;
+	min-width: 60px;
+
+	font-size: 40px;
+}
+
+#up2, #down2 {
+	position: relative;
+	float: right;
+}
diff --git a/frontend/static/js/views/GameOfflineView.js b/frontend/static/js/views/GameOfflineView.js
index 1ffc414..bf49e01 100644
--- a/frontend/static/js/views/GameOfflineView.js
+++ b/frontend/static/js/views/GameOfflineView.js
@@ -1,6 +1,6 @@
-import AbstractView from "./abstracts/AbstractView.js";
+import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
 
-export default class extends AbstractView {
+export default class extends AbstractAuthenticatedView {
 	constructor(params) {
 		super(params, 'Game');
 		this.game = null;
@@ -10,6 +10,7 @@ export default class extends AbstractView {
 
 	async getHtml() {
 		return `
+			<link rel="stylesheet" href="/static/css/gameOffline.css">
 			<h1>Game</h1>
 			<button id='startGameButton'>Start Game</button>
 			<button id='stopGameButton'>Stop Game</button>
@@ -18,8 +19,10 @@ export default class extends AbstractView {
 	}
 
 	async postInit() {
+		this.app = document.getElementById("app");
 		document.getElementById('startGameButton').onclick = this.startGame.bind(this);
 		document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
+		document.getElementById('stopGameButton').hidden = 1;
 		document.getElementById('startTournament').onclick = this.startTournament.bind(this);
 	}
 
@@ -30,28 +33,56 @@ export default class extends AbstractView {
 	startTournament() {
 		let startTournament = document.getElementById("startTournament");
 		let player1 = document.createElement("input");
-		player1.id="player1"; player1.type="text"; player1.name="message"; player1.placeholder="Player 1"; player1.maxLength=20;
+		player1.id="player1"; player1.type="text"; player1.name="message"; player1.placeholder="Player 1"; player1.maxLength=20; player1.value = "";
 		startTournament.before(player1);
 
 		let player2 = document.createElement("input");
-		player2.id="player2"; player2.type="text"; player2.name="message"; player2.placeholder="Player 2"; player2.maxLength=20;
+		player2.id="player2"; player2.type="text"; player2.name="message"; player2.placeholder="Player 2"; player2.maxLength=20; player2.value = "";
 		player1.after(player2);
 
+		/*let player3 = document.createElement("input");
+		player3.id="player3"; player3.type="text"; player3.name="message"; player3.placeholder="Player 3"; player3.maxLength=20;
+		player2.after(player3);
+
+		let player4 = document.createElement("input");
+		player4.id="player4"; player4.type="text"; player4.name="message"; player4.placeholder="Player 4"; player4.maxLength=40;
+		player3.after(player4);*/
+
 		startTournament.onclick = () => {
 			if (player1.value.length > 0)
 				this.player1 = player1.value;
 			if (player2.value.length > 0)
 				this.player2 = player2.value;
-			this.startGame();
+			/*if (player3.value.length > 0)
+				this.player3 = player3.value;
+			if (player4.value.length > 0)
+				this.player4 = player4.value;*/
+
+			player1.remove();
+			player2.remove();
+
+			this.startGame(this.player1, this.player2);
+			startTournament.onclick = this.startTournament.bind(this);
 		}
 	}
 
 	createButton()
 	{
 		this.up1 = document.createElement("button");
+		this.up1.textContent = "↑";
+		this.up1.id = "up1";
+
 		this.down1 = document.createElement("button");
+		this.down1.textContent = "↓";
+		this.down1.id = "down1";
+
 		this.up2 = document.createElement("button");
+		this.up2.textContent = "↑";
+		this.up2.id = "up2";
+
 		this.down2 = document.createElement("button");
+		this.down2.textContent = "↓";
+		this.down2.id = "down2";
 
 		this.up1.setAttribute("user_id", 1);
 		this.up1.setAttribute("direction", "up");
@@ -63,45 +94,51 @@ export default class extends AbstractView {
 		this.down2.setAttribute("user_id", 2);
 		this.down2.setAttribute("direction", "down");
 
+		document.addEventListener('touchstart', this.keyDownHandler);
+		document.addEventListener('touchend', this.keyUpHandler);
 		[this.up1, this.up2, this.down1, this.down2].forEach(button => {
 			button.onmousedown = this.game.keyDownHandler.bind(this.game);
 			button.onmouseup = this.game.keyUpHandler.bind(this.game);
+			button.ontouchstart = this.game.keyDownHandler.bind(this.game);
+			button.ontouchend = this.game.keyUpHandler.bind(this.game);
 		});
 
-		document.getElementById("app").append(this.up1, this.down1, this.up2, this.down2);
-
+		document.getElementById("gameCanvas").after(this.up2, this.down2);
+		document.getElementById("gameCanvas").after(this.up1, this.down1);
 	}
 
-	destroyButton()
-	{
-		[this.up1, this.up2, this.down1, this.down2].forEach(button => {
-			button.remove();
-		});
-	}
-
-	startGame() {
+	startGame(player1, player2) {
+		if (player1 == null || player2 == null) {
+			player1 = this.player1;
+			player2 = this.player2;
+		}
 		if (this.game == null) {
 			document.getElementById('startGameButton').innerHTML = 'Reset Game';
-			this.game = new Game(this.player1, this.player2);
+			this.game = new Game(player1, player2);
 			this.createButton();
 		}
 		else {
-			document.getElementById('app').removeChild(this.game.canvas);
-			document.getElementById('app').removeChild(this.game.scoresDisplay);
+			this.app.removeChild(this.game.canvas);
+			this.app.removeChild(this.game.scoresDisplay);
 			this.game.cleanup();
-			this.game = new Game(this.player1, this.player2);
+			this.game = new Game(player1, player2);
+			this.createButton();
 		}
+		document.getElementById('startTournament').hidden = 1;
+		document.getElementById('stopGameButton').hidden = 0;
 	}
 
 	stopGame() {
 		if (!this.game)
 			return;
-		document.getElementById('app').removeChild(this.game.canvas);
-		document.getElementById('app').removeChild(this.game.scoresDisplay);
+		this.app.removeChild(this.game.canvas);
+		this.app.removeChild(this.game.scoresDisplay);
 		this.game.cleanup();
 		this.game = null;
-		this.destroyButton();
 		document.getElementById('startGameButton').innerHTML = 'Start Game';
+		document.getElementById('startTournament').hidden = 0;
+		document.getElementById('stopGameButton').hidden = 1;
+		this.app.style.maxWidth = null;
 	}
 }
 
@@ -119,9 +156,15 @@ class Game {
 			BALLSPEED: 2,
 			BALLSPEEDINCR: 0.15,
 			MAXBOUNCEANGLE: 10 * (Math.PI / 12),
-			MAXSCORE: 1
+			MAXSCORE: 0
 		};
 
+		this.app = document.getElementById("app");
+		this.app.style.maxWidth = Number(this.def.CANVASWIDTH) + "px";
+
+		this.player1 = player1;
+		this.player2 = player2;
+
 		this.canvas = document.createElement('canvas');
 		this.canvas.id = 'gameCanvas';
 		this.canvas.width = this.def.CANVASWIDTH;
@@ -129,12 +172,10 @@ class Game {
 		this.canvas.style.border = '1px solid #d3d3d3';
 		this.canvas.style.backgroundColor = '#f1f1f1';
 		this.context = this.canvas.getContext('2d');
-		document.getElementById('app').appendChild(this.canvas);
+		this.app.appendChild(this.canvas);
 		this.scoresDisplay = document.createElement('p');
-		this.scoresDisplay.innerHTML = 'Scores: 0 - 0';
-		document.getElementById('app').appendChild(this.scoresDisplay);
-		this.player1 = player1;
-		this.player2 = player2;
+		this.scoresDisplay.innerHTML = `${this.player1}: 0 - ${this.player2}: 0`;
+		this.app.appendChild(this.scoresDisplay);
 
 		this.players = [
 			{
@@ -169,6 +210,10 @@ class Game {
 		document.removeEventListener('keydown', this.keyDownHandler);
 		document.removeEventListener('keyup', this.keyUpHandler);
 		this.canvas.style.display = 'none';
+		["up1", "up2", "down1", "down2", "player1", "player2"].forEach(button => {
+			if (document.getElementById(button) != null)
+				document.getElementById(button).remove();
+		});
 	}
 
 	clear() {
@@ -177,10 +222,14 @@ class Game {
 
 	updateGame() {
 		//Paddle movement
+		/*let log = document.getElementById("log");
+		console.log(log);
+		log.setAttribute("log", this.keys)
+		log.innerText = "keys: " + log.getAttribute("log");*/
 		if ((this.keys.includes('s') || this.keys.includes('down1')) &&
 			this.players[0].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
 				this.players[0].paddle.y += this.def.PADDLESPEED;
-		if ((this.keys.includes('2') || this.keys.includes('up1')) &&
+		if ((this.keys.includes('w') || this.keys.includes('up1')) &&
 			this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
 				this.players[0].paddle.y -= this.def.PADDLESPEED;
 
@@ -228,7 +277,7 @@ class Game {
 			this.scoresDisplay.innerHTML = this.player2 + ' wins!! GGS';
 			this.cleanup();
 		} else {
-			this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;
+			this.scoresDisplay.innerHTML = `${this.player1}: ${p1Score} - ${this.player2}: ${p2Score}`;
 			this.ballStartSide = 1 - this.ballStartSide;
 			this.ball = new Ball(this.context, this.def, this.ballStartSide);
 			this.ballRespawned = true;
@@ -268,12 +317,10 @@ class Game {
 	}
 
 	keyDownHandler(ev) {
-
 		let attributes = ev.originalTarget.attributes;
 
 		let key = ev.key === undefined ? `${attributes.direction.value}${attributes.user_id.value}` : ev.key;
 
-
 		if (!this.keys.includes(key))
 			this.keys.push(key);
 	}
diff --git a/frontend/static/js/views/GameView.js b/frontend/static/js/views/GameView.js
index 011d6aa..e6920ec 100644
--- a/frontend/static/js/views/GameView.js
+++ b/frontend/static/js/views/GameView.js
@@ -1,6 +1,5 @@
 import { client, reloadView, lang } from "../index.js";
 import { Game } from "../api/game/Game.js";
-import AbstractView from "./abstracts/AbstractView.js";
 import { MyPlayer } from "../api/game/MyPlayer.js";
 import { Player } from "../api/game/Player.js";
 import { initShaderProgram, shaderInfos } from "../3D/shaders.js"
@@ -9,8 +8,9 @@ import "../3D/maths/gl-matrix-min.js"
 import "../chartjs/chart.umd.min.js";
 import { get_labels, transformData } from "../utils/graph.js";
 import { sleep } from "../utils/sleep.js";
+import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
 
-export default class extends AbstractView
+export default class extends AbstractAuthenticatedView
 {
 	constructor(params)
 	{