diff --git a/src/site/_includes/components/filetree.njk b/src/site/_includes/components/filetree.njk
index 888a5fb..c7cb5c4 100644
--- a/src/site/_includes/components/filetree.njk
+++ b/src/site/_includes/components/filetree.njk
@@ -1,17 +1,20 @@
-{% macro menuItem(fileOrFolderName, fileOrFolder, step) %}
+{% macro menuItem(fileOrFolderName, fileOrFolder, step, currentPath) %}
     {%if fileOrFolder.isNote or fileOrFolder.isFolder%}
         <div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
             {%if fileOrFolder.isNote %}
-                <div @click.stop class="notelink">
-                    <a style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}}</a>
+                <div @click.stop class="notelink {{ 'active-note' if fileOrFolder.permalink === permalink}}">
+                    <i class="fa fa-sticky-note" aria-hidden="true"></i>
+                    <a style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
                 </div>
             {% elif fileOrFolder.isFolder%}
-                <div class="folder inner-folder"  x-data="{isOpen: false}" @click.stop="isOpen=!isOpen">
+                <div class="folder inner-folder"  x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">
+                    <div class="foldername-wrapper">
                     <i x-show="isOpen" style="display: none;" class="fa fa-caret-down"></i>
                     <i x-show="!isOpen" class="fa fa-caret-right"></i>
                     <span class="foldername">{{fileOrFolderName}}</span>
+                    </div>
                     {% for fileOrFolderName, child in fileOrFolder %}
-                        {{menuItem(fileOrFolderName, child, step+1)}}
+                        {{menuItem(fileOrFolderName, child, step+1, (currentPath+"/"+fileOrFolderName))}}
                     {% endfor %}
                 </div>
             {% endif %}
@@ -29,7 +32,7 @@
         
         <div x-show="showFilesMobile && !isDesktop" @click="showFilesMobile = false" style="display:none;" class="fullpage-overlay"></div>
 
-      <nav class="filetree-sidebar"  x-show.important="isDesktop || showFilesMobile">
+      <nav class="filetree-sidebar"  x-show.important="isDesktop || showFilesMobile" style="display: block">
 
          <a href="/" style="text-decoration: none;">
                <h1 style="text-align:center;">{{meta.siteName}}</h1>
@@ -41,7 +44,7 @@
         {%endif%}
          <div class="folder" x-data="{isOpen: true}">
                {%- for fileOrFolderName, fileOrFolder in filetree -%}
-                  {{menuItem(fileOrFolderName, fileOrFolder, 0)}}
+                  {{menuItem(fileOrFolderName, fileOrFolder, 0, fileOrFolderName)}}
                {%- endfor -%}
          </div>
       </nav>
diff --git a/src/site/_includes/components/pageheader.njk b/src/site/_includes/components/pageheader.njk
index 8b17063..613b280 100644
--- a/src/site/_includes/components/pageheader.njk
+++ b/src/site/_includes/components/pageheader.njk
@@ -1,5 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<script src="https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js"></script>
+<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
 <script>
     mermaid.initialize({
         startOnLoad: true,
@@ -9,9 +9,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-sv0slik/5O0JIPdLBCR2A3XDg/1U3WuDEheZfI/DI5n8Yqc3h5kjrnr46FGBNiUAJF7rE4LHKwQ/SoSLRKAxEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 
-<script src="https://cdn.jsdelivr.net/npm/force-graph@1.42.16/dist/force-graph.common.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.10.5/dist/module.cjs.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.10.5/dist/module.cjs.min.js" defer></script>
+<script src="//unpkg.com/force-graph"></script>
+
+<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
+<script src="//unpkg.com/alpinejs" defer></script>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 6b2aa1d..972f483 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -206,12 +206,12 @@ ul.task-list {
 }
 
 .notelink {
-    padding: 2px 0 2px 25px;
+    padding: 5px 0 5px 25px;
 }
 
-.foldername {
-    margin-left: 5px;
+.foldername-wrapper {
     cursor: pointer;
+    margin: 4px 0 4px 2px;
 }
 
 .inner-folder {
@@ -222,6 +222,15 @@ ul.task-list {
     border-left: 1px solid var(--text-mark);
 }
 
+.notelink.active-note{
+    a{
+        color: var(--text-accent);
+    }
+    color: var(--text-accent);
+    background-color: var(--background-primary);
+    transform: translateX(10px);
+}
+
 .fullpage-overlay{
     background-color: rgba(0,0,0,0.5); 
     position: absolute;