diff --git a/src/Components/Login/Login.css b/src/Components/Login/Login.css
index 023919e..ea353a4 100644
--- a/src/Components/Login/Login.css
+++ b/src/Components/Login/Login.css
@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     margin: 0;
     padding: 0;
@@ -54,6 +54,11 @@
     border-radius: 10px;
 }
 
+.mb-3 {
+    display: flex;
+    flex-direction: column;
+}
+
 .btn-primary {
     outline: #4b7f30 3px solid;
     margin-top: 10px;
diff --git a/src/Components/Login/LoginForm.jsx b/src/Components/Login/LoginForm.jsx
index 5fcae1a..3a9f441 100644
--- a/src/Components/Login/LoginForm.jsx
+++ b/src/Components/Login/LoginForm.jsx
@@ -1,46 +1,15 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
+//Custom Hooks
+import useFecth from '../../Hooks/useFecth';
+
 //CSS
 import './Login.css'
 
 export default function LoginForm() {
 
-    const [user, setUser] = useState('');
-    const [password, setPassword] = useState('');
-
-    const inputUser = (event) => {
-        setUser(event.target.value);
-    }
-
-    const inputPass = (event) => {
-        setPassword(event.target.value);
-    }
-
-    const Login = () => {
-
-        fetch('https://SofiaPlus-API.11-cardozo-joan.repl.co',
-            {
-                method: "PUT",
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    name: user,
-                    log: password
-                })
-            }
-        )
-            .then(res => res.json())
-            .then(res => {
-                res.validate === 'Correct Password'
-                    ? //If
-                    window.localStorage.setItem('SessionID', user)
-                    : //Else
-                    console.log('not logued');
-            })
-            .catch(e => console.error(e))
-    }
+    const { login, changeType, inputPass, inputUser } = useFecth();
 
     return (
 
@@ -52,19 +21,24 @@ export default function LoginForm() {
                             <h1 id='form-title'>Inicio de Sesión</h1>
                         </div>
                         <div className="card-body">
+                            <br />
                             <div className="mb-3">
-                                <br />
-                                <label htmlFor='usuario' className="form-label">Usuario</label>
-                                <input onChange={(ev) => inputUser(ev)} required type="number" className="LoginInputs" name="Identification" id="usuario" placeholder="Usuario" />
+                                <label htmlFor='Type' className="form-label">Tipo de Documento</label>
+                                <select required onChange={ev => changeType(ev)} name="type" className="LoginInputs" id="correo electronico" >
+                                    <option value="Ti">Tarjeta de Identidad</option>
+                                    <option value="cc">Cedula de Ciudadania</option>
+                                </select>
+                            </div>
+                            <div className="mb-3">
+                                <label htmlFor='usuario' className="form-label">Identificacion</label>
+                                <input onChange={ev => inputUser(ev)} required type="number" className="LoginInputs" name="Identification" id="usuario" placeholder="Usuario" />
                             </div>
-                            <br />
                             <div className="mb-3">
                                 <label htmlFor='contraseña' className="form-label">Contraseña</label>
-                                <input onChange={(ev) => inputPass(ev)} required type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
+                                <input onChange={ev => inputPass(ev)} required type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
                             </div>
-                            <br />
                             <Link to='/' aria-label='exit to login form'>
-                                <input onClick={() => Login()} type="submit" value="Iniciar Sesion" className="btn-primary" />
+                                <input onClick={() => login()} type="submit" value="Iniciar Sesion" className="btn-primary" />
                             </Link>
                             <br /><br />
                             <small>Si no tienes usuario <Link to='/register'>Registrate</Link></small>
diff --git a/src/Components/Navbar/Components/options.jsx b/src/Components/Navbar/Components/options.jsx
index 3a6052e..9716735 100644
--- a/src/Components/Navbar/Components/options.jsx
+++ b/src/Components/Navbar/Components/options.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 
 //Data
diff --git a/src/Components/Navbar/navbar.css b/src/Components/Navbar/navbar.css
index c38384e..b232914 100644
--- a/src/Components/Navbar/navbar.css
+++ b/src/Components/Navbar/navbar.css
@@ -8,12 +8,13 @@ nav,
 }
 
 .navSF-Base {
-    background: #52952e;
+    background: #4dad33;
     width: 100%;
     height: 20%;
     display: grid;
     grid-template-areas: "n01 n02 n02 n03";
     align-items: center;
+    border: solid 1.5px #4b7f30;
 }
 
 #logo-Nav {
@@ -54,12 +55,12 @@ nav,
 
 .navSF-Base-Search-container {
     width: 40%;
-    background: #4dad33;
+    background: #fff;
     border-radius: 10px;
-    outline: 3px #282828 solid;
+    outline: 1.5px #52952e solid;
 }
 
-.navSF-Base-Search-container:hover {
+.navSF-Base-Search-container:hover, #searcher:focus{
     outline: 3px #000000 solid;
 }
 
@@ -95,7 +96,7 @@ button {
 .navSF-Options {
     display: block;
     border-radius: 10px;
-    border: solid 3px #4b7f30;
+    border: solid 1.5px #4b7f30;
     font-size: x-large;
     position: absolute;
     top: 110%;
diff --git a/src/Components/Register/register.css b/src/Components/Register/register.css
index 023919e..a601aed 100644
--- a/src/Components/Register/register.css
+++ b/src/Components/Register/register.css
@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 3;
     top: 0;
     margin: 0;
     padding: 0;
@@ -12,6 +12,18 @@
     
 }
 
+.mb-8 {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+}
+
+.mb-3-names {
+    width: 45%;
+}
+
 .ext {
     cursor: default;
     position: absolute;
@@ -31,7 +43,7 @@
 
 .card-body {
     background-color: #f5f4f3;
-    padding: 0px 45px 25px 45px;
+    padding: 0px 20px 25px 20px;
     border-radius: 0 0 9px 9px;
 }
 
@@ -42,7 +54,8 @@
 }
 
 .row {
-    z-index: 2;
+    width: 40%;
+    z-index: 4;
     display: flex;
     justify-content: center;
     text-align: center;
@@ -50,6 +63,7 @@
 }
 
 .col-md-8 {
+    width: 90%;
     border: 1px #757575 solid;
     border-radius: 10px;
 }
@@ -91,4 +105,10 @@
 
 .LoginInputs:hover, .LoginInputs:focus {
     outline: 3px solid #67b23e;
+}
+
+@media screen and (max-width: 680px) {
+    .row {
+        width: 95%;
+    }
 }
\ No newline at end of file
diff --git a/src/Components/Register/register.jsx b/src/Components/Register/register.jsx
index 9277b85..7abca44 100644
--- a/src/Components/Register/register.jsx
+++ b/src/Components/Register/register.jsx
@@ -1,49 +1,57 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import useFecth from '../../Hooks/useFecth';
 
 //CSS
 import './register.css'
 
 export default function RegisterForm() {
 
+    const { register, changeType, inputPass, inputUser, inputApellido, inputNombre } = useFecth();
+
     return (
 
         <div className="Login-Form">
             <div className="row">
                 <div className="col-md-8">
-                    <form action="http://localhost/CRUD/server/signing.php" method="post">
+                    <div>
                         <div className="card-header">
                             <h1 id='form-title'>Registro de Usuario</h1>
                         </div>
                         <div className="card-body">
-                            <div className="mb-3">
-                                <br />
-                                <label htmlFor='usuario' className="form-label">Usuario</label>
-                                <input required type="text" className="LoginInputs" name="Identification" id="usuario" placeholder="Usuario" />
-                            </div>
                             <br />
+                            <div className="mb-8">
+                                <div className="mb-3-names">
+                                    <label htmlFor='nombres' className="form-label">Nombres</label>
+                                    <input required onChange={ev => inputNombre(ev)} type='text' name="nombres" className="LoginInputs" id="nombres" placeholder="Nombre Completos" />
+                                </div>
+                                <div className="mb-3-names">
+                                    <label htmlFor='apellidos' className="form-label">Apellidos</label>
+                                    <input required onChange={ev => inputApellido(ev)} type='text' name="apellidos" className="LoginInputs" id="apellidos" placeholder="Apellidos Completos" />
+                                </div>
+                            </div>
                             <div className="mb-3">
                                 <label htmlFor='identificacion' className="form-label">Identificacion</label>
-                                <input required type='number' name="Identificacion" className="LoginInputs" id="identificacion" placeholder="Identificacion" />
+                                <input required onChange={ev => inputUser(ev)} type='number' name="Identificacion" className="LoginInputs" id="identificacion" placeholder="Identificacion" />
                             </div>
-                            <br />
                             <div className="mb-3">
-                                <label htmlFor='correo electronico' className="form-label">Correo</label>
-                                <input required type="email" name="Correo" className="LoginInputs" id="correo electronico" placeholder="Correo Electronico" />
+                                <label htmlFor='Type' className="form-label">Tipo de Documento</label>
+                                <select required onChange={ev => changeType(ev)} name="type" className="LoginInputs" id="correo electronico" >
+                                    <option value="ti">Tarjeta de Identidad</option>
+                                    <option value="cc">Cedula de Ciudadania</option>
+                                </select>
                             </div>
-                            <br />
                             <div className="mb-3">
                                 <label htmlFor='contraseña' className="form-label">Contraseña</label>
-                                <input required type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
+                                <input required onChange={ ev => inputPass(ev) } type="password" name="Password" className="LoginInputs" id="contraseña" placeholder="Constraseña" />
                             </div>
-                            <br />
                             <Link to='/' aria-label='exit to login form'>
-                                <input type="submit" value="Registrate" className="btn-primary" />
+                                <input onClick={() => register()} type="submit" value="Registrate" className="btn-primary" />
                             </Link>
                             <br /><br />
                             <small>Si ya tienes un usuario <Link to='/login'>Inicia Sesion</Link></small>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div >
             <Link to='/' aria-label='exit to login form'>
diff --git a/src/Hooks/useFecth.jsx b/src/Hooks/useFecth.jsx
index b01f5e7..159a431 100644
--- a/src/Hooks/useFecth.jsx
+++ b/src/Hooks/useFecth.jsx
@@ -1 +1,89 @@
-import React from 'react';
\ No newline at end of file
+import React, { useState } from 'react';
+
+export default function useFecth() {
+
+    const [Type, setType] = useState('Ti')
+    const [User, setUser] = useState('');
+    const [Password, setPassword] = useState('');
+    const [Nombre, setNombre] = useState('');
+    const [Apellido, setApellido] = useState('');
+    const [responce, setResponce] = useState(false);
+
+    const inputUser = (event) => {
+        setUser(event.target.value);
+    }
+
+    const inputPass = (event) => {
+        setPassword(event.target.value);
+    }
+
+    //Change the type of document
+    const changeType = (event) => {
+        console.log(event.target.value);
+        setType(event.target.value);
+    }
+
+    const inputNombre = (event) => {
+        setNombre(event.target.value);
+    }
+
+    const inputApellido = (event) => {
+        setApellido(event.target.value);
+    }
+
+    const login = () => {
+
+        console.log('Login');
+
+        fetch('http://localhost:4000/', {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                type: Type,
+                id: User,
+                pass: Password
+            })
+        })
+            .then(res => res.json())
+            .then(res => {
+                res.validate === true
+                    ? //If
+                    window.localStorage.setItem('SessionID', User)
+                    : //Else
+                    setResponce(false)
+            })
+            .catch(e => console.log(e));
+
+    }
+
+    const register = () => {
+
+        fetch('http://localhost:4000/', {
+            method: "PUT",
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                type: Type,
+                id: User,
+                pass: Password,
+                nombre: Nombre,
+                apellido: Apellido
+            })
+        })
+            .then(res => res.json())
+            .then(res => {
+                res.register === 'Succesfull Register'
+                    ? //If
+                    setResponce(true)
+                    :// Else
+                    setResponce(false)
+            })
+            .catch(e => console.log(e));
+    }
+
+    return { login, register, inputPass, inputUser, changeType, inputNombre, inputApellido }
+
+}
\ No newline at end of file
diff --git a/src/Routes/Class/Class.jsx b/src/Routes/Class/Class.jsx
index e19e4e8..0220fa7 100644
--- a/src/Routes/Class/Class.jsx
+++ b/src/Routes/Class/Class.jsx
@@ -1,17 +1,104 @@
 import React from 'react';
 
+import './class.css'
+
 export default function Classmates() {
 
     return (
 
         <div className="ClassmatesSF">
-            <br /><br /><br /><br /><br />
-            <br /><br /><br /><br /><br />
-            <br /><br /><br /><br /><br />
-            <h1>Classmates Section</h1>
-            <br /><br /><br /><br /><br />
-            <br /><br /><br /><br /><br />
-            <br /><br /><br /><br /><br />
+            <div className="contenedor-cursos">
+                <div className="contenedor-card-cursos">
+                    <div className="header-cursos">
+                        <div className="red">
+                            <img src="img/27365.png" />
+                        </div>
+                        <h2>Lorem, ipsum.</h2>
+                        <h4>Lorem, ipsum.</h4>
+                    </div>
+                    <div className="descripcion-cursos">
+                        <div className="txt">
+                            <h4>Lorem, ipsum.</h4>
+                            <p>
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ad.
+                            </p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                        </div>
+
+                        <div className="mas-informacion">
+                            <button>
+                                <a href="#">Mas Informacion</a>
+                            </button>
+
+                        </div>
+                    </div>
+                </div>
+                <div className="contenedor-card-cursos">
+                    <div className="header-cursos">
+                        <div className="red">
+                            <img src="img/27365.png" />
+                        </div>
+                        <h2>Lorem, ipsum.</h2>
+                        <h4>Lorem, ipsum.</h4>
+                    </div>
+                    <div className="descripcion-cursos">
+                        <div className="txt">
+                            <h4>Lorem, ipsum.</h4>
+                            <p>
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ad.
+                            </p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                        </div>
+
+                        <div className="mas-informacion">
+                            <button>
+                                <a href="#">Mas Informacion</a>
+                            </button>
+
+                        </div>
+                    </div>
+                </div>
+                <div className="contenedor-card-cursos">
+                    <div className="header-cursos">
+                        <div className="red">
+                            <img src="img/27365.png" />
+                        </div>
+                        <h2>Lorem, ipsum.</h2>
+                        <h4>Lorem, ipsum.</h4>
+                    </div>
+                    <div className="descripcion-cursos">
+                        <div className="txt">
+                            <h4>Lorem, ipsum.</h4>
+                            <p>
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ad.
+                            </p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                            <h4>Lorem, ipsum.</h4>
+                            <p>Lorem, ipsum.</p>
+                        </div>
+
+                        <div className="mas-informacion">
+                            <button>
+                                <a href="#">Mas Informacion</a>
+                            </button>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
     )
diff --git a/src/Routes/Class/class.css b/src/Routes/Class/class.css
index e69de29..38841d0 100644
--- a/src/Routes/Class/class.css
+++ b/src/Routes/Class/class.css
@@ -0,0 +1,140 @@
+.contenedor-cursos h2,
+h4 {
+  color: #000000;
+}
+.contenedor-cursos p {
+  color: #10373e;
+}
+.contenedor-cursos {
+  width: 95%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  
+  justify-content: center;
+  height: 100vh;
+  padding: 0 20px;
+
+}
+.contenedor-card-cursos {
+  display: flex;
+  margin: 10px;
+  width: 550px;
+  height: auto;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+.contenedor-card-cursos:hover{
+    box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.4);
+}
+.header-cursos {
+  border-right: 1px solid #10373e ;
+  display: flex;
+  flex-direction: column;
+}
+.descripcion-cursos {
+  background: #fbfbfb;
+  border-radius: 6px;
+}
+.descripcion-cursos,
+.header-cursos {
+  padding: 20px;
+  text-align: center;
+}
+
+.header-cursos a {
+  position: relative;
+  display: block;
+}
+.header-cursos img {
+  border-radius: 0%;
+}
+.red {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  margin: 0 auto;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  /* color */
+  box-shadow: 0 0px 10px 6px rgba(0, 0, 0, 0.2);
+  margin: 30px 30px;
+  transition: 0.2s ease;
+  cursor: auto;
+}
+
+.red:hover {
+  box-shadow: 0 0px 20px 6px rgba(12, 129, 6, 0.4);
+}
+.red img {
+  width: 180px;
+}
+.header-cursos h2 {
+  font-size: 22px;
+  margin: 10px 0;
+  color: #4dad33;
+  transition: 0.2s;
+  box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0);
+  cursor: default;
+}
+.header-cursos:hover h2 {
+  color: #217a89;
+  /* background-color: rgba(21, 155, 30, 0.4); */
+}
+.header-cursos h4 {
+  margin-bottom: 30px;
+}
+.descripcion-cursos {
+  position: relative;
+}
+.txt {
+  display: flex;
+  align-items: flex-start;
+  text-align: initial;
+  flex-direction: column;
+  margin: 20px;
+}
+.txt p,
+h4 {
+  margin: 4px;
+  cursor: default;
+}
+.mas-informacion {
+  margin: 0 0 10px 0;
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 40px;
+}
+.mas-informacion a {
+  color: #fff;
+  text-decoration: none;
+  transition: 0.2s ease;
+}
+.mas-informacion button {
+  width: auto;
+  height: auto;
+  border: 2px solid #1f4515;
+  border-radius: 8px;
+  padding: 2px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #4dad33;
+  font-size: 16px;
+  transition: 0.2s ease;
+}
+
+.mas-informacion:hover a {
+  color: #1f4515;
+}
+.mas-informacion:hover button {
+  border: 2px solid #4dad33;
+  background-color: #fff;
+  box-shadow: 0 0px 10px 8px rgba(34, 221, 28, 0.2);
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 3cb25a6..87cbeb5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,4 +2,22 @@ body {
     margin: 0;
     padding: 0;
     font-family: Helvetica, sans-serif;
+}
+
+::-webkit-scrollbar {
+    width: 15px;
+    border: none;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #4dad33;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: #37ff00;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
 }
\ No newline at end of file