diff --git a/public/index.html b/public/index.html
index 265de18..d8ea81b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,7 +34,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Hangman game</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.js b/src/App.js
index d994df1..392a66a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import Defeat from "./components/Hangman/PuzzleWord/Defeat";
 import Loading from "./components/Loading";
 import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore";
 import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage";
+import Categories from "./components/Categories/Categories";
 
 function App() {
 
@@ -22,6 +23,7 @@ function App() {
   const [isDefeat, setIsDefeat] = useState(false)
 
   const [displayApp, setDisplayApp] = useState(false)
+  const [displayCategories, setDisplayCategories] = useState(false)
 
   React.useEffect(() => {
 
@@ -60,11 +62,14 @@ function App() {
         }, 3000)
   }
 
-  
-
   return (
    <>
-    <Header language={language}/>
+    <Header
+      language={language}
+
+      displayCategories={displayCategories}
+      setDisplayCategories={setDisplayCategories}
+    />
     
     <div className="app">
 
@@ -86,6 +91,12 @@ function App() {
 
           {!displayApp ? <Loading /> : null }
 
+          {displayCategories ?
+            <Categories hidden={false}/>
+              :
+            <Categories hidden={true}/>
+          }
+
           <PuzzleWord
 
           language={language}
diff --git a/src/components/Categories/Categories.jsx b/src/components/Categories/Categories.jsx
new file mode 100644
index 0000000..84ae30f
--- /dev/null
+++ b/src/components/Categories/Categories.jsx
@@ -0,0 +1,35 @@
+import React from "react"
+import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
+
+
+const Categories = ({hidden}) => {
+
+    const [categories, setCategories] = React.useState([])
+
+    React.useEffect (() => {
+
+        Bring_All_Categories(setCategories)
+        
+        console.log(categories)
+    }, [])
+
+    return (
+        
+        <div
+            className={ hidden ? 'categories' : 'categories show'}
+        >
+            {
+                categories.length > 0 ?
+                  
+                    categories.map((categorie) => (
+
+                        <button key={categorie}> { categorie } </button>
+                    ))
+
+                : null
+            }
+        </div>
+    )
+}
+
+export default Categories
diff --git a/src/components/Categories/Firebase Querys/Bring All Categories.js b/src/components/Categories/Firebase Querys/Bring All Categories.js
new file mode 100644
index 0000000..bbbc8a1
--- /dev/null
+++ b/src/components/Categories/Firebase Querys/Bring All Categories.js	
@@ -0,0 +1,27 @@
+import { firestore } from "../../../Firebase/Firebase_Config"
+import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+
+const Bring_All_Categories = async (setCategories) => {
+
+    const capitalize = (str, lower = false) =>
+        (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());  /* CREDITS: https://stackoverflow.com/a/7592235*/
+    
+    try {
+
+        const db = getFirestore(firestore)
+        const data = await collection(db, 'categories')
+        const result = await getDocs(data)
+
+        let categories = await result.docs.map(doc => doc.id)
+        
+            categories = categories.map(word => capitalize(word, true))
+
+        console.log(categories)
+        setCategories(await categories)
+        
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+export default Bring_All_Categories
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c7de2aa..3ebfd72 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,19 +1,19 @@
 import React, {useState} from 'react'
 
-const Header = (props) => {
+const Header = ({language, displayCategories, setDisplayCategories}) => {
 
     const [title, setTitle] = useState('')
     const [categoryText, setCategoryText] = useState('')
 
     React.useEffect( () => {
 
-        if (props.language === 'english') {
+        if (language === 'english') {
             
             setTitle('Hangman game')
             setCategoryText('Select category')
         }
 
-        if (props.language === 'spanish') {
+        if (language === 'spanish') {
 
             setTitle('Ahorcado')
             setCategoryText('Seleccionar categoría')
@@ -23,7 +23,11 @@ const Header = (props) => {
     return (
         <header>
             <h1>{title}</h1>
-            <h2>{categoryText}</h2>
+            <h2
+                onClick={() => setDisplayCategories(!displayCategories)}
+            >
+                {categoryText}
+            </h2>
         </header>
     )
 }
