diff --git a/src/frontend/index.js b/src/frontend/index.js
index 18b1a22..1130b35 100644
--- a/src/frontend/index.js
+++ b/src/frontend/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import { hydrateRoot } from 'react-dom/client';
 //Router
 import { BrowserRouter as Router } from 'react-router-dom';
 //History
@@ -10,7 +10,6 @@ import { Provider } from 'react-redux';
 import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
 import { config } from '../config';
 import reducer from './reducers';
-import initialState from './reducers/initialState';
 
 import App from './components/App';
 import './styles/global.sass';
@@ -28,26 +27,44 @@ const composeEnhancers = composeWithDevToolsWeb({
     // Specify here name, actionsBlacklist, actionsCreators and other options
 });
 
+const preloadedState = window.__PRELOADED_STATE__
+
 const store = env === 'development' ? createStore(
     reducer,
-    initialState,
+    preloadedState,
     composeEnhancers(),
 ) : createStore(
     reducer,
-    initialState,
+    preloadedState,
 )
 
+delete window.__PRELOADED_STATE__
+
 const container = document.getElementById('app');
-const root = createRoot(container);
 const history = createBrowserHistory()
 
-root.render(
+const root = hydrateRoot(container, 
     <Provider store={store}>
         <Router history={history}>
-            <App tab="home" />
+            <App />
+        </Router>
+    </Provider>,
+    //Add this comment to update later app and remove warning
+    /*{ 
+        onRecoverableError: (error) => {
+          console.error("recoverable", error);
+        }
+    }, */
+);
+
+// Use root.render to update later the app
+/* root.render(
+    <Provider store={store}>
+        <Router history={history}>
+            <App />
         </Router>
     </Provider>
-);
+); */
 
 if (module.hot) {
     module.hot.accept();
diff --git a/src/server/server.js b/src/server/server.js
index 07f2e4a..edc6a33 100644
--- a/src/server/server.js
+++ b/src/server/server.js
@@ -42,7 +42,7 @@ if(env === 'development'){
     }));
 }
 
-const setResponse = (html) => {
+const setResponse = (html, preloadedState) => {
     return(`
     <!DOCTYPE html>
     <html lang="es">
@@ -55,6 +55,9 @@ const setResponse = (html) => {
         </head>
         <body>
             <div id="app">${html}</div>
+            <script>
+                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
+            </script>
             <script src="assets/app.js" type="text/javascript"></script>
         </body>
     </html>
@@ -63,6 +66,7 @@ const setResponse = (html) => {
 
 const renderApp = (req, res) => {
     const store = createStore(reducer, initialState)
+    const preloadedState = store.getState();
     const html = renderToString(
         <Provider store={store}>
             <StaticRouter location={req.url}>
@@ -70,7 +74,7 @@ const renderApp = (req, res) => {
             </StaticRouter>
         </Provider>
     )
-    res.send(setResponse(html));
+    res.send(setResponse(html, preloadedState));
 };
 
 app.get('*', renderApp)
