diff --git a/src/index.jsx b/src/index.jsx
index cc17ff4..f8297f3 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -6,6 +6,8 @@ import './styles/reset.css';
 import './styles/main.scss';
 import './styles/tabs.scss';
 
+import {StateProvider} from "./services/State";
+
 import {Nav} from "./components/Nav";
 import {SearchBar} from "./components/SearchBar";
 import {ScrollToTopRouter} from "./components/ScrollToTop";
@@ -22,22 +24,22 @@ const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
 
     return (
-      <Grid>
-        <RowCol><h1>Busca la musica que te gusta!</h1></RowCol>
-        <RowCol><SearchBar history={props.history} onQueryChanged={navigate}/></RowCol>
-        <RowCol><Recomended/></RowCol>
-      </Grid>
+        <Grid>
+            <RowCol><h1>Busca la musica que te gusta!</h1></RowCol>
+            <RowCol><SearchBar history={props.history} onQueryChanged={navigate}/></RowCol>
+            <RowCol><Recomended/></RowCol>
+        </Grid>
     )
 }
 
 const NoRoute = (props) => {
     return (
-      <Grid>
-        <RowCol><h1>Esa pagina no existe</h1></RowCol>
-        <RowCol>
-            <button className='link' onClick={() => props.history.goBack()}>Volver</button>
-        </RowCol>
-      </Grid>
+        <Grid>
+            <RowCol><h1>Esa pagina no existe</h1></RowCol>
+            <RowCol>
+                <button className='link' onClick={() => props.history.goBack()}>Volver</button>
+            </RowCol>
+        </Grid>
     );
 }
 
@@ -59,7 +61,23 @@ const App = () => (
     </main>
 );
 
+const AppWithState = () => {
+    const initialState = {theme: {primary: 'green'}};
+
+    const reducer = (state, action) => {
+        switch (action.type) {
+            default: return state;
+        }
+    };
+
+    return (
+        <StateProvider initialState={initialState} reducer={reducer}>
+            <App/>
+        </StateProvider>
+    );
+}
+
 ReactDOM.render(
-    <App/>,
+    <AppWithState/>,
     document.getElementById('root')
 );
diff --git a/src/services/State.jsx b/src/services/State.jsx
new file mode 100644
index 0000000..76febae
--- /dev/null
+++ b/src/services/State.jsx
@@ -0,0 +1,11 @@
+import React, {createContext, useContext, useReducer} from 'react';
+
+export const StateContext = createContext(null);
+
+export const StateProvider = ({reducer, initialState, children}) => (
+  <StateContext.Provider value={useReducer(reducer, initialState)}>
+    {children}
+  </StateContext.Provider>
+);
+
+export const useStateValue = () => useContext(StateContext);