diff --git a/html/static/styles.css b/html/static/styles.css
index 052501c..f8c9947 100644
--- a/html/static/styles.css
+++ b/html/static/styles.css
@@ -12,18 +12,26 @@ body {
 }
 
 .cell {
+    position: relative;
     display: inline-block;
     width: 55px;
     height: 55px;
     margin: 3px;
     border: 1px solid #555;
-    text-align: center;
     font-size: 35px;
     color: white;
-    padding-top: 7px;
     font-weight: bold;
 }
 
+.cell span {
+    position: absolute;
+    left: 0;
+    top: 7px;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+}
+
 .cell.Unknown {
     background-color: black;
 }
@@ -59,7 +67,8 @@ body {
     padding-top: 8px;
     padding-left: 7px;
     padding-right: 7px;
-    font-weight: bold
+    font-weight: bold;
+    cursor: pointer;
 }
 
 .key.Unknown {;
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 6697203..d36f185 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -3,18 +3,32 @@ import {Field} from "./Field";
 import {calculateDifference} from "../logic/game-logic";
 import {id, objectMap, zip} from "../utils";
 import {Keyboard} from "./Keyboard";
-import {sortCellStates} from "../model/CellState";
+import {CellState, sortCellStates} from "../model/CellState";
 
 export const App = () => {
+    const length = 5;
     const correct = "guess";
-    const guesses = [
-        "ascii",
-        "eager",
-        "faces",
-        "guess",
-    ];
 
-    const fieldData = guesses
+    const [pastGuesses, setPastGuesses] = React.useState([]);
+
+    const [currentGuess, setCurrentGuess] = React.useState("");
+
+    const inputHandler = key => {
+        if (currentGuess.length > 0 && key === "BACK") {
+            setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
+        } else if (currentGuess.length >= length) {
+            if (key === "ENTER") {
+                setPastGuesses(pastGuesses.concat([currentGuess]));
+                setCurrentGuess("");
+            } else {
+                // do nothing
+            }
+        } else if (key.length === 1) {
+            setCurrentGuess(currentGuess + key);
+        }
+    };
+
+    const fieldDataForPastGuesses = pastGuesses
         .map(guess => guess.toUpperCase())
         .map(guess => [
             guess.split(""),
@@ -30,7 +44,7 @@ export const App = () => {
 
     const used = objectMap(
         Object.groupBy(
-            fieldData
+            fieldDataForPastGuesses
                 .flatMap(id)
                 .flatMap(id),
             cell => cell.content
@@ -41,12 +55,21 @@ export const App = () => {
             .at(-1)
     );
 
+    const fieldData = fieldDataForPastGuesses
+        .concat([currentGuess
+            .split("")
+            .map(char => ({
+                state: CellState.Unknown,
+                content: char,
+            }))
+        ])
+
 
     return <div>
         <Field
             size={[5, 6]}
             fieldData={fieldData}
         />
-        <Keyboard used={used} />
+        <Keyboard used={used} onKey={inputHandler}/>
     </div>
 };
\ No newline at end of file
diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
index 6c14e02..dd47639 100644
--- a/src/components/Cell.jsx
+++ b/src/components/Cell.jsx
@@ -1,5 +1,7 @@
 import React from "react";
 
 export const Cell = ({state, content}) => {
-    return <div className={"cell " + state}>{content}</div>
+    return <div className={"cell " + state}>
+        <span>{content}</span>
+    </div>
 }
\ No newline at end of file
diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index 34da612..55baf42 100644
--- a/src/components/Field.jsx
+++ b/src/components/Field.jsx
@@ -11,7 +11,7 @@ export const Field = ({size, fieldData}) => {
                 range(size[0]).map(x => (
                     <Cell
                         state={fieldData?.[y]?.[x]?.state ?? CellState.Unknown}
-                        content={fieldData?.[y]?.[x]?.content ?? ""}
+                        content={fieldData?.[y]?.[x]?.content ?? " "}
                     />
                 )).concat([<br />])
             )
diff --git a/src/components/Key.jsx b/src/components/Key.jsx
index 33c14a7..3d9b781 100644
--- a/src/components/Key.jsx
+++ b/src/components/Key.jsx
@@ -1,5 +1,5 @@
 import React from "react";
 
-export const Key = ({state, content}) => {
-    return <div className={"key " + state}>{content}</div>
+export const Key = ({state, content, onKey}) => {
+    return <div className={"key " + state} onClick={() => onKey(content)}>{content}</div>
 }
\ No newline at end of file
diff --git a/src/components/Keyboard.jsx b/src/components/Keyboard.jsx
index e8a161b..99a8d88 100644
--- a/src/components/Keyboard.jsx
+++ b/src/components/Keyboard.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import {CellState} from "../model/CellState";
 import {Key} from "./Key";
 
-export const Keyboard = ({used}) => {
+export const Keyboard = ({used, onKey}) => {
     const keys = [
         "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", null,
         "A", "S", "D", "F", "G", "H", "J", "K", "L", null,
@@ -13,7 +13,7 @@ export const Keyboard = ({used}) => {
         {
             keys.map((key) => {
                 if (key) {
-                    return <Key state={used[key] ?? CellState.Unknown} content={key} />;
+                    return <Key onKey={onKey} state={used[key] ?? CellState.Unknown} content={key} />;
                 } else {
                     return <br />
                 }