diff --git a/package-lock.json b/package-lock.json
index 3570cd7..62c1fe1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nts-web",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "nts-web",
-      "version": "3.0.1",
+      "version": "4.0.0",
       "dependencies": {
         "intro.js": "^7.2.0",
         "intro.js-react": "^1.0.0",
@@ -28,6 +28,7 @@
         "electron-builder": "^24.13.3",
         "electronmon": "^2.0.3",
         "postcss": "^8.4.40",
+        "prop-types": "^15.8.1",
         "tailwindcss": "^3.4.7",
         "vite-plugin-compression": "^0.5.1",
         "vite-plugin-pwa": "^0.20.1",
@@ -9358,6 +9359,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -9491,6 +9503,12 @@
         "react": "*"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19223,6 +19241,17 @@
         }
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -19319,6 +19348,12 @@
       "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
       "requires": {}
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index f21837c..f299463 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
     "electron-builder": "^24.13.3",
     "electronmon": "^2.0.3",
     "postcss": "^8.4.40",
+    "prop-types": "^15.8.1",
     "tailwindcss": "^3.4.7",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-pwa": "^0.20.1",
diff --git a/src/components/controls/Dropdown.jsx b/src/components/controls/Dropdown.jsx
index a21dc04..8c1e3c6 100644
--- a/src/components/controls/Dropdown.jsx
+++ b/src/components/controls/Dropdown.jsx
@@ -8,7 +8,7 @@ const Dropdown = ({ id, label, value = 0, options, switchValue, isActive, onChan
     }
    
     return (
-        <div className={`input-select flex flex-1 px-4 items-center gap-4 ${isNaN(switchValue) && 'py-1.5'}`}>
+        <div className={`dropdown-control input-select flex flex-1 px-4 items-center gap-4 ${isNaN(switchValue) && 'py-1.5'}`}>
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             { !isNaN(switchValue) && 
                 <input type="checkbox" 
diff --git a/src/components/controls/Knob.jsx b/src/components/controls/Knob.jsx
index 491d990..460509c 100644
--- a/src/components/controls/Knob.jsx
+++ b/src/components/controls/Knob.jsx
@@ -26,7 +26,7 @@ const Knob = ({id, value = 0, min = 0, max = 127, step = 1, label, onChange}) =>
     }, [handleValue])
 
     return (
-        <div className="flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center justify-center knob-control">
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             <div className="flex-1">
                 <input 
diff --git a/src/components/controls/Selector.jsx b/src/components/controls/Selector.jsx
index aeeaab2..24d54df 100644
--- a/src/components/controls/Selector.jsx
+++ b/src/components/controls/Selector.jsx
@@ -32,7 +32,7 @@ const Selector = ({id, value = 0, options, label, onChange, display}) => {
     }, [handleValue])
 
     return (
-        <div className="flex flex-col items-center justify-center self-start">
+        <div className="flex flex-col items-center justify-center self-start selector-control">
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             <div className="flex-1">
                 <input 
diff --git a/src/components/controls/Switch.jsx b/src/components/controls/Switch.jsx
index f58ea56..715160e 100644
--- a/src/components/controls/Switch.jsx
+++ b/src/components/controls/Switch.jsx
@@ -32,7 +32,7 @@ const Switch = ({ id, isActive = false, isMomentary = false, label, inline, onCh
     }, [isMomentary, toggle])
 
     return (
-        <div className={`flex items-center justify-center ${inline ? 'flex-row' : "flex-col-reverse"}`}>
+        <div className={`switch-control flex items-center justify-center ${inline ? 'flex-row' : "flex-col-reverse"}`}>
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             <div className="flex-1">
                 <input 
diff --git a/src/components/layout/Display.jsx b/src/components/layout/Display.jsx
index 12a8bf9..fda2dd4 100644
--- a/src/components/layout/Display.jsx
+++ b/src/components/layout/Display.jsx
@@ -84,7 +84,7 @@ const Display = () => {
     }, [isPlaying, playStep, step, sequence, stopAll])
 
     return (
-        <section className="sticky md:relative flex flex-col gap-4 flex-1 h-full min-h-[235px] mx-4 my-2">
+        <section id="display" className="sticky md:relative flex flex-col gap-4 flex-1 h-full min-h-[235px] mx-4 my-2">
             <div  className="flex flex-col flex-1 justify-between bg-neutral bg-grid font-sevenSegment text-xl rounded text-accent outline outline-base-100 outline-offset-2 outline-2 mt-2">                            
                 <div className="grid grid-cols-3 w-full bg-transparent px-2">
                     <div className="text-left truncate">{bankNames?.[bank] ? bankNames?.[bank] : `Bank ${bank < 10 ? 0 :'' }${bank}`}</div>                       
@@ -106,16 +106,16 @@ const Display = () => {
                 }
             </div>
             <div className="grid grid-cols-8 gap-4 justify-between">
-                <div className="flex col-span-2 gap-1">
+                <div id="stepSelect" className="flex col-span-2 gap-1">
                     <button onClick={handleUp} aria-label="Up" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsCaretUpFill className="h-4 w-4" /> </button>
                     <button onClick={handleDown} aria-label="Down" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsCaretDownFill className="h-4 w-4" /> </button>
                 </div>
-                <div className="flex col-span-2 gap-1">
+                <div id="addRemoveBars" className="flex col-span-2 gap-1">
                     <button onClick={removeBar} aria-label="Add bar" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsDash className="h-4 w-4" /> </button>
                     <button onClick={addBar} aria-label="Remove bar" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsPlus className="h-4 w-4" /> </button>
                 </div>
-                <button onClick={toggleRecording} aria-label="Toggle Record" className={`col-span-2 btn btn-outline btn-accent btn-xs ${isRecording ? "animate-blink" : ""}`}> <BsFillCircleFill className="h-2 w-2" /> </button>
-                <button onClick={togglePlay} aria-label="Play/Pause" className={`col-span-2 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs ${isPlaying ? "btn-pushed" : ""}`}> { isPlaying ? <BsFillPauseFill className="h-4 w-4"/> : <BsPlayFill className="h-4 w-4" />} </button>
+                <button id="toggleRecording" onClick={toggleRecording} aria-label="Toggle Record" className={`col-span-2 btn btn-outline btn-accent btn-xs ${isRecording ? "animate-blink" : ""}`}> <BsFillCircleFill className="h-2 w-2" /> </button>
+                <button id="togglePlayback" onClick={togglePlay} aria-label="Play/Pause" className={`col-span-2 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs ${isPlaying ? "btn-pushed" : ""}`}> { isPlaying ? <BsFillPauseFill className="h-4 w-4"/> : <BsPlayFill className="h-4 w-4" />} </button>
             </div>
         </section>
     )
diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index 0420605..37db743 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -1,32 +1,35 @@
 import { FaBug, FaDownload, FaHeart, FaInfo } from "react-icons/fa"
 
+import APPROVED from "../../config/approved";
 import { SiKofi } from "react-icons/si";
 import { lazy } from "react";
 import { useLayout } from "../../hooks/useLayout";
 
 const Footer = () => {
-    const { handleModal, supportsPWA, installPWA} = useLayout();
+    const { handleModal, setTourEnabled } = useLayout();
     
     const openInfo = () => {
-        const Info = lazy(() => import('../../views/modals/Info'));
-        handleModal(<Info />);
+        setTourEnabled(true)
+    }
+
+    const openDownload = () => {
+        const Download = lazy(() => import('../../views/modals/Download'));
+        handleModal(<Download />);
     }
 
     return (
         <footer className="footer items-center justify-items-center	 md:justify-between p-2 gap-y-4">
-            <p className="inline text-center">Made with <FaHeart className="text-accent h-3 w-3 inline" /> by <a className="font-semibold hover:text-accent transition-all transition-200" href="https://oscarrc.me" rel="noreferrer" target="_BLANK">Oscar R.C.</a></p>
+            <p className="inline text-center">Made with <FaHeart className="text-accent h-3 w-3 inline" /> by <a className="font-semibold hover:text-accent transition-all transition-200" href="https://oscarrc.me" rel="noreferrer" target="_BLANK">Oscar R.C.</a> and released under <a href="https://github.com/oscarrc/nts-web/blob/master/LICENSE" target="_BLANK" rel="noreferrer noopener">MIT License</a></p>
             <p className="text-secondary text-center italic">This page is not affiliated or endorsed by Korg</p>
-            <div className="flex flex-col items-center sm:flex-row gap-2">
-                <a href="https://ko-fi.com/oscarrc" rel="noreferrer noopener" target="_blank" className="btn btn-primary btn-outline btn-xs"><SiKofi className="h-3 w-3 mr-2" /> Buy me a coffee</a>
+            <div id="footerMenu" className="flex flex-col items-center sm:flex-row gap-2">
+                { APPROVED ? <a href="https://ko-fi.com/oscarrc" rel="noreferrer noopener" target="_blank" className="btn btn-primary btn-outline btn-xs"><SiKofi className="h-3 w-3 mr-2" /> Buy me a coffee</a> : null }
                 <div className="flex gap-2">
                     <div className="tooltip" data-tip="Info">
                         <button onClick={openInfo} aria-label="Info and help" className="btn btn-primary btn-outline btn-xs"><FaInfo className="h-3 w-3" /></button>
                     </div>
-                    { supportsPWA && 
-                        <div className="tooltip" data-tip="Install the app">
-                            <button aria-label="Install the app" onClick={ installPWA } className="btn btn-primary btn-outline btn-xs"><FaDownload className="h-3 w-3" /></button>
-                        </div> 
-                    }
+                    <div className="tooltip" data-tip="Install the app">
+                        <button aria-label="Install the app" onClick={ openDownload } className="btn btn-primary btn-outline btn-xs"><FaDownload className="h-3 w-3" /></button>
+                    </div> 
                     <div className="tooltip" data-tip="Report a bug"><a role="button" aria-label="Report a bug" href="https://github.com/oscarrc/nts-web/issues" rel="noreferrer noopener" target="_blank" className="btn btn-primary btn-outline btn-xs"><FaBug className="h-3 w-3" /></a></div>
                 </div>
             </div>
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 205a6fb..8f6c9ba 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -128,9 +128,9 @@ const Header = () => {
                 </a>
             </div>
             <div className="flex-none">                
-                <ul className="menu menu-horizontal p-0 gap-4">
+                <ul id="menu" className="menu menu-horizontal p-0 gap-4">
                     <li className="tooltip tooltip-bottom dropdown" data-tip="File"> 
-                        <label aria-label="Import" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaFile className="h-4 w-4"/></label>
+                        <label id="file" aria-label="Import" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaFile className="h-4 w-4"/></label>
                         <ul tabIndex="0" className="dropdown-content menu p-2 shadow-lg bg-neutral text-secondary rounded">
                             <li>                                
                                 <input onChange={ importData } ref={ dataSelectorRef } type="file" className="hidden" accept=".ntsweb"/>
@@ -153,7 +153,7 @@ const Header = () => {
                         </ul>
                     </li>
                     <li className="tooltip tooltip-bottom dropdown" data-tip="Save"> 
-                        <label aria-label="Export" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaSave className="h-4 w-4"/></label>
+                        <label id="save" aria-label="Export" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaSave className="h-4 w-4"/></label>
                         <ul tabIndex="0" className="dropdown-content menu p-2 shadow-lg bg-neutral text-secondary rounded">
                             <li><button className="btn-sm" onClick={ exportData } aria-label="Export all">Save All</button></li>
                             <li><button className="btn-sm" onClick={ exportBank } aria-label="Export current bank">Current bank</button></li>
@@ -161,21 +161,21 @@ const Header = () => {
                         </ul>
                     </li>
                     <li className="tooltip tooltip-bottom" data-tip="Randomize">
-                        <button aria-label="Randomize" onClick={ randomize } className="btn btn-sm btn-primary btn-outline py-0"><FaRandom className="h-4 w-4"/></button>
+                        <button id="randomize" aria-label="Randomize" onClick={ randomize } className="btn btn-sm btn-primary btn-outline py-0"><FaRandom className="h-4 w-4"/></button>
                     </li>
                     <li className="tooltip tooltip-bottom dropdown" data-tip="Tempo"> 
-                        <label aria-label="Tempo" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><GiMetronome className="h-5 w-5"/></label>
+                        <label id="tempo" aria-label="Tempo" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><GiMetronome className="h-5 w-5"/></label>
                         <div tabIndex="0" className="dropdown-content shadow-lg bg-neutral text-secondary rounded">
                             <Tempo tempo={tempo} onTempoChange={setTempo} barLength={barLength} onBarChange={setBarLength} onToggle={setMetronome} metronome={metronome} />
                         </div>
                     </li>
                     <li className="tooltip tooltip-bottom" data-tip="Live">
-                        <button aria-label="Toggle Live Controls" onClick={ toggleLive } className={`btn btn-sm ${ bottomDrawer ? 'btn-accent' : 'btn-primary' } btn-outline py-0`}>
+                        <button id="toggleLive" aria-label="Toggle Live Controls" onClick={ toggleLive } className={`btn btn-sm ${ bottomDrawer ? 'btn-accent' : 'btn-primary' } btn-outline py-0`}>
                             { bottomDrawer ? <MdPianoOff className="h-5 w-5"/> : <MdPiano className="h-5 w-5"/>}
                         </button>
                     </li>
                     <li className="tooltip tooltip-bottom" data-tip="Settings">
-                        <button aria-label="Settings" onClick={ openSettings } className="btn btn-sm btn-primary btn-outline py-0 rounded"><FaCog className="h-4 w-4"/></button>
+                        <button id="settings" aria-label="Settings" onClick={ openSettings } className="btn btn-sm btn-primary btn-outline py-0 rounded"><FaCog className="h-4 w-4"/></button>
                     </li>
                 </ul>
             </div>
diff --git a/src/components/layout/Memory.jsx b/src/components/layout/Memory.jsx
index 770752d..a3cb989 100644
--- a/src/components/layout/Memory.jsx
+++ b/src/components/layout/Memory.jsx
@@ -4,7 +4,7 @@ const Memory = () => {
     const { bank, setBank, bankNames } = useNTS();
 
     return (
-        <section>
+        <section id="memory">
             <h2 className="divider divider-primary font-semibold">MEMORY</h2>
             <div className="grid grid-cols-4 grid-rows-4 w-full px-2 gap-2">
                 { [...Array(16).keys()].map((k) => {
diff --git a/src/config/approved.js b/src/config/approved.js
new file mode 100644
index 0000000..e55a569
--- /dev/null
+++ b/src/config/approved.js
@@ -0,0 +1,3 @@
+const APPROVED = false;
+
+export default APPROVED;
\ No newline at end of file
diff --git a/src/config/tour.js b/src/config/tour.js
new file mode 100644
index 0000000..f0d2c28
--- /dev/null
+++ b/src/config/tour.js
@@ -0,0 +1,123 @@
+const intro = [
+    {
+        title: "Welcome to NTS-1",
+        intro: "Let's walk through all the controls and features of the app",
+        tooltipClass: 'tour intro',
+    },
+    {
+        title: "Compatibility check",
+        intro: "But before, check if your browser is compatible with the <a class='link' href='https://caniuse.com/midi' target='_BLANK' rel='noreferrer noopener'>Web Midi API</a> and the <a class='link' href='https://caniuse.com/audio-api' target='_BLANK' rel='noreferrer noopener'> Web Audio API </a>",
+        tooltipClass: 'tour intro'
+    },
+    {
+        intro: "From this menu you can control different aspects of the app",
+        tooltipClass: 'tour',
+        element: '#menu',
+    },
+    {
+        intro: "This, is the file menu where you can import your banks, sequence or the whole state of the app as well as rename your banks or clear the sequence",
+        tooltipClass: 'tour',
+        element: '#file',
+    },
+    {
+        intro: "This is the save menu. Here you are able to export your banks, sequence or the whole state of the app",
+        tooltipClass: 'tour',
+        element: '#save',
+    },
+    {
+        intro: "By clicking this button all the controls will be randomized",
+        tooltipClass: 'tour',
+        element: '#randomize',
+    },
+    {
+        intro: "In this menu is where the tempo and bar length controls are located. You can also enable or disble the metronome.",
+        tooltipClass: 'tour',
+        element: '#tempo',
+    },
+    {
+        intro: "By clicking this button you can open/close the live controls.",
+        tooltipClass: 'tour',
+        element: '#toggleLive',
+    },
+    {
+        intro: "This button will open the Midi settings for selecting input, output and passthrough devices and their channels.",
+        tooltipClass: 'tour',
+        element: '#settings',
+    },
+    {
+        intro: "These are the memory banks. You can select a bank by clicking on it. All changes made will be saved to the currently selected bank.",
+        tooltipClass: 'tour',
+        element: '#memory',
+    },
+    {
+        title: "Controls",
+        intro: "NTS-web has 4 types of controls, to change paramaters on your NTS-1",
+        tooltipClass: 'tour intro',
+    },
+    {
+        intro: "Selectors allow you to select a value between the available options.",
+        tooltipClass: 'tour',
+        element: '.selector-control',
+    },
+    {
+        intro: "Knobs can tweak a parameter with a value between 0 and 127",
+        tooltipClass: 'tour',
+        element: '.knob-control',
+    },
+    {
+        intro: "Knobs and selectors can be controlled by dragging them or by using the mouse wheel. When using the mouse wheel holding the shift key will allow you to fine tune the parameter",
+        tooltipClass: 'tour'
+    },
+    {
+        intro: "Dropdowns are classic menus that allow you to select a value between the given options",
+        tooltipClass: 'tour',
+        element: '.dropdown-control',
+    },
+    {
+        intro: "Switches will turn on or off the effect or filter they're linked to.",
+        tooltipClass: 'tour',
+        element: '.switch-control',
+    },
+    {
+        title: "Sequencer",
+        intro: "Now, let's talk about the sequencer. It allows you to create a sequence using a different bank for each step",
+        tooltipClass: 'tour intro',
+    },
+    {
+        intro: "The interface of the sequencer is contained within this display and buttons",
+        tooltipClass: 'tour',
+        element: '#display',
+    },
+    {
+        intro: "These buttons will move the current selected step up or down. You can also select a step scrolling with the mouse wheel and clicking on it",
+        tooltipClass: 'tour',
+        element: '#stepSelect',
+    },
+    {
+        intro: "These buttons will add or remove a bar from the sequence",
+        tooltipClass: 'tour',
+        element: '#addRemoveBars',
+    },
+    {
+        intro: "This button will toggle the record mode",
+        tooltipClass: 'tour',
+        element: '#toggleRecording',
+    },
+    {
+        intro: "This button will toggle the playback mode",
+        tooltipClass: 'tour',
+        element: '#togglePlayback',
+    },
+    {
+        title: "Recording",
+        intro: "When in record mode, you can enter notes using live keyboard. \n Then you can edit them, as well as the duration and bank, using your keyboard or the arrow controls that appear on hover. \n You can enable the record and playback mode at once to do live recording",
+        tooltipClass: 'tour intro',
+    },
+    {
+        intro: "Finally, if you found a bug, don't hesitate into reporting it. \n If you want you can install the app too, and remember, if you like the app you can buy me a coffee.",
+        tooltipClass: 'tour',
+        element: '#footerMenu',
+    },
+];
+
+export { intro };
\ No newline at end of file
diff --git a/src/hooks/useLayout.jsx b/src/hooks/useLayout.jsx
index 54541eb..42c912b 100644
--- a/src/hooks/useLayout.jsx
+++ b/src/hooks/useLayout.jsx
@@ -1,5 +1,10 @@
+import 'intro.js/introjs.css';
+
 import { Suspense, createContext, useContext, useEffect, useRef, useState } from "react";
 
+import { Steps } from 'intro.js-react';
+import { intro } from "../config/tour";
+
 const getWindowDimensions = () => {
     const { innerWidth: width, innerHeight: height } = window;
     return { width, height };
@@ -40,6 +45,7 @@ const LayoutProvider = ({children}) => {
     const [ modalContent, setModalContent ] = useState(false);
     const [supportsPWA, setSupportsPWA] = useState(false);
     const [promptInstall, setPromptInstall] = useState(null);
+    const [tourEnabled, setTourEnabled] = useState(false);
 
     const overlay = useRef(null);
     const modalOpen = "fixed top-0 left-0 right-0 bottom-0 min-w-screen min-h-screen bg-neutral bg-opacity-75 z-50 opacity-100 visible";
@@ -92,7 +98,7 @@ const LayoutProvider = ({children}) => {
     }, []);
 
     return (
-      <LayoutContext.Provider value={{ getWindowDimensions, windowDimensions, bottomDrawer, setBottomDrawer, breakpoint, getCurrentBreakpoint, handleModal, supportsPWA, installPWA }}>
+      <LayoutContext.Provider value={{ getWindowDimensions, windowDimensions, bottomDrawer, setBottomDrawer, breakpoint, getCurrentBreakpoint, handleModal, supportsPWA, installPWA, setTourEnabled }}>
         {
           windowDimensions.width < 380 ?
             <div className="flex flex-1 flex-col gap-8 items-center justify-center">
@@ -108,6 +114,18 @@ const LayoutProvider = ({children}) => {
                     </Suspense>
                   </div>
               </div>
+              <Steps
+                enabled={ tourEnabled }
+                steps={intro}
+                initialStep={0}                
+                options={{
+                  hideNext: false,
+                  nextToDone: true,
+                  exitOnEsc: true,
+                  overlayOpacity: 0.8
+                }}
+                onExit={() => setTourEnabled(false) }
+              />
             </>
         }
       </ LayoutContext.Provider>
diff --git a/src/index.css b/src/index.css
index 76aa61c..4681e9f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -226,6 +226,56 @@
         border-color: hsl(var(--p) / var(--tw-border-opacity));
         color: hsl(var(--p))
     }
+
+    .tour *{
+        @apply bg-transparent
+    }
+
+    .tour.introjs-tooltip{
+        @apply shadow bg-neutral;
+        width: 18rem;
+    }
+
+    .tour.intro.introjs-tooltip{
+        @apply py-4
+    }
+
+    .tour .introjs-tooltip-header {
+        @apply text-primary border-b-0
+    }
+
+    .tour .introjs-tooltiptext{
+        @apply text-secondary
+    }
+
+    .tour .introjs-bullets ul li a.active{
+        @apply bg-secondary
+    }
+
+    .tour .introjs-bullets ul li a{
+        @apply bg-base-100
+    }
+
+    .tour .introjs-skipbutton {
+        @apply text-base-100 hover:text-base-100
+    }
+
+    .tour .introjs-tooltipbuttons {
+        @apply border-t-0 p-4
+    }
+
+    .tour .introjs-button {
+        @apply btn btn-outline btn-primary btn-sm text-primary h-auto min-h-0 font-semibold;
+        text-shadow: none;
+    }
+
+    .tour .introjs-arrow{
+        @apply border-b-neutral border-t-neutral !important
+    }
+
+    .tour .introjs-button:hover, .tour .introjs-button:focus, .tour .introjs-button:active {
+        @apply bg-transparent border-accent text-accent
+    }
 }
 
 @layer utilities {
diff --git a/src/views/modals/Download.jsx b/src/views/modals/Download.jsx
new file mode 100644
index 0000000..00b4132
--- /dev/null
+++ b/src/views/modals/Download.jsx
@@ -0,0 +1,57 @@
+import { AiFillWindows } from "react-icons/ai";
+import { SiLinux } from "react-icons/si";
+import { useLayout } from "../../hooks/useLayout";
+
+const Download = () => {
+    const { handleModal, supportsPWA, installPWA } = useLayout();
+
+    return(
+        <div className="card w-full max-w-lg bg-neutral shadow-xl overflow-visible">
+            <div className="card-body">
+                <h2 className="card-title divider divider-primary mb-8">Download the app</h2>
+                <div className="flex flex-1 flex-col w-full">
+                    <div className="flex w-full items-center justify-center">
+                        <a className="inline" href="https://play.google.com/store/apps/details?id=me.oscarrc.nts_web.twa" target="_BLANK" rel="noreferrer noopener">
+                            <img width="200" src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Play Store"/>
+                        </a>     
+                        {
+                            supportsPWA &&               
+                            <buton className="p-3 cursor-pointer" onClick={ installPWA } aria-label="install pwa" href="https://nts-web.oscarrc.me" target="_BLANK" rel="noreferrer noopener">
+                                <img width="175" src="https://user-images.githubusercontent.com/3104648/28969264-d14f6178-791b-11e7-9399-e7820d6aaa39.png" alt="PWA" />
+                            </buton>
+                        }
+                    </div>
+                    <span className="divider divider-secondary my-8 text-secondary">OR</span>                        
+                    <div className="flex w-full items-center justify-center">
+                        <div className="dropdown m-4 flex-1">
+                            <label role="button" tabIndex="0" className="btn btn-info btn-outline w-full" >
+                                <AiFillWindows className="h-6 w-6 mr-1" /> Windows
+                            </label>
+                            <ul tabIndex="0" className="dropdown-content menu menu-info p-2 shadow rounded p-0 -top-px w-full">
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-x64-${import.meta.env.VITE_APP_VERSION}.exe`} target="_BLANK" rel="noreferrer noopener">Installer 64 bits</a></li>
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-ia32-${import.meta.env.VITE_APP_VERSION}.exe`} target="_BLANK" rel="noreferrer noopener">Installer 32 bits</a></li>
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-x64-${import.meta.env.VITE_APP_VERSION}_portable.exe`} target="_BLANK" rel="noreferrer noopener">Portable 64 bits</a></li>
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-ia32-${import.meta.env.VITE_APP_VERSION}_portable.exe`} target="_BLANK" rel="noreferrer noopener">Portable 32 bits</a></li>
+                            </ul>
+                        </div>                            
+                        <div className="dropdown m-4 flex-1">                                
+                            <label role="button" tabIndex="0" className="btn btn-secondary w-full">
+                                <SiLinux className="h-6 w-6 mr-1" /> Linux
+                            </label>
+                            <ul tabIndex="0" className="dropdown-content menu menu-secondary p-2 shadow rounded p-0 -top-px w-full">
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_linux-amd64-${import.meta.env.VITE_APP_VERSION}.deb`} target="_BLANK" rel="noreferrer noopener">Deb 64 bits</a></li>
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_linux-x86_64-${import.meta.env.VITE_APP_VERSION}.rpm`} target="_BLANK" rel="noreferrer noopener">RPM 64 bits</a></li>
+                                <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_linux-x86_64-${import.meta.env.VITE_APP_VERSION}.AppImage`} target="_BLANK" rel="noreferrer noopener">AppImage</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div className="card-actions justify-end gap-2 mt-4 col-span-2">
+                    <button onClick={ () => handleModal() } className="btn btn-sm btn-primary btn-outline">Close</button>
+                </div>
+            </div>            
+        </div>
+    )
+}
+
+export default Download;
\ No newline at end of file
diff --git a/src/views/modals/Info.jsx b/src/views/modals/Info.jsx
deleted file mode 100644
index 7e8fe7b..0000000
--- a/src/views/modals/Info.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { AiFillWindows } from "react-icons/ai";
-import { BsCaretRightFill } from "react-icons/bs";
-import { SiLinux } from "react-icons/si";
-import { useLayout } from "../../hooks/useLayout";
-import { useState } from "react";
-
-const Info = () => {
-    const { handleModal, supportsPWA, installPWA } = useLayout();
-
-    const [ active, setActive ] = useState(0);
-    const sections = ["How it works", "Compatibility", "Installation"]
-    console.log(process.env.npm_package_version)
-    return(
-        <div className="card w-full max-w-lg bg-neutral shadow-xl overflow-visible">
-            <div className="card-body gap-4 mt-2 justify-center">
-                <div className="tabs">
-                    { sections.map((s, i) => <button onClick={ () => setActive(i) } key={i} aria-label={s} className={`flex-1 tab tab-bordered ${ i === active ? "tab-active" : ""}`}>{s}</button>) }
-                </div>
-                <div className="flex text-secondary mt-4 justify-center items-center min-h-[16rem]">
-                    <div className={`${active === 0 ? "visible" : "hidden" } flex-1`}>
-                        <video controls className="w-full h-auto">
-                            <source src="static/media/explainer.mp4" type="video/mp4" />
-                        </video>
-                    </div>
-                    <div className={`${active === 1 ? "visible" : "hidden" } flex-1`}>
-                        <p className="text-justify mb-4">This app makes use of the <strong>Web Midi API</strong> and the <strong>AudioContext API</strong>.</p>
-                        <p className="text-justify mb-4">Make sure your browser support those by checking the links below.</p>
-                        <ul className="mb-4">
-                            <li>
-                                <BsCaretRightFill className="h-4 w-4 mr-2 inline" />
-                                <a className="link link-primary" href="https://caniuse.com/midi" target="_BLANK" rel="noreferrer noopener">Web Midi API</a>
-                            </li>
-                            <li>
-                                <BsCaretRightFill className="h-4 w-4 mr-2 inline" />
-                                <a className="link link-primary" href="https://caniuse.com/audio-api" target="_BLANK" rel="noreferrer noopener">Web Audio API </a>
-                            </li>
-                        </ul>
-                        <p>Due on how Apple handle simple and standard things, this app will not work on any Mac OS or iOS devices.</p>
-                    </div>
-                    <div className={`${active === 2 ? "visible" : "hidden" } flex-1`}>
-                        <div className="flex w-full items-center justify-center">
-                            <a className="inline" href="https://play.google.com/store/apps/details?id=me.oscarrc.nts_web.twa" target="_BLANK" rel="noreferrer noopener">
-                                <img width="200" src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Play Store"/>
-                            </a>     
-                            {
-                                supportsPWA &&               
-                                <buton className="p-3 cursor-pointer" onClick={ installPWA } aria-label="install pwa" href="https://nts-web.oscarrc.me" target="_BLANK" rel="noreferrer noopener">
-                                    <img width="175" src="https://user-images.githubusercontent.com/3104648/28969264-d14f6178-791b-11e7-9399-e7820d6aaa39.png" alt="PWA" />
-                                </buton>
-                            }
-                        </div>
-                        <span className="divider divider-primary font-semibold my-8 text-primary">OR</span>                        
-                        <div className="flex w-full items-center justify-center">
-                            <div className="dropdown m-4 flex-1">
-                                <label role="button" tabIndex="0" className="btn btn-info btn-outline w-full" >
-                                    <AiFillWindows className="h-6 w-6 mr-1" /> Windows
-                                </label>
-                                <ul tabIndex="0" className="dropdown-content menu menu-info p-2 shadow rounded p-0 -top-px w-full">
-                                    <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-x64-${process.env.REACT_APP_VERSION}.exe`} target="_BLANK" rel="noreferrer noopener">64 bits</a></li>
-                                    <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-ia32-${process.env.REACT_APP_VERSION}.exe`} target="_BLANK" rel="noreferrer noopener">32 bits</a></li>
-                                    <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_win-${process.env.REACT_APP_VERSION}.exe`} target="_BLANK" rel="noreferrer noopener">Portable</a></li>
-                                </ul>
-                            </div>                            
-                            <div className="dropdown m-4 flex-1">                                
-                                <label role="button" tabIndex="0" className="btn btn-secondary w-full">
-                                    <SiLinux className="h-6 w-6 mr-1" /> Linux
-                                </label>
-                                <ul tabIndex="0" className="dropdown-content menu menu-secondary p-2 shadow rounded p-0 -top-px w-full">
-                                    <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_linux-amd64-${process.env.REACT_APP_VERSION}.deb`} target="_BLANK" rel="noreferrer noopener">Deb 64 bits</a></li>
-                                    <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_linux-x86_64-${process.env.REACT_APP_VERSION}.rpm`} target="_BLANK" rel="noreferrer noopener">RPM 64 bits</a></li>
-                                    <li><a href={`https://github.com/oscarrc/nts-web/releases/latest/download/NTS-web_linux-${process.env.REACT_APP_VERSION}.AppImage`} target="_BLANK" rel="noreferrer noopener">AppImage</a></li>
-                                </ul>
-                            </div>
-                        </div>                        
-                    </div>
-                </div>
-                <div className="card-actions justify-end gap-2 mt-4 col-span-2">
-                    <button onClick={ () => handleModal() } className="btn btn-sm btn-primary btn-outline">Close</button>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Info;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index b67fcb1..d280c81 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,12 +1,9 @@
-import { defineConfig, loadEnv } from 'vite'
-
 import { VitePWA } from 'vite-plugin-pwa'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import viteCompression from 'vite-plugin-compression';
 
-export default ({ mode }) => {
-    let env = loadEnv(mode, process.cwd());
-
+export default () => {
     return defineConfig({
         base: '/',
         server: {