diff --git a/index.html b/index.html
index f618ddc..57112d6 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
     }
   </style>
   <body>
-    <header class="hidden xl:block text-white bg-black">
+    <header class="py-2 hidden xl:block text-white bg-neutral-900">
       <div class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
         <a class="flex title-font font-medium items-center text-black mb-0">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-black p-2 bg-white rounded-full" viewBox="0 0 24 24">
@@ -64,7 +64,7 @@
 
     <div id="app">
 
-      <div id="modal-buffers" class="invisible bg-black bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
+      <div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
         <div id="start-button" class="px-16 py-14 rounded-md text-center">
           <div id="disclaimer" class="pb-4">
           <form>   
@@ -75,7 +75,7 @@
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
             </svg>
         </div>
-              <input minlength="2" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-black dark:bg-black dark:text-white" placeholder="Buffer..." required>
+              <input minlength="2" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-neutral-900 dark:bg-neutral-900 dark:text-white" placeholder="Buffer..." required>
               <button disabled class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
             </div>
           </form>
@@ -84,34 +84,35 @@
       </div>
 
       <div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
-      <div id="modal" class="bg-black bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
+      <div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
         <div id="start-button" class="bg-white px-16 py-14 rounded-md text-center">
          <h1 class="text-xl mb-4 font-bold text-black">Topos Prototype</h1>
          <div id="disclaimer" class="pb-4">
 
           <p>This is Topos, an experimental live coding platform.</p>
+          <p>Switch to the <b>Help</b> (<b>Ctrl+b</b>) universe for a tutorial!</p>
           <p>Have fun, press <b>Enter/Space</b> to get started!</p>
           </div>
           </div>
       </div>
 
       <div class="flex flex-row">
-        <aside class="flex flex-col items-center w-14 h-screen py-2 overflow-y-auto bg-white border-r rtl:border-l rtl:border-r-0 dark:bg-black dark:border-gray-700">
+        <aside class="flex flex-col items-center w-14 h-screen py-2 overflow-y-auto bg-white border-r rtl:border-l rtl:border-r-0 dark:bg-neutral-900 dark:border-gray-700">
           <nav class="flex flex-col space-y-6">
             <a id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
-              <svg class="w-8 h-8 text-orange-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+              <svg class="w-8 h-8 text-orange-300" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"/>
               </svg>
             </a>
           
             <a id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
-              <svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+              <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 18 20">
                 <path d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"/>
               </svg>
             </a>
           
             <a id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
-              <svg class="w-8 h-8 text-white " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20">
+              <svg class="w-8 h-8 text-white " fill="none" viewBox="0 0 21 20">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.487 1.746c0 4.192 3.592 1.66 4.592 5.754 0 .828 1 1.5 2 1.5s2-.672 2-1.5a1.5 1.5 0 0 1 1.5-1.5h1.5m-16.02.471c4.02 2.248 1.776 4.216 4.878 5.645C10.18 13.61 9 19 9 19m9.366-6h-2.287a3 3 0 0 0-3 3v2m6-8a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
               </svg>
             </a>
@@ -143,7 +144,7 @@
             </a>
         </aside>
         <div class="min-w-screen flex grow flex-col">
-          <ul id="local-script-tabs" class="flex text-sm font-medium text-center text-white dark:text-white bg-black space-x-2 lg:space-x-8">
+          <ul id="local-script-tabs" class="flex text-sm font-medium text-center text-white dark:text-white bg-neutral-900 space-x-2 lg:space-x-8">
             <li class="pl-5">
                 <a id="tab-1" class="bg-orange-300 inline-block px-4 py-1 text-white hover:bg-gray-800">1</a>
             </li>
diff --git a/src/AppSettings.ts b/src/AppSettings.ts
index c12654f..09466d5 100644
--- a/src/AppSettings.ts
+++ b/src/AppSettings.ts
@@ -1,3 +1,5 @@
+import { tutorial_universe } from "./universes/tutorial"
+
 export type Universes = { [key: string]: Universe }
 
 export interface Universe {
@@ -50,7 +52,8 @@ export const template_universes = {
       9: { candidate: "", committed: "", evaluations: 0},
     },
     init: { candidate: "", committed: "", evaluations: 0 }
-  }
+  },
+  "Help": tutorial_universe,
 }
  
   
diff --git a/src/main.ts b/src/main.ts
index d4edbfd..5f0125b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,7 +14,7 @@ import {
 } from "./highlightSelection";
 import { UserAPI } from './API';
 import { Extension } from '@codemirror/state';
-import { Universes, File, template_universe } from './AppSettings';
+import { Universes, File, template_universe, template_universes } from './AppSettings';
 import { tryEvaluate } from './Evaluator';
 
 
@@ -22,7 +22,7 @@ import { tryEvaluate } from './Evaluator';
 export class Editor { 
 
   // Data structures for editor text management
-  universes: Universes
+  universes: Universes = template_universes
   selected_universe: string
   local_index: number = 1
   editor_mode: 'global' | 'local' | 'init' = 'local'
@@ -68,15 +68,13 @@ export class Editor {
 
   constructor() {
 
-
-
     // ================================================================================ 
     // Loading the universe from local storage
     // ================================================================================
 
     this.selected_universe = "Default";
     this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`
-    this.universes = this.settings.universes
+    this.universes = {...this.settings.universes, ...template_universes}
 
     // ================================================================================
     // Audio context and clock
@@ -147,7 +145,7 @@ export class Editor {
 		  	const code = this.getCodeBlock();
         this.currentFile.candidate = this.view.state.doc.toString() 
         tryEvaluate(this, this.currentFile)
-		  }
+	  }
 
 		  // Shift + Enter or Ctrl + E: evaluate the line
 		  if ((event.key === 'Enter' && event.shiftKey) || (event.key === 'e' && event.ctrlKey)) {
@@ -166,14 +164,23 @@ export class Editor {
         this.openSettingsModal()
       }
 
-
+      // Switch to local files
+      if (event.ctrlKey && event.key === "l") this.changeModeFromInterface('local');
+      if (event.ctrlKey && event.key === "g") this.changeModeFromInterface('global');
+      if (event.ctrlKey && event.key === "i") this.changeModeFromInterface('init');
+      [112, 113, 114, 115, 116, 117, 118, 119, 120].forEach((keycode, index) => {
+        if (event.keyCode === keycode) {
+          event.preventDefault();
+          this.changeToLocalBuffer(index)
+        }
+      })
     }); 
 
     // ================================================================================
     // Interface buttons
     // ================================================================================
 
-    let tabs = document.querySelectorAll('[id^="tab-"]');
+    const tabs = document.querySelectorAll('[id^="tab-"]');
     // Iterate over the tabs with an index
     for (let i = 0; i < tabs.length; i++) {
       tabs[i].addEventListener('click', (event) => {
@@ -241,15 +248,34 @@ export class Editor {
     return this.universes[this.selected_universe.toString()].init
   }
 
+  changeToLocalBuffer(i: number) {
+    // Updating the CSS accordingly
+    const tabs = document.querySelectorAll('[id^="tab-"]');
+    const tab = tabs[i] as HTMLElement
+    tab.classList.add('bg-orange-300')
+    for (let j = 0; j < tabs.length; j++) {
+      if (j != i) tabs[j].classList.remove('bg-orange-300')
+    }
+    this.currentFile.candidate = this.view.state.doc.toString() 
+
+    let tab_id = tab.id.split('-')[1]
+    this.local_index = parseInt(tab_id)
+    this.updateEditorView()
+  }
+
   changeModeFromInterface(mode: 'global' | 'local' | 'init') {
 
-    const interface_buttons = [this.local_button, this.global_button, this.init_button]
+    const interface_buttons: HTMLElement[] = [
+      this.local_button,
+      this.global_button, 
+      this.init_button
+    ]
 
     let changeColor = (button: HTMLElement) => {
       interface_buttons.forEach(button => {
-        // Get the child svg element of each button
         let svg = button.children[0] as HTMLElement
         if (svg.classList.contains('text-orange-300')) {
+          console.log('Fond de couleur trouvé')
           svg.classList.remove('text-orange-300')
           svg.classList.add('text-white')
         }
@@ -390,7 +416,7 @@ export class Editor {
         endLine = state.doc.line(endLine.number + 1);
       }
 
-      this.view.dispatch({selection: {anchor: 0 + startLine.from, head: endLine.to}});
+      // this.view.dispatch({selection: {anchor: 0 + startLine.from, head: endLine.to}});
       highlightSelection(this.view);
 
 		  setTimeout(() => {
diff --git a/src/themes/materialDark.ts b/src/themes/materialDark.ts
index a2bb087..14492c2 100644
--- a/src/themes/materialDark.ts
+++ b/src/themes/materialDark.ts
@@ -3,7 +3,7 @@ import { Extension } from '@codemirror/state'
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags as t } from '@lezer/highlight'
 
-const base00 = 'black', base01 = '#505d64',
+const base00 = '#171717', base01 = '#505d64',
       base02 = 'white', base03 = '#707d8b',
       base04 = '#a0a4ae', base05 = '#bdbdbd',
       base06 = '#e0e0e0', base07 = '#fdf6e3',
diff --git a/src/universes/tutorial.ts b/src/universes/tutorial.ts
new file mode 100644
index 0000000..b87396e
--- /dev/null
+++ b/src/universes/tutorial.ts
@@ -0,0 +1,36 @@
+const global_text =`
+// Global buffer: a central buffer to command them all.
+// ====================================================
+// The global buffer is a special buffer used to control
+// the general behavior of your universe. It is meant to
+// be used as a "control room" for your universe. You can
+// make use of several commands to control the execution
+// flow of all the files:
+// - script(universe/universes: number): run script(s)
+`
+
+const local_buffer =`
+// Local buffer: nine buffers to write your algorithms.
+`
+
+const init_buffer=`
+// Init buffer: a buffer to initialize the universe.
+// This universe is runned once when the universe is
+// loaded!
+`
+
+export const tutorial_universe = {
+    global: { candidate: global_text, committed: global_text, evaluations: 0 },
+    locals: {
+        1: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        2: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        3: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        4: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        5: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        6: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        7: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        8: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+        9: { candidate: local_buffer, committed: local_buffer, evaluations: 0 },
+    },
+    init: { candidate: init_buffer, committed: init_buffer, evaluations: 0 }
+}
\ No newline at end of file
