diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
index efba575..df61f08 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
+# Entregable 3
+
 Entregable 3 de DGEU, opción A
 
+![Alt text](entregable3.png)
diff --git a/entregable3.png b/entregable3.png
new file mode 100644
index 0000000..2803502
Binary files /dev/null and b/entregable3.png differ
diff --git a/public/css/wrapper.css b/public/css/wrapper.css
new file mode 100644
index 0000000..14695f9
--- /dev/null
+++ b/public/css/wrapper.css
@@ -0,0 +1,7 @@
+.wrapper {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 40px;
+    grid-auto-rows: minmax(100px, auto);
+  }
+  
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 1d8620d..71d0ad0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,6 +26,7 @@
     <link rel="stylesheet" id="university-hub-google-fonts-css" href="%PUBLIC_URL%/css/css" type="text/css" media="all">
     <link rel="stylesheet" id="jquery-sidr-css" href="%PUBLIC_URL%/css/jquery.sidr.dark.min.css" type="text/css" media="all">
     <link rel="stylesheet" id="university-hub-style-css" href="%PUBLIC_URL%/css/style.css" type="text/css" media="all">
+    <!--<link rel="stylesheet" href="%PUBLIC_URL%/css/wrapper.css" type="text/css" media="all"> -->
     
     <!-- JS -->
     <script type="text/javascript" async="" src="%PUBLIC_URL%/js/analytics.js"></script>
@@ -39,7 +40,10 @@
     <script type="text/javascript" src="%PUBLIC_URL%/js/jquery.easy-ticker.min.js" id="jquery-easy-ticker-js"></script>
     <script type="text/javascript" src="%PUBLIC_URL%/js/custom.min.js" id="university-hub-custom-js"></script>
     <script type="text/javascript" src="%PUBLIC_URL%/js/wp-embed.min.js" id="wp-embed-js"></script>
+
+    <!-- IMGs -->
     
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.tsx b/src/App.tsx
index f819e3d..f6f0cd0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,25 @@
-import olavideLogo from './assets/img/olavide.jpg'
-import ualLogo from './assets/img/ual.jpg'
-import ucoLogo from './assets/img/uco.jpg'
-import ucaLogo from './assets/img/uca-233x300.jpeg'
-import ugrLogo from './assets/img/ugr.jpg'
-import uhuLogo from './assets/img/uhu.jpg'
-import ujaenLogo from './assets/img/ujaen.jpg'
-import umaLogo from './assets/img/uma.jpg'
-import univaLogo from './assets/img/univa.jpg'
-import usevillaLogo from './assets/img/usevilla.jpg'
-import Footer from './components/Footer'
+import Footer from './components/Footer' 
 import Menu from './components/Menu'
 import TopHeader from './components/TopHeader'
 import MainNav from './components/MainNav'
 import Introduction from './components/Introduction'
-import University from './components/University'
+import UniversityList from './styledComponents/UniversityList'// no necesitan estado global de redux
+import FilterForm from './containers/FilterForm' //utiliza store de redux
+import { Action, createStore } from 'redux';
+import IGlobalState, { initialState } from './states/globalState'
+import { Provider } from 'react-redux'
+
+//recibe un estado y una acción. Devuelve el resultado de aplicar al estado la acción
+const reducer = (state: IGlobalState = initialState, action: Action) => { 
+  return state;
+}
+
+// aqui se almacena el estado, a medida que la app evoluciona, se verán los cambios reflejados
+const store = createStore(reducer, initialState); 
 
 function App() {
   return (
+    <Provider store={store}>
     <body className="home page-template-default page page-id-15 wp-embed-responsive global-layout-no-sidebar slider-disabled">
 
       <div id="page" className="hfeed site">
@@ -61,31 +64,18 @@ function App() {
 
                         {/* REFACTORING SHOULD START HERE # TODO: use redux and jss */}
 
-                        <University href={"https://www.ual.es/"} title={"Universidad de Almería"} imgSrc={ualLogo} uniText={"<strong><a title=\"Universidad de Almeria\" href=\"https://www.distritounicoandaluz.org/universidad-de-almeria/\">UNIVERSIDAD DE ALMERÍA</a>:</strong> Creada por el Parlamento Andaluz en 1993. Es una de las universidades más jóvenes de España. Su oferta académica incluye más&nbsp;de 30 titulaciones, más de 37 programas de doctorado (9 de ellos con mención de calidad), 13 másteres oficiales y 12 másteres propios."} />
-
-                        <University href={"https://www.uca.es/"} title={"Universidad de Cádiz"} imgSrc={ucaLogo} uniText={"<strong><a title=\"Universidad de Cadiz\" href=\"https://www.distritounicoandaluz.org/universidad-de-cadiz/\">UNIVERSIDAD DE CADIZ</a>:</strong>&nbsp;Comenzó sus actividades en octubre de 1979.&nbsp;La oferta actual de estudios abarca un total de 41 titulaciones de Grado, 12 Programas Conjuntos de Estudios Oficiales de Grado (PCEO), 39 Másteres Universitarios y 15 Programas de Doctorado."}/>
-                        
-                        <University href={"https://www.uco.es/"} title={"Universidad de Cordoba"} imgSrc={ucoLogo} uniText={"<strong><a title=\"Universidad de Cordoba\" href=\"https://www.distritounicoandaluz.org/universidad-de-cordoba/\">UNIVERSIDAD DE CÓRDOBA</a>:</strong>&nbsp;fundada como tal en 1972, sus raíces se remontan a la Universidad Libre que funcionó en la provincia a finales del siglo XIX y cuenta con estudios centenarios como los de Veterinaria, únicos en Andalucía.&nbsp;Los estudios de esta universidad van desde las Humanidades y las Ciencias Jurídico-Sociales a las Ciencias de la Salud y las carreras científico-técnicas."} />
-
-                        <University href={"https://www.ugr.es/"} title={"Universidad de Granada"} imgSrc={ugrLogo} uniText={"<strong><a title=\"Universidad de Granada\" href=\"https://www.distritounicoandaluz.org/universidad-de-granada/\">UNIVERSIDAD DE GRANADA</a>:</strong> Fundada en 1531, es la continuadora de una larga tradición docente que enlaza con la de la Madraza del último Reino Nazarí.&nbsp;Actualmente se imparten 75&nbsp;titulaciones&nbsp;en los 28&nbsp;centros docentes&nbsp;de que dispone la Universidad. Por otro lado,&nbsp;su&nbsp;<a title=\"servicios/ep\" href=\"http://www.ugr.es/pages/servicios/ep\">Escuela Internacional de Posgrado</a>&nbsp;ofrece 68 Másteres, 116 Doctorados y 113 cursos complementarios."} />
-
-                        <University href={"http://www.uma.es/"} title={"Universidad de Málaga"} imgSrc={umaLogo} uniText={"<strong><a title=\"Universidad de Malaga\" href=\"https://www.distritounicoandaluz.org/universidad-de-malaga/\">UNIVERSIDAD DE MÁLAGA</a>:</strong> Creada oficialmente en agosto de 1972. Su oferta académica comprende 62 Grados, 43 Programas de Doctorado, 55 Másteres, y 39 Títulos Propios de Postgrado (Máster y Experto)."} />
+                        <UniversityList/>
 
-                        <University href={"https://www.uhu.es/"} title={"Universidad de Huelva"} imgSrc={uhuLogo} uniText={"<strong><a title=\"Universidad de Huelva\" href=\"https://www.distritounicoandaluz.org/universidad-de-huelva/\">UNIVERSIDAD DE HUELVA</a>:&nbsp;</strong>Creada en julio de 1993. Actualmente cuenta con una oferta de 36 titulaciones de Grado, 4 Estudios de Segundo Ciclo, 28 Másteres Oficiales, y 21 Programas de Doctorados."} />
-                        
-                        <University href={"https://www.us.es/"} title={"Universidad de Sevilla"} imgSrc={usevillaLogo} uniText={"<strong><a title=\"Universidad de Sevilla\" href=\"https://www.distritounicoandaluz.org/universidad-de-sevilla/\">UNIVERSIDAD DE SEVILLA</a>: </strong>Fundada hace más de quinientos años, es la segunda universidad española en número de estudiantes y la primera de Andalucía. Su oferta académica actual ronda las 66 titulaciones de Grado desde el Primer Curso, 86 Másteres Universitarios, 152 Programas de Doctorado, y 335 Estudios de Postgrado Universitario."} />
-                        
-                        <University href={"https://www10.ujaen.es/"} title={"Universidad de Jaén"} imgSrc={ujaenLogo} uniText={"<strong><a title=\"Universidad de Jaen\" href=\"https://www.distritounicoandaluz.org/universidad-de-jaen/\">UNIVERSIDAD DE JAÉN</a>:&nbsp;</strong>Sus orígenes&nbsp;se remontan a la creación de la Universidad de Baeza en la Edad Moderna, con un amplio recorrido hasta llegar a 1993 en que inicia su andadura como institución autónoma.&nbsp;&nbsp;Su oferta académica, “diseñada de acuerdo con las necesidades laborales y profesionales de la sociedad”, está conformada por más de 50 titulaciones de Grado, Primer y Segundo Ciclo y 22 másteres, algunos de ellos impartidos a través de Internet."} />
-
-                        <University href={"https://www.upo.es/portal/impe/web/portada"} title={"Universidad Pablo de Olavide"} imgSrc={olavideLogo} uniText={"<strong><a title=\"Universidad Pablo de Olavide\" href=\"https://www.distritounicoandaluz.org/universidad-pablo-de-olavide/\">UNIVERSIDAD PABLO DE OLAVIDE</a>:&nbsp;</strong>Ubicada en Sevilla, esta universidad fue creada en julio de 1997. Su oferta de estudios en la actualidad se distribuye en&nbsp;31 Grados y dobles Grados,&nbsp;40 Másteres Oficiales,&nbsp;9&nbsp;Programas de Doctorado, y&nbsp;147&nbsp;Títulos Propios."} />
+                        <p>Mas info sobre el <strong>Distrito Unico Andaluz</strong>: <a href="https://www.juntadeandalucia.es/economiainnovacionyciencia/sguit/">https://www.juntadeandalucia.es/economiainnovacionyciencia/sguit/</a>#</p>
 
-                        <University href={"http://www.unia.es/"} title={"UNIVERSIDAD INTERNACIONAL DE ANDALUCÍA"} imgSrc={univaLogo} uniText={"<strong>UNIVERSIDAD INTERNACIONAL DE ANDALUCÍA: </strong>Fue creada por Ley de la Comunidad Autónoma de Andalucía en 1994. Las enseñanzas que se imparten en esta universidad son especializadas y de postgrado e incluyen&nbsp;Programas Oficiales de Postgrado, Doctorados, Títulos Propios (Másteres Universitarios y Cursos de Experto Universitario), Cursos de Formación Permanente y Cursos de Verano."} />
+                        <FilterForm />
 
                         {/* REFACTORING SHOULD END HERE */}
 
-                        <p>Mas info sobre el <strong>Distrito Unico Andaluz</strong>: <a href="https://www.juntadeandalucia.es/economiainnovacionyciencia/sguit/">https://www.juntadeandalucia.es/economiainnovacionyciencia/sguit/</a>#</p>
+                        
                         <div style={{ fontSize: "0px", height: "0px", lineHeight: "0px", margin: "0", padding: "0", clear: "both" }}>
-                          </div>					
+                          </div>
+                          					
                         </div>
                     </div>
                     <footer className="entry-footer">
@@ -100,6 +90,7 @@ function App() {
       </div>
       <a href="https://www.distritounicoandaluz.org/#page" className="scrollup" id="btn-scrollup" style={{ display: "none" }}><i className="fa fa-angle-up"></i></a>
     </body>
+    </Provider>
   );
 }
 export default App;
diff --git a/src/components/FilterForm.tsx b/src/components/FilterForm.tsx
new file mode 100644
index 0000000..b7d8cee
--- /dev/null
+++ b/src/components/FilterForm.tsx
@@ -0,0 +1,142 @@
+import * as React from 'react';
+
+// DATOS
+var data = require('./db.json');
+
+interface IFilterFormState {
+    uni: string
+    tipo: string
+    area: string
+    results: [string, string][]
+}
+
+class FilterForm extends React.Component<{}, IFilterFormState> {
+
+    constructor(props: {}) {
+        super(props);
+        this.state = {
+            uni: "Universidad de Sevilla",
+            tipo: "Máster",
+            area: "Ingeniería",
+            results: []
+        };
+        this.queryDB = this.queryDB.bind(this); // TODO: check
+    }
+
+    public setUni(event: React.ChangeEvent<HTMLSelectElement>) {
+        let newState = {
+            uni: event.target.value,
+            tipo: this.state.tipo,
+            area: this.state.area,
+            results: this.state.results
+        }
+        this.setState(newState);
+    }
+    public setArea(event: React.ChangeEvent<HTMLSelectElement>) {
+        let newState = {
+            uni: this.state.uni,
+            tipo: this.state.tipo,
+            area: event.target.value,
+            results: this.state.results
+        }
+        this.setState(newState);
+    }
+    public setTipo(event: React.ChangeEvent<HTMLSelectElement>) {
+        let newState = {
+            uni: this.state.uni,
+            tipo: event.target.value,
+            area: this.state.area,
+            results: this.state.results
+        }
+        this.setState(newState);
+    }
+
+    public queryDB() {
+
+        //var res = []
+        const res: [string, string][] = [];
+        for (var i = 0; i < data.length; i++) {
+
+            var obj = data[i];
+            console.log(obj);
+
+            if (obj["university"] === this.state.uni) {
+
+                var uniWeb = obj["web"]
+
+                //console.log("")
+                //console.log(obj)
+                //console.log("")
+
+                var univ_degrees = obj["degrees"]
+                //console.log(univ_degrees)
+
+                for (var j = 0; j < univ_degrees.length; j++) {
+
+                    //console.log(univ_degrees[j])
+
+                    if (this.state.tipo === "Máster" && univ_degrees[j]["name"].includes("Máster") && this.state.area === univ_degrees[j]["area"]) {
+                        res.push([univ_degrees[j]["name"], uniWeb])
+                    }
+                    else if (this.state.tipo === "Grado" && !univ_degrees[j]["name"].includes("Máster") && this.state.area === univ_degrees[j]["area"]) {
+                        res.push([univ_degrees[j]["name"], uniWeb])
+                    }
+                }
+            }
+        }
+        console.log(res);
+        let newState = {
+            uni: this.state.uni,
+            tipo: this.state.tipo,
+            area: this.state.area,
+            results: res
+        }
+        this.setState(newState);
+    }
+
+    public render() {
+        return (
+
+            <div>
+                <h3>Buscador de Titulaciones</h3>
+                <div><label>Universidad </label>
+                    <select onChange={e => this.setUni(e)} >
+                        <option value="Universidad de Sevilla">Universidad de Sevilla</option>
+                        <option value="Universidad de Almería">Universidad de Almería</option>
+                        <option value="Universidad de Cádiz">Universidad de Cádiz</option>
+                        <option value="Universidad de Cordoba">Universidad de Cordoba</option>
+                        <option value="Universidad de Granada">Universidad de Granada</option>
+                        <option value="Universidad de Málaga">Universidad de Málaga</option>
+                        <option value="Universidad de Huelva">Universidad de Huelva</option>
+                        <option value="Universidad de Jaén">Universidad de Jaén</option>
+                        <option value="Universidad Pablo de Olavide">Universidad Pablo de Olavide</option>
+                    </select></div>
+
+                <div style={{ marginTop: "5px" }}><label>Area </label>
+                    <select onChange={e => this.setArea(e)} >
+                        <option value="Ingeniería">Ingenieria</option>
+                        <option value="Ciencias">Ciencias</option>
+                        <option value="Otros">Otras</option>
+                    </select></div>
+
+                <div style={{ marginTop: "5px" }}><label>Tipo de Titulación</label>
+                    <select onChange={e => this.setTipo(e)} >
+                        <option value="Máster">Máster</option>
+                        <option value="Grado">Grado</option>
+                    </select></div>
+
+                <button style={{ marginTop: "15px" }} onClick={this.queryDB} type="button">Buscar</button>
+
+                <div style={{ marginTop: "15px" }}>
+                    {this.state.results.map(degreeResult =>
+                        <div>
+                            <p>{degreeResult[0]} <a target="_blank" rel="noreferrer" href={degreeResult[1]}>(Más Información)</a></p>
+                        </div>
+                    )}
+                </div>
+
+            </div>
+        );
+    }
+}
+export default FilterForm;
diff --git a/src/components/University.tsx b/src/components/University.tsx
index 5a51621..9d65737 100644
--- a/src/components/University.tsx
+++ b/src/components/University.tsx
@@ -1,10 +1,25 @@
 import * as React from 'react';
 
-interface IUniversityProps {
+export interface IUniversityClasses<T> {
+    one: T;
+    two: T;
+    three: T;
+    four: T;
+    five: T;
+    six: T;
+    seven: T;
+    eight: T;
+    nine: T;
+    ten: T;
+}
+
+export interface IUniversityProps {
     href: string;
     imgSrc: string;
     title: string;
     uniText: string;
+    wrapperItemCounter: string;
+    classes: IUniversityClasses<string>;
 }
 
 interface IUniversityState {
@@ -12,6 +27,7 @@ interface IUniversityState {
     imgSrc: string;
     title: string;
     uniText: string;
+    wrapperItemCounter: string;
 }
 
 class University extends React.Component<IUniversityProps, IUniversityState> {
@@ -23,12 +39,42 @@ class University extends React.Component<IUniversityProps, IUniversityState> {
             imgSrc: this.props.imgSrc,
             title: this.props.title,
             uniText: this.props.uniText,
+            wrapperItemCounter: this.props.wrapperItemCounter,
         };
     }
 
+    public toIF(wpCounter: string) {
+        /*
+        Convierte string en
+        */
+        switch (wpCounter) {
+            case "one":
+                return this.props.classes.one
+            case "two":
+                return this.props.classes.two
+            case "three":
+                return this.props.classes.three
+            case "four":
+                return this.props.classes.four
+            case "five":
+                return this.props.classes.five
+            case "six":
+                return this.props.classes.six
+            case "seven":
+                return this.props.classes.seven
+            case "eight":
+                return this.props.classes.eight
+            case "nine":
+                return this.props.classes.nine
+            case "ten":
+                return this.props.classes.ten
+        }
+    }
+
     public render() {
+        let wpCount = this.toIF(this.state.wrapperItemCounter);
         return (
-
+            <div className={wpCount}> 
             <p>
                 <a href={this.state.href} target="_blank" rel="noopener noreferrer">
                     <img loading="lazy" className="aligncenter" title={this.state.title} src={this.state.imgSrc} alt={this.state.title} width="105" height="105" />
@@ -37,8 +83,9 @@ class University extends React.Component<IUniversityProps, IUniversityState> {
                     __html: this.state.uniText
                 }}></div>
             </p>
+            </div>
 
         );
     }
 }
-export default University;
\ No newline at end of file
+export default University;
diff --git a/src/components/UniversityList.tsx b/src/components/UniversityList.tsx
new file mode 100644
index 0000000..e9e5a0f
--- /dev/null
+++ b/src/components/UniversityList.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import olavideLogo from '../assets/img/olavide.jpg'
+import ualLogo from '../assets/img/ual.jpg'
+import ucoLogo from '../assets/img/uco.jpg'
+import ucaLogo from '../assets/img/uca-233x300.jpeg'
+import ugrLogo from '../assets/img/ugr.jpg'
+import uhuLogo from '../assets/img/uhu.jpg'
+import ujaenLogo from '../assets/img/ujaen.jpg'
+import umaLogo from '../assets/img/uma.jpg'
+import univaLogo from '../assets/img/univa.jpg'
+import usevillaLogo from '../assets/img/usevilla.jpg'
+import University from '../styledComponents/University'
+
+
+interface IUniversityListClasses<T> {
+    wrapper: T;
+}
+
+export interface IUniversityListProps {
+    classes: IUniversityListClasses<string>;
+}
+
+
+class UniversityList extends React.Component<IUniversityListProps, {}> {
+
+    public render() {
+        return ( 
+            
+            <div className={this.props.classes.wrapper}> {/* public/css/wrapper.css */}
+                        
+                          <University wrapperItemCounter={"one"} href={"https://www.ual.es/"} title={"Universidad de Almería"} imgSrc={ualLogo} uniText={"<strong><a title=\"Universidad de Almeria\" href=\"https://www.distritounicoandaluz.org/universidad-de-almeria/\">UNIVERSIDAD DE ALMERÍA</a>:</strong> Creada por el Parlamento Andaluz en 1993. Es una de las universidades más jóvenes de España. Su oferta académica incluye más&nbsp;de 30 titulaciones, más de 37 programas de doctorado (9 de ellos con mención de calidad), 13 másteres oficiales y 12 másteres propios."} />
+
+                          <University wrapperItemCounter={"two"} href={"https://www.uca.es/"} title={"Universidad de Cádiz"} imgSrc={ucaLogo} uniText={"<strong><a title=\"Universidad de Cadiz\" href=\"https://www.distritounicoandaluz.org/universidad-de-cadiz/\">UNIVERSIDAD DE CADIZ</a>:</strong>&nbsp;Comenzó sus actividades en octubre de 1979.&nbsp;La oferta actual de estudios abarca un total de 41 titulaciones de Grado, 12 Programas Conjuntos de Estudios Oficiales de Grado (PCEO), 39 Másteres Universitarios y 15 Programas de Doctorado."}/>
+                          
+                          <University wrapperItemCounter={"three"} href={"https://www.uco.es/"} title={"Universidad de Cordoba"} imgSrc={ucoLogo} uniText={"<strong><a title=\"Universidad de Cordoba\" href=\"https://www.distritounicoandaluz.org/universidad-de-cordoba/\">UNIVERSIDAD DE CÓRDOBA</a>:</strong>&nbsp;fundada como tal en 1972, sus raíces se remontan a la Universidad Libre que funcionó en la provincia a finales del siglo XIX y cuenta con estudios centenarios como los de Veterinaria, únicos en Andalucía.&nbsp;Los estudios de esta universidad van desde las Humanidades y las Ciencias Jurídico-Sociales a las Ciencias de la Salud y las carreras científico-técnicas."} />
+
+                          <University wrapperItemCounter={"four"} href={"https://www.ugr.es/"} title={"Universidad de Granada"} imgSrc={ugrLogo} uniText={"<strong><a title=\"Universidad de Granada\" href=\"https://www.distritounicoandaluz.org/universidad-de-granada/\">UNIVERSIDAD DE GRANADA</a>:</strong> Fundada en 1531, es la continuadora de una larga tradición docente que enlaza con la de la Madraza del último Reino Nazarí.&nbsp;Actualmente se imparten 75&nbsp;titulaciones&nbsp;en los 28&nbsp;centros docentes&nbsp;de que dispone la Universidad. Por otro lado,&nbsp;su&nbsp;<a title=\"servicios/ep\" href=\"http://www.ugr.es/pages/servicios/ep\">Escuela Internacional de Posgrado</a>&nbsp;ofrece 68 Másteres, 116 Doctorados y 113 cursos complementarios."} />
+
+                          <University wrapperItemCounter={"five"} href={"http://www.uma.es/"} title={"Universidad de Málaga"} imgSrc={umaLogo} uniText={"<strong><a title=\"Universidad de Malaga\" href=\"https://www.distritounicoandaluz.org/universidad-de-malaga/\">UNIVERSIDAD DE MÁLAGA</a>:</strong> Creada oficialmente en agosto de 1972. Su oferta académica comprende 62 Grados, 43 Programas de Doctorado, 55 Másteres, y 39 Títulos Propios de Postgrado (Máster y Experto)."} />
+
+                          <University wrapperItemCounter={"six"} href={"https://www.uhu.es/"} title={"Universidad de Huelva"} imgSrc={uhuLogo} uniText={"<strong><a title=\"Universidad de Huelva\" href=\"https://www.distritounicoandaluz.org/universidad-de-huelva/\">UNIVERSIDAD DE HUELVA</a>:&nbsp;</strong>Creada en julio de 1993. Actualmente cuenta con una oferta de 36 titulaciones de Grado, 4 Estudios de Segundo Ciclo, 28 Másteres Oficiales, y 21 Programas de Doctorados."} />
+                          
+                          <University wrapperItemCounter={"seven"} href={"https://www.us.es/"} title={"Universidad de Sevilla"} imgSrc={usevillaLogo} uniText={"<strong><a title=\"Universidad de Sevilla\" href=\"https://www.distritounicoandaluz.org/universidad-de-sevilla/\">UNIVERSIDAD DE SEVILLA</a>: </strong>Fundada hace más de quinientos años, es la segunda universidad española en número de estudiantes y la primera de Andalucía. Su oferta académica actual ronda las 66 titulaciones de Grado desde el Primer Curso, 86 Másteres Universitarios, 152 Programas de Doctorado, y 335 Estudios de Postgrado Universitario."} />
+                          
+                          <University wrapperItemCounter={"eight"} href={"https://www10.ujaen.es/"} title={"Universidad de Jaén"} imgSrc={ujaenLogo} uniText={"<strong><a title=\"Universidad de Jaen\" href=\"https://www.distritounicoandaluz.org/universidad-de-jaen/\">UNIVERSIDAD DE JAÉN</a>:&nbsp;</strong>Sus orígenes&nbsp;se remontan a la creación de la Universidad de Baeza en la Edad Moderna, con un amplio recorrido hasta llegar a 1993 en que inicia su andadura como institución autónoma.&nbsp;&nbsp;Su oferta académica, “diseñada de acuerdo con las necesidades laborales y profesionales de la sociedad”, está conformada por más de 50 titulaciones de Grado, Primer y Segundo Ciclo y 22 másteres, algunos de ellos impartidos a través de Internet."} />
+
+                          <University wrapperItemCounter={"nine"} href={"https://www.upo.es/portal/impe/web/portada"} title={"Universidad Pablo de Olavide"} imgSrc={olavideLogo} uniText={"<strong><a title=\"Universidad Pablo de Olavide\" href=\"https://www.distritounicoandaluz.org/universidad-pablo-de-olavide/\">UNIVERSIDAD PABLO DE OLAVIDE</a>:&nbsp;</strong>Ubicada en Sevilla, esta universidad fue creada en julio de 1997. Su oferta de estudios en la actualidad se distribuye en&nbsp;31 Grados y dobles Grados,&nbsp;40 Másteres Oficiales,&nbsp;9&nbsp;Programas de Doctorado, y&nbsp;147&nbsp;Títulos Propios."} />
+
+                          <University wrapperItemCounter={"ten"} href={"http://www.unia.es/"} title={"UNIVERSIDAD INTERNACIONAL DE ANDALUCÍA"} imgSrc={univaLogo} uniText={"<strong>UNIVERSIDAD INTERNACIONAL DE ANDALUCÍA: </strong>Fue creada por Ley de la Comunidad Autónoma de Andalucía en 1994. Las enseñanzas que se imparten en esta universidad son especializadas y de postgrado e incluyen&nbsp;Programas Oficiales de Postgrado, Doctorados, Títulos Propios (Másteres Universitarios y Cursos de Experto Universitario), Cursos de Formación Permanente y Cursos de Verano."} />
+                          
+                        </div>
+
+        );
+    }
+}
+export default UniversityList;
\ No newline at end of file
diff --git a/src/components/db.json b/src/components/db.json
new file mode 100644
index 0000000..d264202
--- /dev/null
+++ b/src/components/db.json
@@ -0,0 +1,200 @@
+[{
+    "university": "Universidad de Almería",
+    "web":"https://www.ual.es/",
+    "degrees": [
+      {"name":"Máster en Educación Especial","area":"Otros"},
+      {"name":"Máster en Investigación y Evaluación Didáctica en el Aula para el Desarrollo Profesional Docente","area":"Otros"},
+      {"name":"Máster en Producción Vegetal en Cultivos Protegidos","area":"Ciencias"},
+      {"name":"Máster en Química","area":"Ciencias"},
+      {"name":"Máster en Contabilidad y Finanzas Corporativas","area":"Otros"},
+      {"name":"Máster en Dirección de Empresas","area":"Otros"},
+      {"name":"Grado en Estudios Ingleses (Plan 2010)","area":"Otros"},
+      {"name":"Grado en Humanidades (Plan 2010)","area":"Otros"},
+      {"name":"Grado en Psicología (Plan 2010)","area":"Ciencias"},
+      {"name":"Grado en Marketing e Investigación de Mercados (Plan 2010)","area":"Otros"},
+      {"name":"Grado en Administración y Dirección de Empresas (Plan 2010)","area":"Otros"},
+      {"name":"Grado en Turismo (Plan 2010)","area":"Otros"},
+      {"name":"Grado en Educación Social","area":"Otros"},
+      {"name":"Grado en Ciencias Ambientales","area":"Ciencias"},
+      {"name":"Grado en Ingeniería Química Industrial","area":"Ingeniería"},
+      {"name":"Grado en Matemáticas","area":"Ciencias"},
+      {"name":"Grado en Química","area":"Ciencias"}
+    ]
+  },
+  {
+    "university": "Universidad de Cadiz",
+    "web":"https://www.uca.es/",
+    "degrees": [
+      {"name":"Máster Universitario en Contabilidad y Auditoría","area":"Otros"},
+      {"name":"Máster Universitario en Dirección de Empresas","area":"Otros"},
+      {"name":"Máster Universitario en Creación de Empresas, Nuevos Negocios y Proyectos Innovadores","area":"Otros"},
+      {"name":"Máster en Dirección de los Recursos Humanos","area":"Otros"},
+      {"name":"Administración y Dirección de Empresas","area":"Otros"},
+      {"name":"Finanzas y Contabilidad","area":"Otros"},
+      {"name":"Biotecnología","area":"Ciencias"},
+      {"name":"Enología","area":"Ciencias"},
+      {"name":"Ingeniería Química","area":"Ingeniería"},
+      {"name":"Matemáticas","area":"Ciencias"},
+      {"name":"Educación Infantil","area":"Otros"},
+      {"name":"Química","area":"Ciencias"},
+      {"name":"Ciencias de la Actividad Física y del Deporte","area":"Ciencias"},
+      {"name":"Educación Primaria","area":"Otros"},
+      {"name":"Psicología","area":"Ciencias"},
+      {"name":"Filología Hispánica","area":"Otros"},
+      {"name":"Humanidades","area":"Otros"},
+      {"name":"Lingüística y Lenguas Aplicadas","area":"Otros"},
+      {"name":"Doble Grado en Filología Clásica y Estudios Ingleses","area":"Otros"}
+    ]
+  },
+  {
+    "university": "Universidad de Córdoba",
+    "web":"https://www.uco.es/",
+    "degrees": [
+      {"name":"Máster en Medicina, Sanidad y Mejora Animal","area":"Ciencias"},
+      {"name":"Máster en Vitivinicultura en Climas Cálidos (con la U. de Cádiz)","area":"Ciencias"},
+      {"name":"Máster en Agroalimentación","area":"Ciencias"},
+      {"name":"Máster en Zootecnia y Gestión Sostenible","area":"Ciencias"},
+      {"name":"Veterinaria","area":"Ciencias"},
+      {"name":"Ciencia y Tecnología de los Alimentos","area":"Ciencias"},
+      {"name":"Medicina","area":"Ciencias"},
+      {"name":"Filología Hispánica","area":"Otros"},
+      {"name":"Estudios Ingleses","area":"Otros"},
+      {"name":"Historia","area":"Otros"},
+      {"name":"Traducción e Interpretación","area":"Otros"},
+      {"name":"Historia del Arte","area":"Otros"},
+      {"name":"Ingeniería Mecánica","area":"Ingeniería"}
+    ]
+  },
+  {
+    "university": "Universidad de Granada",
+    "web":"https://www.ugr.es/",
+    "degrees": [
+      {"name":"Máster Universitario en Artes Visuales y Educación","area":"Otros"},
+      {"name":"Máster Universitario en Producción e Investigación en Arte","area":"Otros"},
+      {"name":"Máster Universitario en Dibujo: Creación Artística, Producción y Difusión","area":"Otros"},
+      {"name":"Máster  en Museología (Propio)","area":"Otros"},
+      {"name":"Máster en Ingeniería Geológica Aplicada a la Obra Civil","area":"Ingeniería"},
+      {"name":"Máster en Matemáticas","area":"Ciencias"},
+      {"name":"Máster en Microbiología","area":"Ciencias"},
+      {"name":"Bellas Artes","area":"Otros"},
+      {"name":"Conservación y Restauración de Bienes Culturales","area":"Ciencias"},
+      {"name":"Ciencias de la Actividad Física y el Deporte","area":"Ciencias"},
+      {"name":"Ciencias Ambientales","area":"Ciencias"},
+      {"name":"Estadística","area":"Ciencias"},
+      {"name":"Física","area":"Ciencias"},
+      {"name":"Geología","area":"Ciencias"},
+      {"name":"Ingeniería Electrónica Industrial","area":"Ingeniería"},
+      {"name":"Ingeniería Química","area":"Ingeniería"},
+      {"name":"Ingeniería Informática y Matemáticas","area":"Ingeniería"},
+      {"name":"Matemáticas","area":"Ciencias"}
+    ]
+  },
+  {
+    "university": "Universidad de Jaén",
+    "web":"https://www10.ujaen.es/",
+    "degrees": [
+      {"name":"Máster Universitario en Abogacía","area":"Otros"},
+      {"name":"Máster Universitario en Dependencia e Igualdad en la Autonomía Personal","area":"Otros"},
+      {"name":"Máster Universitario en Marketing y Comportamiento del Consumidor (Interuniversitario)","area":"Otros"},
+      {"name":"Máster Universitario en Prevención de Riesgos Laborales","area":"Otros"},
+      {"name":"Máster Universitario en Turismo, Arqueología y Naturaleza","area":"Otros"},
+      {"name":"Máster Universitario en Biotecnología y Biomedicina","area":"Ciencias"},
+      {"name":"Máster Universitario en Ingeniería del Transporte Terrestre y Logística","area":"Ingeniería"},
+      {"name":"Doble titulación de Grado en Administración y Dirección de Empresas y Grado en Derecho","area":"Otros"},
+      {"name":"Grado en Administración y Dirección de Empresas","area":"Otros"},
+      {"name":"Grado en Ciencias Ambientales","area":"Ciencias"},
+      {"name":"Grado en Educación Infantil","area":"Otros"},
+      {"name":"Grado en Ingeniería Electrónica Industrial","area":"Ingeniería"},
+      {"name":"Grado en Educación Primaria","area":"Otros"},
+      {"name":"Grado en Derecho","area":"Otros"},
+      {"name":"Grado en Estadística y Empresa","area":"Otros"},
+      {"name":"Grado en Finanzas y Contabilidad","area":"Otros"},
+      {"name":"Grado en Gestión y Administración Pública","area":"Otros"},
+      {"name":"Grado en Relaciones Laborales y Recursos Humanos","area":"Otros"},
+      {"name":"Grado en Turismo","area":"Otros"}
+    ]
+  },
+  {
+    "university": "Universidad de Huelva",
+    "web":"https://www.uhu.es/",
+    "degrees": [
+      {"name":"Máster Oficial en Ciencia y Tecnología Química","area":"Ciencias"},
+      {"name":"Máster Oficial Eurheo (European Master In Engineering Rheology)","area":"Ciencias"},
+      {"name":"Máster Oficial en Formulación y Tecnología del Producto: Aplicación a la Industria Química, Agroalimentaria y Farmaucéutica","area":"Ciencias"},
+      {"name":"Máster Oficial en Geología y Gestión Ambiental de los Recursos Minerales","area":"Ciencias"},
+      {"name":"Máster Oficial en Ingeniería e Instrumentación Nuclear","area":"Ingeniería"},
+      {"name":"Máster Oficial en Tecnología Ambiental","area":"Ciencias"},
+      {"name":"Ciencias Ambientales","area":"Ciencias"},
+      {"name":"Geología","area":"Ciencias"},
+      {"name":"Ingeniería Eléctrica","area":"Ingeniería"},
+      {"name":"Historia","area":"Ciencias"},
+      {"name":"Humanidades","area":"Otros"},
+      {"name":"Filología Hispánica","area":"Otros"},
+      {"name":"Química","area":"Ciencias"},
+      {"name":"Doble Grado en Ciencias Ambientales y Geología","area":"Ciencias"}
+    ]
+  },
+  {
+    "university": "Universidad de Málaga",
+    "web":"http://www.uma.es/",
+    "degrees": [
+      {"name":"Máster en Biología Celular y Molecular","area":"Ciencias"},
+      {"name":"Máster en Matemáticas","area":"Ciencias"},
+      {"name":"Máster en Química Avanzada. Preparación y Caracterización de Materiales","area":"Ciencias"},
+      {"name":"Máster en Recursos Hídricos y Medio Ambiente","area":"Otros"},
+      {"name":"Grado en Bellas Artes","area":"Otros"},
+      {"name":"Grado en Matemáticas","area":"Ciencias"},
+      {"name":"Grado en Biología","area":"Ciencias"},
+      {"name":"Grado en Ingeniería Química","area":"Ingeniería"},
+      {"name":"Grado en Bioquímica","area":"Ciencias"},
+      {"name":"Grado en Economía","area":"Ciencias"},
+      {"name":"Grado en Ingeniería Química","area":"Ingeniería"},
+      {"name":"Grado en Ciencias Ambientales","area":"Ciencias"},
+      {"name":"Grado en Bioquímica","area":"Ciencias"}
+    ]
+  },
+  {
+    "university": "Universidad Pablo de Olavide",
+    "web":"https://www.upo.es/portal/impe/web/portada",
+    "degrees": [
+      {"name":"Máster en Comunicación Internacional, Traducción e Interpretación","area":"Otros"},
+      {"name":"Máster en Historia de América Latina. Mundos Indígenas","area":"Otros"},
+      {"name":"Máster en Religiones y Sociedades","area":"Otros"},
+      {"name":"Máster en Abogacía","area":"Otros"},
+      {"name":"Humanidades","area":"Otros"},
+      {"name":"Geografía e Historia","area":"Otros"},
+      {"name":"Traducción e Interpretación","area":"Otros"},
+      {"name":"Trabajo Social","area":"Otros"},
+      {"name":"Biotecnología","area":"Ciencias"},
+      {"name":"Ingeniería Informática en Sistemas de Información","area":"Ingeniería"},
+      {"name":"Nutrición Humana y Dietética","area":"Ciencias"},
+      {"name":"Ciencias Ambientales","area":"Ciencias"},
+      {"name":"Derecho","area":"Otros"}
+    ]
+  },
+  {
+    "university": "Universidad de Sevilla",
+    "web":"https://www.us.es/",
+    "degrees": [
+      {"name":"Máster Universitario en Automática, Robótica y Telemática (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Ingeniería Ambiental (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Economía y Desarrollo (R.D.1393/07)","area":"Otros"},
+      {"name":"Máster Universitario en Actividad Física y Calidad de Vida de Personas Adultas y Mayores (RD.1393/2007)","area":"Otros"},
+      {"name":"Máster Universitario en Sistemas de Energía Térmica (R.D.1393/07)","area":"Ciencias"},
+      {"name":"Máster Universitario en Ingeniería Informática","area":"Ingeniería"},
+      {"name":"Máster Universitario en Automática, Robótica y Telemática (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Diseño Avanzado en Ingeniería Mecánica (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Electrónica, Tratamiento de Señal y Comunicaciones (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Ingeniería Ambiental (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Organización Industrial y Gestión de Empresas (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Sistemas de Energía Eléctrica (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Máster Universitario en Sistemas de Energía Térmica (R.D.1393/07)","area":"Ingeniería"},
+      {"name":"Grado en Ingeniería Aeroespacial","area":"Ingeniería"},
+      {"name":"Doble Grado en Derecho y en Economía","area":"Ciencias"},
+      {"name":"Grado en Bellas Artes","area":"Otros"},
+      {"name":"Grado en Biología","area":"Ciencias"},
+      {"name":"Doble Grado en Educación Primaria y Estudios Franceses","area":"Otros"},
+      {"name":"Grado en Ingeniería Química","area":"Ingeniería"}
+    ]
+  }
+]
diff --git a/src/containers/FilterForm.tsx b/src/containers/FilterForm.tsx
new file mode 100644
index 0000000..5a5ff78
--- /dev/null
+++ b/src/containers/FilterForm.tsx
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+
+import FilterForm from '../components/FilterForm';
+import IGlobalState from '../states/globalState';
+
+const mapStateToProps = (state:IGlobalState) => {
+    return({university: state.uni}) //las propiedades del componente FilterForm
+    //crea esa propiedad a partir de la información del estado global
+}
+
+//Con esto, ese FilterForm recibe el store de forma automatica
+export default connect(mapStateToProps)(FilterForm); 
\ No newline at end of file
diff --git a/src/states/globalState.ts b/src/states/globalState.ts
new file mode 100644
index 0000000..02ca5de
--- /dev/null
+++ b/src/states/globalState.ts
@@ -0,0 +1,15 @@
+interface IGlobalState {
+    uni: string,
+    tipo: string,
+    area: string
+}
+
+export default IGlobalState;
+
+export const initialState: IGlobalState = {
+    //estado inicial, definir a mano
+    uni: "Universidad de Sevilla",
+    tipo: "Máster",
+    area: "Ingeniería"
+
+}
\ No newline at end of file
diff --git a/src/styledComponents/University.js b/src/styledComponents/University.js
new file mode 100644
index 0000000..53640de
--- /dev/null
+++ b/src/styledComponents/University.js
@@ -0,0 +1,68 @@
+import University from '../components/University';
+
+import injectSheet from 'react-jss';
+
+const classes = {
+    one: {
+        gridColumn: 1,
+        gridRow: 1,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    two: {
+        gridColumn: 2,
+        gridRow: 2,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    three: {
+        gridColumn: 3,
+        gridRow: 1,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    four: {
+        gridColumn: 4,
+        gridRow: 2,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    five: {
+        gridColumn: 5,
+        gridRow: 1,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    six: {
+        gridColumn: 1,
+        gridRow: 2,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    seven: {
+        gridColumn: 2,
+        gridRow: 1,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    eight: {
+        gridColumn: 3,
+        gridRow: 2,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    },
+    nine: {
+        gridColumn: 4,
+        gridRow: 1,
+        textAlign: "justify",
+        textJustify: "inter-word",
+    },
+    ten: {
+        gridColumn: 5,
+        gridRow: 2,
+        textAlign: "justify",
+        textJustify: "inter-word"
+    }
+}
+
+export default injectSheet(classes)(University);
\ No newline at end of file
diff --git a/src/styledComponents/UniversityList.js b/src/styledComponents/UniversityList.js
new file mode 100644
index 0000000..49ea740
--- /dev/null
+++ b/src/styledComponents/UniversityList.js
@@ -0,0 +1,14 @@
+import UniversityList from '../components/UniversityList';
+
+import injectSheet from 'react-jss';
+
+const classes = {
+    wrapper: {
+        display: "grid",
+        gridTemplateColumns: "repeat(5, 1fr)",
+        gap: "40px",
+        gridAutoRows: "minmax(100px, auto)",
+      }
+}
+
+export default injectSheet(classes)(UniversityList);
\ No newline at end of file
