diff --git a/public/css/index.css b/public/css/index.css
index 90ef444..bf16020 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -82,6 +82,121 @@ header h2 {
   user-select: none;
 }
 
+.categories-container {
+  overflow-y: hidden;
+}
+.categories-container .categories {
+  position: absolute;
+  top: 15vh;
+  left: 0;
+  height: 85vh;
+  width: 100vw;
+  background-color: #e1e1e1;
+  transition: opacity 0.4s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  box-sizing: border-box;
+  padding-top: 10vh;
+  padding-bottom: 10vh;
+}
+.categories-container .categories button, .categories-container .categories select {
+  height: 10vh;
+  width: 50vw;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 22pt;
+  border: none;
+  border-radius: 10px;
+  text-align: center;
+  text-align-last: center;
+  -moz-text-align-last: center;
+}
+.categories-container .categories button.Select, .categories-container .categories select.Select {
+  background-color: #E96363;
+  border: #e16363 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Select:hover, .categories-container .categories select.Select:hover {
+  background-color: #ef9090;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Cities, .categories-container .categories select.Cities {
+  background-color: #5f9ea0;
+  border: #5f9798 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Cities:hover, .categories-container .categories select.Cities:hover {
+  background-color: #7fb1b3;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
+  background-color: #ffcb05;
+  border: #f7c505 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
+  background-color: #ffd638;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Programming.Languages, .categories-container .categories select.Programming.Languages {
+  background-color: #e46f01;
+  border: #dc6b01 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Programming.Languages:hover, .categories-container .categories select.Programming.Languages:hover {
+  background-color: #fe881a;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Animals, .categories-container .categories select.Animals {
+  background-color: #efa482;
+  border: #e7a282 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Animals:hover, .categories-container .categories select.Animals:hover {
+  background-color: #f5c5af;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Countries, .categories-container .categories select.Countries {
+  background-color: #9f0000;
+  border: #970000 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Countries:hover, .categories-container .categories select.Countries:hover {
+  background-color: #d20000;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Random, .categories-container .categories select.Random {
+  background-color: #4285f4;
+  border: #4282ec solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {
+  background-color: #72a4f7;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories.hidden {
+  opacity: 0%;
+  top: 0;
+  height: 85vh;
+}
+.categories-container .categories.hidden button, .categories-container .categories.hidden select {
+  height: 5vh;
+}
+.categories-container .categories.show {
+  opacity: 100%;
+}
+.categories-container .categories.stretch {
+  height: auto;
+  width: 100%;
+}
+.categories-container .categories.stretch button, .categories-container .categories.stretch select {
+  margin-bottom: 5vh;
+}
+.categories-container .categories.stretch:last-child {
+  margin-bottom: 0vh !important;
+}
+
 .defeat, .victory {
   position: absolute;
   left: 0;
diff --git a/public/css/index.css.map b/public/css/index.css.map
index 5558880..6f3f7c0 100644
--- a/public/css/index.css.map
+++ b/public/css/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_defeat-victory.scss","../sass/_loading.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAgBA;EAbI,kBAcc;EAbd;EAEA;;AAEA;EACI;EACA;;AAYR;EAnBI,kBAoBc;EAnBd;EAEA;;AAEA;EACI;EACA;;AAkBR;EAzBI,kBA0Bc;EAzBd;EAEA;;AAEA;EACI;EACA;;AAwBR;EA/BI,kBAgCc;EA/Bd;EAEA;;AAEA;EACI;EACA;;AA8BR;EArCI,kBAsCc;EArCd;EAEA;;AAEA;EACI;EACA;;AAoCR;EA3CI,kBA4Cc;EA3Cd;EAEA;;AAEA;EACI;EACA;;AA0CR;EAjDI,kBAkDc;EAjDd;EAEA;;AAEA;EACI;EACA;;AAiDZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AC/HhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/public/sass/_app.scss b/public/sass/_app.scss
index 0ae7d32..73c5687 100644
--- a/public/sass/_app.scss
+++ b/public/sass/_app.scss
@@ -13,10 +13,11 @@
         display: flex;
         flex-direction: column;
 
-        justify-content: space-between
+        justify-content: space-between;
     }
 }
 
 @import 'hangman';
 @import 'puzzleWord';
-@import 'current-score';
\ No newline at end of file
+@import 'current-score';
+@import 'categories';
\ No newline at end of file
diff --git a/public/sass/_categories.scss b/public/sass/_categories.scss
new file mode 100644
index 0000000..bed06d8
--- /dev/null
+++ b/public/sass/_categories.scss
@@ -0,0 +1,132 @@
+.categories-container {
+
+    overflow-y: hidden;
+
+    .categories {
+        
+        position: absolute;
+        
+        top: 15vh;
+        left: 0;
+        
+        height: 85vh;
+        width: 100vw;
+        
+        background-color: rgb(225, 225, 225);
+
+        transition: opacity 0.4s ease-in-out;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+
+        box-sizing: border-box;
+
+        padding-top: 10vh;
+        padding-bottom: 10vh;
+
+        button, select {
+            height: 10vh;
+            width: 50vw;
+            
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 22pt;
+
+            border: none;
+            border-radius: 10px;
+
+            text-align: center;
+            text-align-last: center;
+            -moz-text-align-last: center;
+
+            @mixin backgroundAndHoverDefiner($buttonColor) {
+                background-color: $buttonColor; 
+                border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
+
+                transition: 0.4s ease-in-out;
+                
+                &:hover {
+                    background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
+                    transition: 0.4s ease-in-out;
+                    
+                }
+
+            }
+
+            &.Select {
+                $buttonColor: #E96363;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Cities {
+                $buttonColor: #5f9ea0;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Pokemons {
+                $buttonColor: #ffcb05;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Programming.Languages {
+                $buttonColor: #e46f01;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Animals {
+                $buttonColor: #efa482;
+
+                @include backgroundAndHoverDefiner($buttonColor)
+            }
+
+            &.Countries {
+                $buttonColor: #9f0000;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Random {
+                $buttonColor: #4285f4;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+        }
+        
+        &.hidden {
+            opacity: 0%;
+            
+            top: 0;
+            height: 85vh;
+
+            button, select {
+
+                height: 5vh;
+            }
+        }
+        
+        &.show {
+            opacity: 100%;
+            
+        }
+        
+        &.stretch {
+            height: auto;
+            width: 100%;
+            
+            button, select {
+                
+                margin-bottom: 5vh;
+            }
+
+            &:last-child {
+
+                margin-bottom: 0vh !important;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 392a66a..961bfd3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,6 +73,10 @@ function App() {
     
     <div className="app">
 
+      <div className='categories-container'>
+          <Categories displayCategories={displayCategories} language={language}/>
+      </div>
+
       <div className='column-1'>
         <Hangman
           hangmanFrame={hangmanFrame}
@@ -91,11 +95,7 @@ function App() {
 
           {!displayApp ? <Loading /> : null }
 
-          {displayCategories ?
-            <Categories hidden={false}/>
-              :
-            <Categories hidden={true}/>
-          }
+          
 
           <PuzzleWord
 
diff --git a/src/components/Categories/Categories.jsx b/src/components/Categories/Categories.jsx
index 84ae30f..7cf7422 100644
--- a/src/components/Categories/Categories.jsx
+++ b/src/components/Categories/Categories.jsx
@@ -1,14 +1,19 @@
 import React from "react"
 import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
+import Bring_All_Languages from "./Firebase Querys/Bring All Languages"
 
 
-const Categories = ({hidden}) => {
+const Categories = ({language, displayCategories}) => {
 
-    const [categories, setCategories] = React.useState([])
+    const [categories, setCategories] = React.useState(false)
+    const [languages, setLanguages] = React.useState(false)
+
+    const [stretch, setStrech] = React.useState(false)
 
     React.useEffect (() => {
 
-        Bring_All_Categories(setCategories)
+        Bring_All_Categories(setCategories, setStrech, language)
+        Bring_All_Languages(setLanguages)
         
         console.log(categories)
     }, [])
@@ -16,18 +21,32 @@ const Categories = ({hidden}) => {
     return (
         
         <div
-            className={ hidden ? 'categories' : 'categories show'}
+            className={ !displayCategories ? `categories hidden animate__animated animate__backOutUp ${stretch}` : `categories show animate__animated animate__backInDown ${stretch}`}
         >
+            <select className="Select">
+                {
+                    languages.length > 0 ?
+                    
+                        languages.map((language) => {
+                            
+                            return <option key={language} value={language}> {language} </option>
+                        })
+                        
+                        : null
+                }
+            </select>
             {
                 categories.length > 0 ?
                   
-                    categories.map((categorie) => (
+                    categories.map((categorie) => {
 
-                        <button key={categorie}> { categorie } </button>
-                    ))
+                        return <button className={ categorie } key={categorie}> { categorie.toUpperCase() } </button>
+                    })
 
                 : null
             }
+
+            <button className='Random' key='Random'>{'Random'.toUpperCase()}</button>
         </div>
     )
 }
diff --git a/src/components/Categories/Firebase Querys/Bring All Categories.js b/src/components/Categories/Firebase Querys/Bring All Categories.js
index bbbc8a1..cc2fe02 100644
--- a/src/components/Categories/Firebase Querys/Bring All Categories.js	
+++ b/src/components/Categories/Firebase Querys/Bring All Categories.js	
@@ -1,10 +1,11 @@
 import { firestore } from "../../../Firebase/Firebase_Config"
 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+import AdjustHeightCategories from "../../Scripts/AdjustHeightCategories";
+import capitalize from "../../Scripts/Capilazate";
 
-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*/
+const Bring_All_Categories = async (setCategories, setStrech, language) => {
+
     
     try {
 
@@ -13,11 +14,23 @@ const Bring_All_Categories = async (setCategories) => {
         const result = await getDocs(data)
 
         let categories = await result.docs.map(doc => doc.id)
+
+            if (language === 'english') {
+                categories = result.docs.map(doc => doc.english)
+
+            }
+
+            if (language === 'spanish') {
+                categories = result.docs.map(doc => doc.english)
+
+            }
         
             categories = categories.map(word => capitalize(word, true))
 
         console.log(categories)
         setCategories(await categories)
+
+        AdjustHeightCategories(await categories, setStrech)
         
     } catch (error) {
         console.log(error)
diff --git a/src/components/Categories/Firebase Querys/Bring All Languages.js b/src/components/Categories/Firebase Querys/Bring All Languages.js
new file mode 100644
index 0000000..6ae0904
--- /dev/null
+++ b/src/components/Categories/Firebase Querys/Bring All Languages.js	
@@ -0,0 +1,24 @@
+import { getDocs, getFirestore, collection } from "@firebase/firestore/"
+import { firestore } from "../../../Firebase/Firebase_Config"
+import capitalize from "../../Scripts/Capilazate"
+
+const Bring_All_Languages = async (setLanguage) => {
+    
+    try {
+        
+        const db = getFirestore(firestore)
+        const data = collection(db, 'hangman_words')
+        const result = await getDocs(data)
+
+        let languages = await result.docs.map((language) => language.id)
+            languages = languages.map((language) => capitalize(language, true)) 
+
+        setLanguage(languages)
+        
+    } catch (error) {
+        console.log(error)
+    }
+
+}
+
+export default Bring_All_Languages
diff --git a/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js b/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js
index 4ef8b1f..4d20559 100644
--- a/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js	
+++ b/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js	
@@ -12,7 +12,7 @@ const GetRandomCategory = async () => {
             const data = collection(db, `categories`)
             const result = await getDocs(data)
 
-            result.docs.map(doc => categoriesList.push(doc.id))
+            result.docs.map(doc => categoriesList.push(doc.id.toLowerCase()))
 
             const randomNumber = Math.trunc(
 
diff --git a/src/components/Scripts/AdjustHeightCategories.js b/src/components/Scripts/AdjustHeightCategories.js
new file mode 100644
index 0000000..1dd7a6b
--- /dev/null
+++ b/src/components/Scripts/AdjustHeightCategories.js
@@ -0,0 +1,11 @@
+const AdjustHeightCategories = (categories, setStrech) => {
+
+    console.log(categories)
+    
+    if (categories.length >= 5) {
+
+        setStrech('stretch')
+    }
+}
+
+export default AdjustHeightCategories
diff --git a/src/components/Scripts/Capilazate.js b/src/components/Scripts/Capilazate.js
new file mode 100644
index 0000000..484ee55
--- /dev/null
+++ b/src/components/Scripts/Capilazate.js
@@ -0,0 +1,4 @@
+const capitalize = (str, lower = false) =>
+        (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());  /* CREDITS: https://stackoverflow.com/a/7592235*/
+    
+export default capitalize
\ No newline at end of file