diff --git a/projet/db/hyperdrive.sql b/projet/db/hyperdrive.sql
index d1c415c368b3b12ba7d40e1fb059822e39077581..e9cb9e17eb5a2fedaf2ec3e321e2f60594274120 100644
--- a/projet/db/hyperdrive.sql
+++ b/projet/db/hyperdrive.sql
@@ -39,8 +39,8 @@ CREATE TABLE IF NOT EXISTS Shares (
     FOREIGN KEY (file_id) REFERENCES Files(file_id)
 );
 
--- Inserting datas
 
+-- Inserting datas
 INSERT INTO Users
 VALUES 
     ("a", "test"),
diff --git a/projet/front/element-style.js b/projet/front/element-style.js
index dbb99c553fa70625ad0210d4880523c8e467d6ae..e61144cb28e5056ef6d00b6d5a21b55d99a81399 100644
--- a/projet/front/element-style.js
+++ b/projet/front/element-style.js
@@ -1,5 +1,5 @@
 function new_file(file_name, file_id) {
-    content =  `
+    content = `
         <div class="file" id="${file_id}">
             <p>
                 <button>
@@ -9,17 +9,19 @@ function new_file(file_name, file_id) {
             </p>
         </div>
     `
-    document.getElementById("drive").append(content);
+    document.getElementById("content-drive").innerHTML += content;
 }
 
-function new_folder (folder_name) {
+function new_folder (folder_name, path) {
     content = `
         <div class="folder">
             <p>
-                <button><img src="/images/folder_img.png" height="50px"></button>
+                <button onclick="change_path('${path}')">
+                    <img src="/images/folder_img.png" height="50px">
+                </button>
                 <p>${folder_name}</p>
             </p>
         </div>
         `;
-    document.getElementById("drive").append(content);
+    document.getElementById("content-drive").innerHTML += content;
 }
\ No newline at end of file
diff --git a/projet/front/index.html b/projet/front/index.html
index 06ad4f90a449e2535bfb1f1d6478ccf8b1ef14fa..fd89ca14eeb248b5888b47eb1b8d15628fb3b96c 100644
--- a/projet/front/index.html
+++ b/projet/front/index.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" type="text/css" href="/styles/style.css">
     <script src="jquery-3.4.1.min.js"></script>
     <script src="element-style.js"></script>
+    <script src="show-content.js"></script>
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
@@ -14,13 +15,16 @@
     <div id="hyperdrive">
         <div id="menu">
             <h3>Menu</h3>
-            <button><img src="/images/file_img.png" height="50px"></button>
+            <input type="text" id="username">
+            <input type="password" id="passwd">
+            <button onclick="login()">Login</button>
         </div>
         <div id="drive">
             <h3>Drive</h3>
-            <script type="javascript">
-                
-            </script>
+            <p id="dir_name"></p>
+            <div id="content-drive">
+
+            </div>
         </div>
         <div id="info">
             <h3>Infos</h3>
diff --git a/projet/front/show-content.js b/projet/front/show-content.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c0c1542e671729cb4a2439544e514b9724cd2b9
--- /dev/null
+++ b/projet/front/show-content.js
@@ -0,0 +1,32 @@
+"use strict";
+
+function change_path(path){
+    document.getElementById("content-drive").innerHTML = "";
+    $.ajax({url: 'change-path'+path, success: function(result){
+        console.log(result);
+        document.getElementById("dir_name").innerHTML = "Directory : " + path;
+        for (let i in result){
+            if (result[i].file_id){
+                new_file(result[i].file_name, result[i].file_id);
+            } else {
+                if (path !== result[i].paths){
+                    let name = result[i].paths.split("/");
+                    new_folder(name[name.length-1], result[i].paths);
+                }
+            }
+        }
+    }});
+}
+
+function login() {
+    let username = document.getElementById("username").value
+    let passwd = document.getElementById("passwd").value
+    console.log("login",
+            username,
+            passwd
+        );
+    let log_ok = true;
+    if (log_ok) {
+        change_path('/' + username)
+    }
+}
\ No newline at end of file
diff --git a/projet/hyperdrive-rest.js b/projet/hyperdrive-rest.js
index e7642116290d8757a7ce4ef8d6aff9078f9a588c..ec568e8aef6254cdd74e9bda0d7d4d119407d077 100644
--- a/projet/hyperdrive-rest.js
+++ b/projet/hyperdrive-rest.js
@@ -112,8 +112,6 @@ app.get('/', (req, res) => {
 // resCode : [ 0: User now logged in, 1: False password, 2: Invalid username, 3: Empty user or pass ]
 app.get('/login', (req, res) => {
 
-    // sql.connect();
-
     const user = req.query['user'];
     const pass = req.query['pass'];
     // userObject = sql.userExist(user, pass);
@@ -291,7 +289,12 @@ app.get('/download/:file_id', (req, res) => {
  * param 
  */
 app.get('/change-path*', (req, res) => {
-    res.send(`Request for a change path (${req.params['0']})`)
+
+    content = sql.changeDirectory('a', req.params['0'],
+    (content) => {
+        res.send(content);
+    });
+    // res.send(`Request for a change path (${req.params['0']})`)
 })
 
 app.get('/create-path*', (req, res) => {
diff --git a/projet/sql-request.js b/projet/sql-request.js
index 2e66161c423c325002bf99981b3d74641e8fb8b2..e6ca52e6406acdecaa5d7725727d45b66ed663d3 100644
--- a/projet/sql-request.js
+++ b/projet/sql-request.js
@@ -14,20 +14,19 @@ var con = mysql.createConnection({
  * @param {string} login This is the login of the user
  * @param {string} pass This is the password of the user
  */
-async function userExist(login, pass){
+function userExist(login, pass, callback){
     const q = `SELECT login, passwd FROM Users WHERE login='${login}' AND passwd='${pass}';`;
     con.query(q, function (err, result) {
-        console.log(result);
         if (err) return false;
         if (result.length > 0) {
-            console.log("user exists");
-            return {
+            console.log("user already exists");
+            return callback({
                 login: result[0]['login'],
                 passwd: result[0]['passwd']
-            };
+            });
         } else {
             console.log("user don't exists");
-            return false;
+            return callback(false);
         }
     });
 }
@@ -37,29 +36,36 @@ async function userExist(login, pass){
  * @param {string} login This is the login of the user
  * @param {string} pass This is the password of the user
  */
-async function insertUser(login, passwd) {
-    let q = `INSERT INTO Users VALUES (${login}, ${passwd});`;
-    re = await userExist(login, passwd);
-    if (!re){
-        console.log("querry");
-        con.query(q, (err, res) => {
-            if (err) return false;
-            console.log("User", login, "inserted in the db")
-            return true;
-        });
-    }
+function insertUser(login, passwd, callback){
+    let q = `INSERT INTO Users VALUES ('${login}', '${passwd}');`;
+    userExist(login, passwd, (userExist) => {
+        if (!userExist){
+            con.query(q, (err, res) => {
+                if (err) return callback(false);
+                if (!res) {console.log(res);return callback(false);}
+                console.log("User", login, "inserted in the db");
+                return callback(true);
+            });
+        }
+    });
 }
 
-function addPath(login, path, parent){
-    let q = `INSERT INTO Paths VALUES ('/${login}', ${login}, ${parent});`;
+/**
+ * This function add a new directory to a user
+ * @param {string} path Path to add
+ * @param {string} login User's path
+ * @param {string} parent Parent of the new folder
+ */
+function addPath(path, login, parent, callback){
+    let q = `INSERT INTO Paths VALUES ('${path}', '${login}', ${parent});`;
     con.query(q, function(err, res) {
         if (err) {
             console.log("Error while adding a new path");
             console.log(err);
-            return false;
+            return callback(false);
         }
         console.log("New path", path, "added succesfully !");
-        return true;
+        return callback(true);
     });
 }
 
@@ -69,23 +75,16 @@ function addPath(login, path, parent){
  * @param {string} login This is the login of the user
  * @param {string} pass This is the password of the user
  */
-async function addUser(login, passwd){
-    return new Promise(resolve => {
-        a == true;
+function addUser(login, passwd) {
+
+    insertUser(login, passwd, (insertOk) => {
+        console.log(insertOk);
+        if (insertOk) {
+            addPath('/'+login, login, null, (res)=>{});
+            console.log("Add ok");
+        }
     });
 }
-//     user_inserted = await insertUser(login, passwd);
-//     if (user_inserted) {
-//         path_added = await addPath(login, `/${login}`, 'NULL');
-//         if (path_added) {
-//             console.log("File added succesfully");
-//             return true
-//         }
-//         console.log("Error while adding a path");
-//         return false;
-//     }
-//     return false;
-// }
 
 
 /**
@@ -97,31 +96,59 @@ async function addUser(login, passwd){
 | /a/coucou/test | a     | /a/coucou | NULL    | NULL      |
 +----------------+-------+-----------+---------+-----------+
  */
+async function changeDirectory(login, path, callback){
+    q = `
+        SELECT Paths.paths, login, parent, Files.file_id, Files.file_name
+        FROM Paths
+        LEFT JOIN Files ON Files.paths = Paths.paths
+        WHERE Paths.login='${login}'
+        AND Paths.paths='${path}'
+        OR Paths.parent='${path}';`;
+
+    con.query(q, (err, res) => {
+        if (err) { 
+            console.log("Error while loading the path");
+            return callback(false, err);
+        }
 
-function changePath(login, path){
-    return [
-        {
-            path: '/a/coucou',
-            login: 'a',
-            parent: '/a',
-            file_id: 'abnnnnn',
-            file_name: 'deux'
-        },
-        {
-            path: '/a/coucou',
-            login: 'a',
-            parent: '/a',
-            file_id: 'accb',
-            file_name: 'trois'
-        },
-        {
-            path: '/a/coucou/test',
-            login: 'a',
-            parent: '/a/coucou',
-            file_id: 'NULL',
-            file_name: 'NULL'
+        let content = [];
+        for (let i in res){
+            content.push({
+                paths: res[i].paths,
+                login: res[i].login,
+                parent: res[i].parent,
+                file_id: res[i].file_id,
+                file_name: res[i].file_name
+            });
         }
-    ];
+
+        console.log(content);
+        return callback(content, "Change dir success");
+    });
+
+    // return [
+    //     {
+    //         path: '/a/coucou',
+    //         login: 'a',
+    //         parent: '/a',
+    //         file_id: 'abnnnnn',
+    //         file_name: 'deux'
+    //     },
+    //     {
+    //         path: '/a/coucou',
+    //         login: 'a',
+    //         parent: '/a',
+    //         file_id: 'accb',
+    //         file_name: 'trois'
+    //     },
+    //     {
+    //         path: '/a/coucou/test',
+    //         login: 'a',
+    //         parent: '/a/coucou',
+    //         file_id: 'NULL',
+    //         file_name: 'NULL'
+    //     }
+    // ];
 }
 
 // verify if a file_id is at a user
@@ -173,4 +200,5 @@ async function addSharing(login, to_user, file_id){
 exports.userExist = userExist;
 exports.addUser = addUser;
 exports.addPath = addPath;
-exports.addSharing = addSharing;
\ No newline at end of file
+exports.addSharing = addSharing;
+exports.changeDirectory = changeDirectory;