diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
index 283b0e0..58f63cb 100644
--- a/src/components/Nav.jsx
+++ b/src/components/Nav.jsx
@@ -1,13 +1,44 @@
 import React from "react";
 import {Link} from "react-router-dom";
 import './Nav.scss';
+import {useStateValue} from '../services/State'
 
-export const Nav = () => (
-    <nav className='nav'>
-        <Link to='/'><h1 className='branding'>MusicList</h1></Link>
-        <ul className='nav-links'>
-            <li className='link'><Link to='/login'>Iniciar Sesion</Link></li>
-            <li className='link'><Link to='/signup'>Registrate</Link></li>
-        </ul>
-    </nav>
-)
+export const Nav = () => {
+    const [context, dispatch] = useStateValue();
+
+    const handleLogin = () => dispatch({type: 'login', user: {auth: true}})
+    const handleLogout = () => dispatch({type: 'logout', user: {auth: false}})
+
+    const showLogin = () => {
+        return context.user.auth === false;
+    }
+
+    const buttons = () => {
+        if (showLogin()) {
+            return <ul className='nav-links'>
+                <li className='link'>
+                    <button onClick={handleLogin}>Iniciar Sesión</button>
+                </li>
+                <li className='link'>
+                    <Link to='/signup'>Registrate</Link>
+                </li>
+            </ul>
+        }else {
+            return <ul className='nav-links'>
+                <li>
+                    Bienvenido
+                </li>
+                <li className='link'>
+                    <button onClick={handleLogout}>Cerrar Sesión</button>
+                </li>
+            </ul>
+        }
+    }
+
+    return (
+        <nav className='nav'>
+            <Link to='/'><h1 className='branding'>MusicList</h1></Link>
+            {buttons()}
+        </nav>
+    )
+}
diff --git a/src/index.jsx b/src/index.jsx
index f8297f3..2d8d1ef 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -62,16 +62,8 @@ const App = () => (
 );
 
 const AppWithState = () => {
-    const initialState = {theme: {primary: 'green'}};
-
-    const reducer = (state, action) => {
-        switch (action.type) {
-            default: return state;
-        }
-    };
-
     return (
-        <StateProvider initialState={initialState} reducer={reducer}>
+        <StateProvider>
             <App/>
         </StateProvider>
     );
diff --git a/src/services/State.jsx b/src/services/State.jsx
index 76febae..7a6b60b 100644
--- a/src/services/State.jsx
+++ b/src/services/State.jsx
@@ -1,11 +1,34 @@
 import React, {createContext, useContext, useReducer} from 'react';
 
+const initialState = {user: {auth: false}};
+
+const reducer = (state, action) => {
+    console.log(state, action);
+
+    switch (action.type) {
+        case 'login':
+            return {
+                ...state,
+                user: action.user
+            }
+        case 'logout':
+            return {
+                ...state,
+                user: action.user
+            }
+        default: return state;
+    }
+};
+
 export const StateContext = createContext(null);
 
-export const StateProvider = ({reducer, initialState, children}) => (
-  <StateContext.Provider value={useReducer(reducer, initialState)}>
-    {children}
-  </StateContext.Provider>
-);
+export const StateProvider = ({children}) => {
+
+    return (
+        <StateContext.Provider value={useReducer(reducer, initialState )}>
+            {children}
+        </StateContext.Provider>
+    );
+}
 
 export const useStateValue = () => useContext(StateContext);