diff --git a/.env-develop b/.env-develop
new file mode 100644
index 0000000..f704bfc
--- /dev/null
+++ b/.env-develop
@@ -0,0 +1 @@
+VITE_BACKEND="http://localhost:4000/api"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a547bf3..438657a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 17fb044..592d27c 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -12,5 +12,6 @@ services:
     command: >
       sh -c "
       [ -d node_modules ] || npm i ;
+      [ -f .env ] || cp .env.develop .env ;
       npm run dev
       "
\ No newline at end of file
diff --git a/package.json b/package.json
index 4a6452a..9e76838 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host --port=3000",
-    "build": "vite build",
+    "build": "VITE_BACKEND= vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
diff --git a/src/layouts/Navbar.svelte b/src/layouts/Navbar.svelte
index 031462b..a4b2ce9 100644
--- a/src/layouts/Navbar.svelte
+++ b/src/layouts/Navbar.svelte
@@ -2,10 +2,15 @@
     import '../assets/navbar.css'
     import { Link } from 'svelte-navigator'
     import { storeCanasta } from '../stores/canasta';
+    import { runLogout } from '../services/auth';
 
-    function onSalir() {
-        sessionStorage.removeItem('usuario');
-        document.location.href = '/'
+    async function onSalir() {
+        try {
+            await runLogout()
+            document.location.href = '/'
+        } catch (error) {
+            alert(error.detail || error)
+        }
     }
 </script>
 
diff --git a/src/main.js b/src/main.js
index 5b728e8..3521503 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,13 +1,21 @@
 import App from './layouts/Base.svelte'
 import AppLogin from './pages/site/Login.svelte'
+import { storeUsuario } from './stores/usuario';
+import { getInfoToken } from './services/auth';
 
 let app;
-let usuario = JSON.parse(sessionStorage.getItem('usuario'))
 
-if (usuario) {
-  app = new App({ target: document.getElementById('app') })
-} else {
-  app = new AppLogin({ target: document.getElementById('app') })
+async function begin() {
+  try {
+    const data = await getInfoToken()
+    storeUsuario.set(data)
+    app = new App({ target: document.getElementById('app') })
+  } catch (error) {
+    console.log(error.detail || error)
+    app = new AppLogin({ target: document.getElementById('app') })
+  }
 }
 
+begin();
+
 export default app
diff --git a/src/pages/site/Home.svelte b/src/pages/site/Home.svelte
index 902f91c..5ab4b5e 100644
--- a/src/pages/site/Home.svelte
+++ b/src/pages/site/Home.svelte
@@ -1,2 +1,8 @@
+<script>
+    import { storeUsuario } from "../../stores/usuario";
+    let nombre_usuario = '';
+    $: nombre_usuario = `${$storeUsuario.first_name} ${$storeUsuario.last_name}`.trim() || $storeUsuario.username
+</script>
+
 <h1>Pagina de inicio</h1>
-<p>Hola</p>
\ No newline at end of file
+<p>Hola: {nombre_usuario}</p>
\ No newline at end of file
diff --git a/src/pages/site/Login.svelte b/src/pages/site/Login.svelte
index 53879cc..a33f8c5 100644
--- a/src/pages/site/Login.svelte
+++ b/src/pages/site/Login.svelte
@@ -1,17 +1,18 @@
 <script>
-    import { getToken } from "../../services/auth";
+    import { runLogin } from "../../services/auth";
 
-    let form = {}
+    let form = { username:null, password: null }
     let loading = false;
+    let message = '';
 
     async function onSubmit() {
         try {
             loading = true;
-            const data = await getToken(form)
-            sessionStorage.setItem('usuario', JSON.stringify(data))
+            await runLogin(form)
             document.location.reload()
         } catch (error) {
-            alert(error.message || error)
+            message = error.detail || error
+            setTimeout(() => message = '', 5000)
         } finally {
             loading = false;
         }
@@ -39,4 +40,8 @@
         </div>
         <button>Acceder</button>
     </form>
+
+    {#if message}
+        <p>{message}</p>
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src/services/_config.js b/src/services/_config.js
new file mode 100644
index 0000000..023f856
--- /dev/null
+++ b/src/services/_config.js
@@ -0,0 +1 @@
+export const base = import.meta.env.VITE_BACKEND || 'api';
\ No newline at end of file
diff --git a/src/services/auth.js b/src/services/auth.js
index 00f4cdb..e8858ce 100644
--- a/src/services/auth.js
+++ b/src/services/auth.js
@@ -1,18 +1,32 @@
+import { base } from './_config'
 
-export function getToken({ username, password }) {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            if (username !== 'super') return reject("Usuario incorrecto");
-            if (password !== 'super') return reject("Contaseña incorrecta");
-
-            const data = {
-                username: 'super',
-                first_name: 'Ronald',
-                last_name: 'Morales',
-                email: 'ronald@correo.com',
-                token: '123445555'
-            }
-            resolve(data)
-        }, 2000)
+export async function runLogin({ username, password }) {
+    const res = await fetch(`${base}/auth/`, {
+        method: 'POST',
+        body: JSON.stringify({ username, password }),
+        headers: { "Content-Type": "application/json" }
     })
-}
\ No newline at end of file
+    if (!res.ok) throw await res.json()
+    const data = await res.json()
+    document.cookie = `token=${data.token}`
+    return data
+}
+
+export async function runLogout() {
+    const res = await fetch(`${base}/auth/logout/`, {
+        method: 'POST'
+    })
+    if (!res.ok) throw await res.json()
+    const data = await res.text()
+    document.cookie = 'token=';
+    return data;
+}
+
+export async function getInfoToken() {
+    const res = await fetch(`${base}/auth/info/`, {
+        credentials: 'include'
+    })
+    if (!res.ok) throw await res.json()
+    return await res.json()
+}
+
diff --git a/src/stores/usuario.js b/src/stores/usuario.js
new file mode 100644
index 0000000..5dc06dd
--- /dev/null
+++ b/src/stores/usuario.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const storeUsuario = writable(null)
\ No newline at end of file