diff --git a/frontend/src/components/Alphabet.tsx b/frontend/src/components/Alphabet.tsx
deleted file mode 100644
index 5f2891e..0000000
--- a/frontend/src/components/Alphabet.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import './alphabet.css'
-
-export function Alphabet({ playerAlphabet }) {
-  const alphabetStates = playerAlphabet?.map(({ state }) => state.toString()) || []
-
-  /**
-   * colorMap maps the different states of a letter to a CSS color.
-   * The states are: 0 = miss ; 1 = exists ; 2 = hit ; 3 = discarded
-   */
-  const colorMap = {
-    '0': 'var(--gray)',
-    '1': 'var(--yellow)',
-    '2': 'var(--green)',
-    '3': 'var(--dark-gray)',
-  }
-
-  /**
-   * qwertyLayout is an array of the letters in the QWERTY layout.
-   * It is used to generate the grid of letters.
-   */
-  const qwertyLayout = [
-    'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
-    'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
-    'Z', 'X', 'C', 'V', 'B', 'N', 'M',
-  ]
-
-  return (
-    <div className="alphabet">
-      {qwertyLayout.map((char, index) => (
-        <p
-          key={index}
-          style={{ backgroundColor: alphabetStates && colorMap[alphabetStates[index]] || 'var(--gray)' }}
-        >
-          {char}
-        </p>
-      ))}
-    </div>
-  )
-}
-
diff --git a/frontend/src/components/alphabet.css b/frontend/src/components/alphabet.css
deleted file mode 100644
index 14a887b..0000000
--- a/frontend/src/components/alphabet.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.alphabet {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  justify-content: center;
-  margin: 20px auto;
-  max-width: 40%;
-}
-
-.alphabet p {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-  width: 30px;
-  height: 40px;
-  margin: 0;
-}