diff --git a/app.vue b/app.vue
index d4e361d..96131a8 100644
--- a/app.vue
+++ b/app.vue
@@ -30,27 +30,28 @@ onMounted(() => {
             <line x1="4" y1="18" x2="20" y2="18"></line>
           </svg>
         </div>
-        <div class="gap-3 flex align-stretch">
+        <div class="gapx-3 flex align-stretch">
           <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
             <ThemeIcon icon="logo" :width=40 :height=40 />
           </NuxtLink>
-          <NuxtLink class="site-nav-bar-text" aria-label="Systeme" :href="'/explorer'"
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'"
             :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
-          <NuxtLink class="site-nav-bar-text" aria-label="Outils" :href="'/tools'"
+          <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Outils" :href="'/tools'"
             :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
         </div>
       </div>
-      <div>
+      <div class="mobile-bigger">
         <SearchView />
       </div>
-      <div class="ps-1 gap-1 flex align-center">
-        <ThemeSwitch />
-        <div class="site-login">
+      <div class="ps-1 gapx-1 flex align-center">
+        <ThemeSwitch class="mobile-hidden" />
+        <NuxtLink class="site-login" href="/user/profile">
           <ThemeIcon icon="user" :width=32 :height=32 />
-        </div>
+        </NuxtLink>
       </div>
     </div>
     <div class="site-body">
+      <LeftComponent />
       <NuxtPage />
     </div>
   </div>
diff --git a/assets/common.css b/assets/common.css
index 60e69b0..4423179 100644
--- a/assets/common.css
+++ b/assets/common.css
@@ -49,29 +49,78 @@
     padding-bottom: 3em;
 }
 
-.gap-1 > *
+.flex
+{
+    display: flex;
+}
+.block
+{
+    display: block;
+}
+.inline
+{
+    display: inline;
+}
+.hidden
+{
+    display: none;
+}
+.row
+{
+    display: flex;
+    flex-direction: row;
+}
+.column
+{
+    display: flex;
+    flex-direction: column;
+}
+.gapx-1 > *
 {
     margin-left: .4em;
     margin-right: .4em;
 }
-.gap-1 > *:first-child, .gap-2 > *:first-child, .gap-3 > *:first-child
+.gapx-1 > *:first-child, .gapx-2 > *:first-child, .gapx-3 > *:first-child
 {
     margin-left: 0;
 }
-.gap-1 > *:last-child, .gap-2 > *:last-child, .gap-3 > *:last-child
+.gapx-1 > *:last-child, .gapx-2 > *:last-child, .gapx-3 > *:last-child
 {
     margin-right: 0;
 }
-.gap-2 > *
+.gapx-2 > *
 {
     margin-left: .8em;
     margin-right: .8em;
 }
-.gap-3 > *
+.gapx-3 > *
 {
     margin-left: 1.2em;
     margin-right: 1.2em;
 }
+.gapy-1 > *
+{
+    margin-top: .4em;
+    margin-bottom: .4em;
+}
+.gapy-1 > *:first-child, .gapy-2 > *:first-child, .gapy-3 > *:first-child
+{
+    margin-top: 0;
+}
+.gapy-1 > *:last-child, .gapy-2 > *:last-child, .gapy-3 > *:last-child
+{
+    margin-bottom: 0;
+}
+.gapy-2 > *
+{
+    margin-top: .8em;
+    margin-bottom: .8em;
+}
+.gapy-3 > *
+{
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+}
 
 html.dark-mode .dark-hidden {
     display: none;
@@ -100,4 +149,24 @@ html.light-mode .light-block {
 }
 .align-stretch {
     align-items: stretch;
+}
+
+@media screen and (max-width: 750px) {
+    .mobile-bigger {
+        flex: 3 1 0 !important;
+    }
+    .mobile-hidden {
+        display: none !important;
+    }
+    .mobile-block {
+        display: inherit !important;
+    }
+}
+@media screen and (min-width: 750px) {
+    .desktop-hidden {
+        display: none !important;
+    }
+    .desktop-block {
+        display: inherit !important;
+    }
 }
\ No newline at end of file
diff --git a/assets/global.css b/assets/global.css
index 25da060..89ad96d 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -4277,20 +4277,35 @@ body {
     object-fit: contain;
 }
 
-.site-nav-bar-text {
-    color: var(--site-name-color);
-    cursor: pointer;
-    font-size: var(--site-name-size);
-    font-weight: var(--site-name-weight);
-    flex: 1 0 0;
-    text-decoration: none;
-    position: relative;
-    display: flex;
-    align-items: center;
-}
+@media screen and (min-width: 750px) 
+{
+    .site-nav-bar-text {
+        color: var(--site-name-color);
+        cursor: pointer;
+        font-size: var(--site-name-size);
+        font-weight: var(--site-name-weight);
+        flex: 1 0 0;
+        text-decoration: none;
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
 
-.site-nav-bar-text:hover {
-    color: var(--site-name-color-hover);
+    .site-nav-bar-text:hover {
+        color: var(--site-name-color-hover);
+    }
+}
+@media screen and (max-width: 750px)
+{
+    .site-body-left-column-inner .site-nav-bar-text {
+        color: var(--site-name-color);
+        padding: .5em 0;
+        font-size: var(--site-name-size);
+        font-weight: var(--nav-parent-item-weight);
+        line-height: var(--line-height-normal);
+        text-decoration: none;
+        display: block;
+    }
 }
 
 .extra-title {
@@ -4978,14 +4993,16 @@ body {
     justify-content: end;
 }
 
-.site-nav-bar-text.mod-active:after {
-    content: "";
-    background-color: var(--nav-item-border-color-active);
-    height: 3px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: calc(-0.5em + 2px);
+@media screen and (min-width: 750px) {
+    .site-nav-bar-text.mod-active:after {
+        content: "";
+        background-color: var(--nav-item-border-color-active);
+        height: 3px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: calc(-0.5em + 2px);
+    }
 }
 
 .site-login {
diff --git a/bun.lockb b/bun.lockb
index be1eb03..eb681e3 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/LeftComponent.vue b/components/LeftComponent.vue
index 574faf0..e81919a 100644
--- a/components/LeftComponent.vue
+++ b/components/LeftComponent.vue
@@ -1,17 +1,21 @@
 <template>
-    <div class="site-body-left-column">
+    <div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column">
         <div class="site-body-left-column-inner">
             <div class="nav-view-outer">
                 <div class="nav-view">
                     <div class="tree-item">
                         <div class="tree-item-children">
-                            <ContentNavigation v-slot="{ navigation }">
+                            <NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'"
+                                :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
+                            <ContentNavigation v-if="$route.path.startsWith('/explorer')" v-slot="{ navigation }" queryContent="/">
                                 <NavigationLink v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
                             </ContentNavigation>
+                            <NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'"
+                                :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/components/ThemeIcon.vue b/components/ThemeIcon.vue
index 62019e5..07dfc94 100644
--- a/components/ThemeIcon.vue
+++ b/components/ThemeIcon.vue
@@ -9,6 +9,6 @@ defineProps<Prop>();
 </script>
 
 <template>
-    <NuxtImg :src="`icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
-    <NuxtImg :src="`icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
+    <img :src="`/icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
+    <img :src="`/icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
 </template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index bc15bdd..39cb234 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@
 import CanvasModule from './transformer/canvas/module'
 
 export default defineNuxtConfig({
-  modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image"],
+  modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", '@sidebase/nuxt-auth'],
 
   components: [
     {
@@ -17,6 +17,28 @@ export default defineNuxtConfig({
     }
   },
 
+  auth: {
+      baseURL: '/api/auth',
+      provider: {
+        type: 'local',
+        //type: 'refresh',
+        endpoints: {
+            signIn: { path: '/login', method: 'post' },
+            signOut: { path: '/logout', method: 'post' },
+            signUp: { path: '/register', method: 'post' },
+            getSession: { path: '/session', method: 'get' },
+            //refresh: { path: '/refresh', method: 'post' } 
+        },
+        session: {
+          dataType: {
+            id: 'string',
+            username: 'string',
+            email: 'string',
+          }
+        }
+      }
+  },
+
   css: ['~/assets/common.css', '~/assets/global.css'],
 
   content: {
diff --git a/package.json b/package.json
index 27dc6e6..fcffe21 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,12 @@
 {
-  "devDependencies": { "@nuxt/content": "^2.13.2", "@nuxt/image": "^1.7.0", "@nuxtjs/color-mode": "^3.4.2", "nuxt": "^3.12.4", "vue": "^3.4.34", "vue-router": "^4.4.0" },
+  "devDependencies": {
+    "@nuxt/content": "^2.13.2",
+    "@nuxtjs/color-mode": "^3.4.2",
+    "@sidebase/nuxt-auth": "^0.8.1",
+    "nuxt": "^3.12.4",
+    "vue": "^3.4.34",
+    "vue-router": "^4.4.0"
+  },
   "patchedDependencies": {
     "unstorage@1.10.2": "patches/unstorage@1.10.2.patch",
     "@nuxt/content@2.13.2": "patches/@nuxt%2Fcontent@2.13.2.patch"
diff --git a/pages/explorer/[...slug].vue b/pages/explorer/[...slug].vue
index 2e8bf2f..333a808 100644
--- a/pages/explorer/[...slug].vue
+++ b/pages/explorer/[...slug].vue
@@ -31,7 +31,6 @@ onMounted(() => {
 </script>
 
 <template>
-    <LeftComponent />
     <div class="site-body-center-column">
         <div class="render-container">
             <template v-if="!!page && page._type == 'markdown' && page.body.children.length > 0">
diff --git a/pages/index.vue b/pages/index.vue
index 9b60fa2..6678776 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+    title: 'Accueil',
+})
+</script>
+
 <template>
     <div class="site-body-center-column">
         <div class="render-container">
diff --git a/pages/user/login.vue b/pages/user/login.vue
index 41a40c8..69ba468 100644
--- a/pages/user/login.vue
+++ b/pages/user/login.vue
@@ -1 +1,11 @@
+<script setup lang="ts">
+definePageMeta({  
+    title: 'Se connecter',
+    auth: {    
+        unauthenticatedOnly: true,
+        navigateAuthenticatedTo: '/user/profile'
+    }
+});
+</script>
+
 <template></template>
\ No newline at end of file
diff --git a/pages/user/logout.vue b/pages/user/logout.vue
deleted file mode 100644
index 41a40c8..0000000
--- a/pages/user/logout.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
\ No newline at end of file
diff --git a/pages/user/profile.vue b/pages/user/profile.vue
index 41a40c8..a92fb07 100644
--- a/pages/user/profile.vue
+++ b/pages/user/profile.vue
@@ -1 +1,23 @@
-<template></template>
\ No newline at end of file
+<script setup lang="ts">
+definePageMeta({  
+    title: 'Votre profil',
+    auth: {    
+        unauthenticatedOnly: false,
+        navigateAuthenticatedTo: '/user/login'
+    }
+});
+
+const { data } = useAuth();
+
+</script>
+
+<template>
+    <div class="site-body-center-column">
+        <div class="render-container">
+            <div class="not-found-container">
+                <ThemeIcon icon="logo" :width=128 :height=128 />
+                <div class="not-found-title">Coucou {{ data?.username }} :) :) :) :)</div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/pages/user/signin.vue b/pages/user/signin.vue
deleted file mode 100644
index 41a40c8..0000000
--- a/pages/user/signin.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
\ No newline at end of file
diff --git a/pages/user/signup.vue b/pages/user/signup.vue
new file mode 100644
index 0000000..59534cc
--- /dev/null
+++ b/pages/user/signup.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+definePageMeta({
+    title: 'S\'inscrire',
+    auth: {
+        unauthenticatedOnly: true,
+        navigateAuthenticatedTo: '/user/profile'
+    }
+});
+
+const username = ref<string>(), email = ref<string>(), password = ref<string>();
+
+const { status, signUp } = useAuth();
+
+function connect() {
+    signUp({ username, password, email }, { redirect: true, callbackUrl: '/' });
+
+    console.log(status.value);
+}
+</script>
+
+<template>
+    <!--<div class="site-body-center-column">
+        <div class="render-container">
+            <div v-if="status === 'unauthenticated'" class="not-found-container">
+                <form @submit.prevent="connect" class="column gapy-1">
+                    <input type="text" :value="username" placeholder="Entrez un nom d'utiliateur">
+                    <input type="text" :value="email" placeholder="Entrez une addresse mail">
+                    <input type="password" :value="password" placeholder="Entrez un mot de passe">
+                    <button>Valider</button>
+                </form>
+            </div>
+            <div v-else-if="status === 'loading'"></div>
+            <div v-else class="not-found-container">
+                <div class="not-found-title">👀 Vous n'avez rien à faire ici. 👀</div>
+            </div>
+        </div>
+    </div>-->
+</template>
\ No newline at end of file
diff --git a/server/api/login.ts b/server/api/login.ts
new file mode 100644
index 0000000..ea120c7
--- /dev/null
+++ b/server/api/login.ts
@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Hello World!');
\ No newline at end of file
diff --git a/server/api/logout.ts b/server/api/logout.ts
new file mode 100644
index 0000000..ea120c7
--- /dev/null
+++ b/server/api/logout.ts
@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Hello World!');
\ No newline at end of file
diff --git a/server/api/register.ts b/server/api/register.ts
new file mode 100644
index 0000000..7ba15ab
--- /dev/null
+++ b/server/api/register.ts
@@ -0,0 +1 @@
+export default defineEventHandler((...args) => console.log(...args));
\ No newline at end of file
diff --git a/server/api/session.ts b/server/api/session.ts
new file mode 100644
index 0000000..ea120c7
--- /dev/null
+++ b/server/api/session.ts
@@ -0,0 +1 @@
+export default defineEventHandler(() => 'Hello World!');
\ No newline at end of file