diff --git a/src/wordle/InfoAndSetings/WordLegnthSetings.svelte b/src/wordle/InfoAndSetings/WordLegnthSetings.svelte
new file mode 100644
index 0000000..85e0ad0
--- /dev/null
+++ b/src/wordle/InfoAndSetings/WordLegnthSetings.svelte
@@ -0,0 +1,42 @@
+<script>
+	import { newGame, WordLegnth } from "../logic.svelte.js";
+
+	let LetersSelected = WordLegnth.v;
+</script>
+
+<div id="root">
+	<h4>Select The Word legnth (between 3 and 10 letters)</h4>
+	<input
+		type="range"
+		id="vol"
+		name="vol"
+		min="3"
+		max="10"
+		bind:value={LetersSelected}
+	/>
+	<button
+		onclick={() => {
+			WordLegnth.v = LetersSelected;
+			newGame();
+		}}
+		>Start New Game with Word legnth of {LetersSelected} letters
+	</button>
+</div>
+
+<style>
+	#root {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		margin: 10px;
+		justify-content: center;
+		background-color: #303030;
+		padding: 10px;
+		margin: 20px;
+		border-radius: 10px;
+	}
+	h4 {
+		text-align: center;
+		margin: 0px;
+	}
+</style>
diff --git a/src/wordle/InfoAndSetings/main.svelte b/src/wordle/InfoAndSetings/main.svelte
new file mode 100644
index 0000000..f09844a
--- /dev/null
+++ b/src/wordle/InfoAndSetings/main.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { newGame, WordLegnth } from "../logic.svelte.js";
+	import WordLegnthSetings from "./WordLegnthSetings.svelte";
+
+	let LetersSelected = WordLegnth.v;
+</script>
+
+<div id="root">
+	<h1>A Wordle clone designed for classrooms!</h1>
+	<h3>
+		Unlimited guesses, Unlimited words, and choose your own word length!
+	</h3>
+
+	<WordLegnthSetings />
+</div>
+
+<style>
+	#root {
+		height: 100%;
+		width: 35%;
+		border-radius: 20px;
+		margin: 20px;
+		margin-top: 5px;
+		border: 2px solid #444;
+	}
+
+	h1 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+	}
+
+	h3 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+	}
+</style>
diff --git a/src/wordle/game.svelte b/src/wordle/game.svelte
index 756b720..2d788dd 100644
--- a/src/wordle/game.svelte
+++ b/src/wordle/game.svelte
@@ -1,8 +1,9 @@
 <script>
-	import Keyboard from "./keyboard.svelte";
-	import Display from "./display.svelte";
+	import Keyboard from "./game/keyboard.svelte";
+	import Display from "./game/display.svelte";
 	import { onMount } from "svelte";
 	import { handleKey } from "./logic.svelte.js";
+	import Right from "./InfoAndSetings/main.svelte";
 
 	onMount(() => {
 		window.addEventListener("keydown", handleKey);
@@ -10,14 +11,26 @@
 </script>
 
 <div id="root">
-	<Display />
-	<Keyboard />
+	<div id="left">
+		<Display />
+		<Keyboard />
+	</div>
+    <Right />
 </div>
 
 <style>
 	#root {
-		width: 885px;
-		height: calc(100% - 75px);
+        height: 90%;
+		display: flex;
+		margin: 0;
+		font-family: "Sour Gummy", sans-serif;
+		background-color: #121212;
+		color: white;
+	}
+
+	#left {
+		width: 100%;
+		height: 100%;
 		border-radius: 20px;
 		margin: 20px;
 		margin-top: 5px;
diff --git a/src/wordle/display.svelte b/src/wordle/game/display.svelte
similarity index 85%
rename from src/wordle/display.svelte
rename to src/wordle/game/display.svelte
index 6dfa49a..fd1cc16 100644
--- a/src/wordle/display.svelte
+++ b/src/wordle/game/display.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { CurrentWord, words,WordLegnth } from "./logic.svelte.js";
+	import { CurrentWord, words, WordLegnth } from "../logic.svelte.js";
 </script>
 
 <div id="DisplayOfWords">
-	{#each words as word}
+	{#each words.v as word}
 		<div class="word">
 			{#each word as letter}
 				<span class={letter[1]}>{letter[0]}</span>
@@ -11,8 +11,8 @@
 		</div>
 	{/each}
 	<div class="word">
-		{#each Array(WordLegnth) as _, i}
-		<span>{CurrentWord.v[i] || ''}</span>
+		{#each Array(WordLegnth.v) as _, i}
+			<span>{CurrentWord.v[i] || ""}</span>
 		{/each}
 	</div>
 </div>
diff --git a/src/wordle/keyboard.svelte b/src/wordle/game/keyboard.svelte
similarity index 86%
rename from src/wordle/keyboard.svelte
rename to src/wordle/game/keyboard.svelte
index fa8413d..84eff1e 100644
--- a/src/wordle/keyboard.svelte
+++ b/src/wordle/game/keyboard.svelte
@@ -1,10 +1,10 @@
 <script>
-	import { keys, ButtonPressed } from "./logic.svelte.js";
+	import { keys, ButtonPressed } from "../logic.svelte.js";
 </script>
 
 <div id="root">
 	<div class="word">
-		{#each keys.slice(0, 10) as key}
+		{#each keys.v.slice(0, 10) as key}
 			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
 				>{key[0]}</button
 			>
@@ -12,14 +12,14 @@
 	</div>
 
 	<div class="word">
-		{#each keys.slice(10, 19) as key}
+		{#each keys.v.slice(10, 19) as key}
 			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
 				>{key[0]}</button
 			>
 		{/each}
 	</div>
 	<div class="word">
-		{#each keys.slice(19) as key}
+		{#each keys.v.slice(19) as key}
 			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
 				>{key[0]}</button
 			>
diff --git a/src/wordle/logic.svelte.js b/src/wordle/logic.svelte.js
index 4b1beb8..456db11 100644
--- a/src/wordle/logic.svelte.js
+++ b/src/wordle/logic.svelte.js
@@ -2,46 +2,91 @@ import wordExists from "word-exists";
 import { generate } from "random-words";
 import { onMount } from "svelte";
 
-export let WordLegnth = 5; 
+export let WordLegnth = $state({ v: 5 });
 
-let CorrectWord = generate({ minLength: WordLegnth, maxLength: WordLegnth });
+let CorrectWord = generate({
+	minLength: WordLegnth.v,
+	maxLength: WordLegnth.v,
+});
 console.log("CorrectWord: ", CorrectWord);
-export let words = $state([]);
+export let words = $state({ v: [] });
 export let CurrentWord = $state({ v: [] });
-export let keys = $state([
-	["Q", "n"],
-	["W", "n"],
-	["E", "n"],
-	["R", "n"],
-	["T", "n"],
-	["Y", "n"],
-	["U", "n"],
-	["I", "n"],
-	["O", "n"],
-	["P", "n"],
-	["A", "n"],
-	["S", "n"],
-	["D", "n"],
-	["F", "n"],
-	["G", "n"],
-	["H", "n"],
-	["J", "n"],
-	["K", "n"],
-	["L", "n"],
-	["⌫", "o"],
-	["Z", "n"],
-	["X", "n"],
-	["C", "n"],
-	["V", "n"],
-	["B", "n"],
-	["N", "n"],
-	["M", "n"],
-	["⏎", "o"],
-]);
+export let keys = $state({
+	v: [
+		["Q", "n"],
+		["W", "n"],
+		["E", "n"],
+		["R", "n"],
+		["T", "n"],
+		["Y", "n"],
+		["U", "n"],
+		["I", "n"],
+		["O", "n"],
+		["P", "n"],
+		["A", "n"],
+		["S", "n"],
+		["D", "n"],
+		["F", "n"],
+		["G", "n"],
+		["H", "n"],
+		["J", "n"],
+		["K", "n"],
+		["L", "n"],
+		["⌫", "o"],
+		["Z", "n"],
+		["X", "n"],
+		["C", "n"],
+		["V", "n"],
+		["B", "n"],
+		["N", "n"],
+		["M", "n"],
+		["⏎", "o"],
+	],
+});
+
+export function newGame() {
+	CorrectWord = generate({
+		minLength: WordLegnth.v,
+		maxLength: WordLegnth.v,
+	});
+	console.log("CorrectWord: ", CorrectWord);
+	words.v = [];
+	CurrentWord.v = [];
+	keys.v = [
+		["Q", "n"],
+		["W", "n"],
+		["E", "n"],
+		["R", "n"],
+		["T", "n"],
+		["Y", "n"],
+		["U", "n"],
+		["I", "n"],
+		["O", "n"],
+		["P", "n"],
+		["A", "n"],
+		["S", "n"],
+		["D", "n"],
+		["F", "n"],
+		["G", "n"],
+		["H", "n"],
+		["J", "n"],
+		["K", "n"],
+		["L", "n"],
+		["⌫", "o"],
+		["Z", "n"],
+		["X", "n"],
+		["C", "n"],
+		["V", "n"],
+		["B", "n"],
+		["N", "n"],
+		["M", "n"],
+		["⏎", "o"],
+	];
+}
 
 function GameWin() {
 	alert("You win!");
-	document.location.reload();
+	newGame();
 }
 
 function SendWord(word) {
@@ -77,7 +122,7 @@ function SendWord(word) {
 			: [word[i].toUpperCase(), "w"];
 	}
 
-	words.push(result);
+	words.v.push(result);
 
 	setTimeout(() => {
 		document.getElementById("DisplayOfWords").scrollTo({
@@ -88,17 +133,17 @@ function SendWord(word) {
 
 	// Update keyboard status
 	for (let [letter, status] of result) {
-		let keyIndex = keys.findIndex(
+		let keyIndex = keys.v.findIndex(
 			(k) => k[0].toLowerCase() === letter.toLowerCase()
 		);
 		if (keyIndex !== -1) {
-			let current = keys[keyIndex][1];
+			let current = keys.v[keyIndex][1];
 			if (status === "c") {
-				keys[keyIndex][1] = "c";
+				keys.v[keyIndex][1] = "c";
 			} else if (status === "d" && current === "n") {
-				keys[keyIndex][1] = "d";
+				keys.v[keyIndex][1] = "d";
 			} else if (status === "w" && current === "n") {
-				keys[keyIndex][1] = "w";
+				keys.v[keyIndex][1] = "w";
 			}
 		}
 	}
@@ -116,7 +161,7 @@ export function ButtonPressed(key) {
 	});
 
 	if (key === "⏎") {
-		if (CurrentWord.v.length === WordLegnth) {
+		if (CurrentWord.v.length === WordLegnth.v) {
 			let word = CurrentWord.v.join("").toUpperCase();
 			if (wordExists(word)) {
 				SendWord(CurrentWord.v);
@@ -130,7 +175,7 @@ export function ButtonPressed(key) {
 		CurrentWord.v.pop();
 		return;
 	}
-	if (CurrentWord.v.length === WordLegnth) {
+	if (CurrentWord.v.length === WordLegnth.v) {
 		return;
 	}