diff --git a/README.md b/README.md
index 445289b..917303c 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Antmarky is a static-site generator for Markdown based on Node.js/EJS.
 
 ![Docker Pulls](https://img.shields.io/docker/pulls/bandantonio/antmarky)
 
-The main idea behind creating Antmarky was to have a generator with *zero configuration* that can serve your Markdown files in the documentation directory. Currently, Antmarky handles the root directory level only, with no descendants (just yet).
+The main idea behind creating Antmarky was to have a generator with *zero configuration* that can serve your Markdown files in the documentation directory. Currently, Antmarky flattens out the folder structure and displays all the files at the root level under the corresponding folder.
 
 ## Features
 
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index 00cc38d..00ac30b 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -44,8 +44,39 @@ body {
   color: #2d2b57;
 }
 
+.list_heading {
+  font-size: 13px;
+  font-weight: 700;
+  margin: .8em 0 0 0;
+}
+
+[aria-expanded="false"]::before {
+  display: inline-block;
+  width: 1em;
+  font-family: 'Font Awesome 6 Free';
+  content: '\f105';
+  font-size: 80%;
+}
+
+[aria-expanded="true"]::before {
+  display: inline-block;
+  width: 1em;
+  font-family: 'Font Awesome 6 Free';
+  content: '\f107';
+  font-size: 80%;
+}
+
+.list_files {
+  list-style: none;
+}
+
+.list_files > li {
+  margin-left: -.5em;
+}
+
 .sidebar, .toc {
   position: fixed;
+  overflow: scroll;
 }
 
 .powered-by a {
@@ -59,7 +90,6 @@ body {
 
 .toc {
   right: 0;
-  overflow: scroll;
 }
 
 .list_item.ind-3 {
@@ -86,6 +116,7 @@ body {
 
 .sidebar_list a.active {
   color: #DB504A;
+  font-weight: 700;
   text-decoration: underline;
 }
 
@@ -103,7 +134,16 @@ body {
   font-weight: 700;
 }
 
+.sidebar_list {
+  margin: 0;
+  padding-left: .5em;
+}
+
 /* Override default Bootstrap styling */
+.btn {
+  display: inherit;
+}
+
 .nav-link {
   display: inherit;
   padding: inherit;
diff --git a/src/common/prepare-content.js b/src/common/prepare-content.js
index fa862c3..e1fd560 100644
--- a/src/common/prepare-content.js
+++ b/src/common/prepare-content.js
@@ -10,31 +10,63 @@ let { errorPage } = require('../data/defaults');
 
 // LOCATE MARKDOWN FILES
 let findMdFiles = async (docsDir = 'docs') => {
-  const directoryPath = (docsDir) ? path.join(process.cwd() + `/${docsDir}`) : path.join(process.cwd());
-  try {
-    let files = await fsp.readdir(directoryPath);
-    return files.filter(file => path.extname(file) == '.md').map(mdFile => {
-      let filePath = path.resolve(`${directoryPath}/${mdFile}`)
-      return {
-        name: mdFile.substring(0, mdFile.lastIndexOf('.')),
-        path: filePath
+  const baseDirectoryPath = (docsDir) ? path.join(process.cwd() + `/${docsDir}`) : path.join(process.cwd());
+  let fileTree = [];
+  let traverseDirectoryTree = (dir) => {
+    let dirItems = fs.readdirSync(dir);
+    for (let item of dirItems) {
+      let relativePath = path.relative(baseDirectoryPath, dir);
+      let absolutePath = path.join(dir, item);
+
+      let dirLevel = (relativePath == "") ? 0 : relativePath.split('/').length;
+      let pathToDirFull = (relativePath == '') ? 'home' : relativePath ;
+      let dirClass = pathToDirFull.substring(pathToDirFull.lastIndexOf('/') + 1, pathToDirFull.length);
+      let dirName = dirClass[0].toUpperCase() + dirClass.substring(1, dirClass.length);
+
+      if (fs.statSync(absolutePath).isDirectory()) {
+        traverseDirectoryTree(absolutePath);
+      } else {
+        if (path.extname(item) == '.md') {
+          let mdFile = item.substring(0, item.lastIndexOf('.'));
+          let findIndex = fileTree.findIndex(obj => obj.dirPath == relativePath);
+          if (findIndex >= 0) {
+            fileTree[findIndex].files.push(mdFile);
+          } else {
+            fileTree.push({
+              dirLevel: dirLevel,
+              basePath: baseDirectoryPath,
+              dirPath: relativePath,
+              dirName: dirName,
+              dirClass: dirClass,
+              files: [ mdFile ]
+            })
+          }
+        }
       }
-    });
-  } catch (err) {
-    console.log(err);
+    }
   }
+  traverseDirectoryTree(baseDirectoryPath);
+  
+  return fileTree.sort((a, b) => {
+    return a.dirLevel - b.dirLevel;
+  })
 }
 
 // GET CONTENTS OF MARKDOWN FILES
 let getFilesContent = async (fileDetails) => {
-  return fileDetails.map(details => {
-    let content = fs.readFileSync(details.path, { encoding: 'utf-8'});
-    return {
-      name: details.name,
-      title: details.name,
-      content: content
-    }
-  })
+  let mdFileContent = [];
+  for (let details of fileDetails) {
+    let absolutePath = path.join(details.basePath, details.dirPath);
+    details.files.forEach(file => {
+      let content = fs.readFileSync(path.join(absolutePath, `${file}.md`), { encoding: 'utf-8'});
+      mdFileContent.push({
+        name: file,
+        title: file,
+        content: content
+      })
+    });
+  }
+  return mdFileContent;
 }
 
 // CONVERT MARKDOWN FILES TO HTML
diff --git a/views/partials/sidebar.ejs b/views/partials/sidebar.ejs
index 0f958dd..7d9c86d 100644
--- a/views/partials/sidebar.ejs
+++ b/views/partials/sidebar.ejs
@@ -1,11 +1,25 @@
 <div class="list_title"><i class="fas fa-list"></i> Table of contents</div>
 <ul class="sidebar_list">
   <% pages.forEach(page => { %>
-    <% if (page.name == name) { %>
-      <li class="list_item"><a class="active" href="<%= page.name %>.html"><%= page.name %></a></li>
-    <% } else { %>
-      <li class="list_item"><a href="<%= page.name %>.html"><%= page.name %></a></li>
-    <% } %>
+    <div class="sidebar_list_item">
+      <button class="btn btn-sm list_heading <%= page.dirClass %> sub-<%= page.dirLevel %>"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#<%= page.dirClass %>"
+        aria-expanded="true"
+        aria-controls="<%= page.dirClass %>">
+        <%= page.dirName %>
+      </button>
+        <ul id="<%= page.dirClass %>" class="list_files collapse show">
+        <% page.files.forEach(file => { %>
+          <% if (file == name) { %>
+            <li class="list_item"><a class="nav-link active" href="<%= file %>.html"><%= file %></a></li>
+          <% } else { %>
+            <li class="list_item"><a class="nav-link" href="<%= file %>.html"><%= file %></a></li>
+          <% } %>
+        <% }) %>
+      </ul>
+    </div>
   <% }) %>
 </ul>
 <%- include('./footer'); %>
\ No newline at end of file